:root{
  --primary:#4f46e5; --primary-weak:#eef2ff;
  --bg:#f4f5f7; --card:#ffffff; --line:#e5e7eb;
  --text:#1f2937; --muted:#6b7280;
  --green:#059669; --green-weak:#ecfdf5;
  --orange:#d97706; --orange-weak:#fffbeb;
  --red:#dc2626; --blue:#2563eb;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text);font-size:15px}
.hidden{display:none!important}
a{color:var(--primary)}

/* ---- 登录页 ---- */
.login-wrap{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:32px 24px;max-width:420px;margin:0 auto}
.login-logo{text-align:center;margin-bottom:28px}
.login-logo .logo{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:30px;font-weight:700}
.login-logo h1{font-size:22px;margin-top:14px}
.login-logo p{color:var(--muted);font-size:13px;margin-top:6px}
.login-card{background:var(--card);border-radius:16px;padding:24px 20px;box-shadow:0 4px 20px rgba(0,0,0,.06)}

/* ---- 表单 ---- */
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font-size:15px;background:#fff;color:var(--text);outline:none}
.field input:focus,.field select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.12)}
.btn{display:inline-block;border:none;border-radius:10px;padding:11px 18px;font-size:15px;cursor:pointer;background:var(--primary);color:#fff;width:100%}
.btn:active{opacity:.85}
.btn.ghost{background:var(--primary-weak);color:var(--primary)}
.btn.danger{background:#fee2e2;color:var(--red)}
.btn.small{width:auto;padding:6px 12px;font-size:13px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---- 顶部 ---- */
/* v12.6：标题单行省略，用户区不换行——修复手机端标题/人名被压成两行竖排 */
.topbar{position:sticky;top:0;z-index:20;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.topbar .org{font-size:16px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .user{display:flex;align-items:center;gap:8px;font-size:13px;flex:0 0 auto;white-space:nowrap}
.topbar .logout{background:rgba(255,255,255,.18);border:none;color:#fff;border-radius:8px;padding:5px 10px;font-size:12px;cursor:pointer;white-space:nowrap}
@media(max-width:480px){
  .topbar{padding:11px 12px}
  .topbar .org{font-size:14px}
  .topbar .user{gap:6px;font-size:12px}
  .topbar .logout{padding:4px 8px;font-size:11px}
}

/* ---- 底部导航 ---- */
.tabbar{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);display:flex;z-index:20;padding-bottom:env(safe-area-inset-bottom)}
.tabbar button{flex:1;border:none;background:none;padding:8px 0 6px;font-size:11px;color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.tabbar button .ico{font-size:20px;line-height:1}
.tabbar button.active{color:var(--primary);font-weight:600}

/* ---- 管理端顶部标签 ---- */
.admtabs{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);display:flex;overflow-x:auto;white-space:nowrap}
.admtabs button{border:none;background:none;padding:13px 16px;font-size:14px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent}
.admtabs button.active{color:var(--primary);border-color:var(--primary);font-weight:600}

main{padding:16px 14px calc(88px + env(safe-area-inset-bottom));max-width:860px;margin:0 auto}
main.wide{max-width:1280px;padding:16px 16px calc(88px + env(safe-area-inset-bottom))}

/* ---- 卡片/统计 ---- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.cards .card:first-child{grid-column:1/-1}
.cards.even .card:first-child{grid-column:auto}
.card{background:var(--card);border-radius:14px;padding:14px 16px;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.card .k{font-size:12px;color:var(--muted)}
.card .v{font-size:24px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums}
.card .v small{font-size:12px;font-weight:400;color:var(--muted)}
.card.hl{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff}
.card.hl .k{color:rgba(255,255,255,.8)}
.card.hl .v small{color:rgba(255,255,255,.7)}

.panel{background:var(--card);border-radius:14px;box-shadow:0 1px 4px rgba(0,0,0,.04);margin-bottom:14px;overflow:hidden}
.panel .hd{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-weight:600}
.panel .bd{padding:4px 16px 12px}

/* ---- 列表条目 ---- */
.item{padding:12px 0;border-bottom:1px solid #f3f4f6;display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.item:last-child{border-bottom:none}
.item .l1{display:flex;justify-content:space-between;align-items:center;font-weight:500}
.item .l2{display:flex;justify-content:space-between;align-items:center;margin-top:4px;font-size:12px;color:var(--muted)}
.money{font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums}
.money.plus{color:var(--green)}
.tag{display:inline-block;font-size:11px;border-radius:6px;padding:2px 7px;margin-right:6px}
.tag.recruiter{background:var(--primary-weak);color:var(--primary)}
.tag.instructor{background:#e0f2fe;color:var(--blue)}
.tag.closer{background:var(--orange-weak);color:var(--orange)}
.tag.referral{background:var(--green-weak);color:var(--green)}
.tag.unsettled{background:#fef3c7;color:#b45309}
.tag.settled{background:#f1f5f9;color:#64748b}
.tag.new{background:var(--primary-weak);color:var(--primary)}
.tag.renew{background:var(--green-weak);color:var(--green)}
.empty{text-align:center;color:var(--muted);padding:34px 0;font-size:13px}
.v.positive{color:var(--green)}
.v.negative{color:var(--red)}
.card .sub{font-size:12px;color:var(--muted);margin-top:4px}
.card.hl .sub{color:rgba(255,255,255,.85)}

/* ---- 表格(管理端) ---- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
.tbl th{font-size:12px;color:var(--muted);font-weight:500;text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:10px;border-bottom:1px solid #f3f4f6;vertical-align:top;overflow-wrap:break-word;word-break:break-word}
.tbl td.num{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.tbl .no-scroll{min-width:640px}

/* ---- 弹窗 / 提示 ---- */
#modal-mask{position:fixed;inset:0;background:rgba(17,24,39,.45);z-index:50;display:flex;align-items:flex-end;justify-content:center}
#modal{background:#fff;width:100%;max-width:480px;border-radius:18px 18px 0 0;padding:20px 18px calc(18px + env(safe-area-inset-bottom));max-height:86vh;overflow-y:auto}
@media(min-width:520px){
  #modal-mask{align-items:center}
  #modal{border-radius:16px}
}
#modal h3{margin-bottom:16px;font-size:17px}
#modal .row{display:flex;gap:10px;margin-top:6px}
#modal .row .btn{flex:1}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:100px;background:rgba(17,24,39,.9);color:#fff;padding:10px 18px;border-radius:10px;font-size:14px;z-index:99;max-width:86vw;text-align:center}
.muted{color:var(--muted);font-size:12px}
.rule-box{background:var(--primary-weak);border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.9;color:#3730a3;margin-bottom:14px}
.pw-link{text-align:center;margin-top:16px}
.pw-link a{font-size:13px;cursor:pointer}

/* ---- 模糊搜索下拉 ---- */
.combo{position:relative}
.combo input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font-size:15px;background:#fff;color:var(--text);outline:none}
.combo input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.12)}
.sugg{position:absolute;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.14);z-index:60;max-height:248px;overflow-y:auto}
.sugg-item{padding:10px 12px;font-size:14px;cursor:pointer;border-bottom:1px solid #f3f4f6}
.sugg-item:last-child{border-bottom:none}
.sugg-item:hover{background:var(--primary-weak)}

/* =====================================================================
   v12.3 布局优化：让说明文字与筛选控件不挤压、不变形，桌面不出现割裂横滚
   ===================================================================== */

/* 通用文字换行兜底：说明段落绝不会把父卡片撑宽/顶变形 */
.muted,.rule-box,p,.item .l2,button,.field label,.tbl th,.tbl td{overflow-wrap:break-word;word-break:break-word}
.rule-box{overflow-wrap:break-word;word-break:break-word}
.panel .hd{flex-wrap:wrap;gap:6px}
.panel .hd .muted{font-weight:400}

/* —— 自适筛选工具栏：窄屏自动折行，绝不把某列挤成窄条 —— */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.toolbar .fld{flex:1 1 170px;min-width:0;margin:0}
.toolbar .fld.wide{flex:2 1 260px}
.toolbar .fld.small{flex:0 1 170px}
.toolbar .acts{flex:0 0 auto;display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.toolbar .acts:empty{display:none}
/* 工具栏内的 add 主按钮与搜索同行：窄屏时换到下一行独占 */
.toolbar .lead{flex:0 0 auto;align-self:flex-end}
@media(max-width:760px){
  .toolbar .lead{flex:1 1 100%}
  .toolbar .fld,.toolbar .fld.wide,.toolbar .fld.small{flex:1 1 100%}
}
/* 行内的字段，label 全宽、控件全宽 */
.toolbar .field{width:100%}
.toolbar .field label{white-space:normal}

/* 输入框 + 按钮 组合：输入框自动占满剩余宽度，窄屏不错位 */
.sg{display:flex;gap:8px;align-items:center;width:100%}
.sg input{flex:1;min-width:0}
.sg .btn{flex:0 0 auto}

/* —— 等宽筛选网格：>900px 等比多列，900~600 两列，<600 单列 —— */
.fgrid{display:grid;gap:10px;align-items:end}
.fgrid .field{margin:0;min-width:0}
.fgrid .field>*{width:100%}
.fgrid .acts{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.fgrid.c2{grid-template-columns:repeat(2,1fr)}
.fgrid.c3{grid-template-columns:repeat(3,1fr)}
.fgrid.c4{grid-template-columns:repeat(4,1fr)}
.fgrid.c5{grid-template-columns:repeat(5,1fr)}
@media(max-width:900px){
  .fgrid.c3,.fgrid.c4,.fgrid.c5{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .fgrid.c2,.fgrid.c3,.fgrid.c4,.fgrid.c5{grid-template-columns:1fr!important;gap:10px}
  .fgrid .acts{width:100%}
}

/* —— 说明/公式文案与卡片：表格内窄屏也能读清 —— */
.note{font-size:12.5px;color:var(--muted);line-height:1.7;margin:8px 0 0;overflow-wrap:break-word;word-break:break-word}
.statline{display:flex;justify-content:space-between;margin-top:12px;font-size:13px;flex-wrap:wrap;gap:8px}

/* —— 弹窗表单双列，窄屏单列 —— */
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.fg2 .field{margin-bottom:12px}
@media(max-width:600px){.fg2{grid-template-columns:1fr}}

/* 统计卡片在超窄屏单列 */
@media(max-width:380px){
  .cards{grid-template-columns:1fr}
  .cards.even .card:first-child{grid-column:auto}
}
/* 表格行内按钮不换行挤压 */
.tbl td .btn.small{margin:2px 0;white-space:nowrap}

/* =====================================================================
   v12.6 手机端（≤720px）：管理端表格转「卡片式」——
   隐藏表头行，每行记录变一张卡片，td 变「标签：值」一行（标签来自 td 的 data-l）
   ===================================================================== */
@media(max-width:720px){
  .tbl-wrap{overflow:visible}
  table.tbl,.tbl tbody{display:block}
  .tbl{min-width:0!important}
  .tbl tr{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:2px 14px 6px;margin:0 0 10px}
  .tbl tr:first-child{display:none} /* 表头行隐藏，字段名由 data-l 提供 */
  .tbl td{display:block;padding:6px 0;border-bottom:1px dashed #eef0f3;white-space:normal!important;text-align:left;font-size:13px}
  .tbl td:first-child{padding-top:8px}
  .tbl td:last-child{border-bottom:none;padding-bottom:8px}
  .tbl td[data-l]::before{content:attr(data-l) "：";display:inline-block;color:var(--muted);font-size:12px;min-width:4.5em}
  .tbl td.num{white-space:normal;text-align:left}
  .tbl td.empty{border-bottom:none;padding:22px 0}
  .tbl td .btn.small{margin:2px 6px 2px 0}
}