@charset "UTF-8";
/**
 * 笨小孩信息管理系统 —— bxh-components.css
 * 职责：组件层：Modal / Form / Progress / File / Draw / Review / History / ProjectCard / 图表 / 分页 / Toast
 * 来源：app.html（4338 行单体版）第 300-486 行，按源码行序剪切，禁止重排规则
 */
/* ── MODAL ── */
.mo{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(4px);z-index:1000;align-items:center;justify-content:center;padding:20px}
.mo.on{display:flex}
.modal{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(4px);z-index:1000;align-items:center;justify-content:center;padding:20px}
.modal.on{display:flex}
.mi{background:var(--card);border-radius:16px;box-shadow:0 25px 60px rgba(0,0,0,.2);width:100%;max-width:660px;max-height:90vh;overflow-y:auto;animation:mi .25s cubic-bezier(.16,1,.3,1);border:1px solid var(--bd)}
.mi-wd{max-width:880px}
.mi-fs{max-width:960px}
.modal-c{background:var(--card);border-radius:16px;box-shadow:0 25px 60px rgba(0,0,0,.2);width:100%;max-width:440px;max-height:90vh;overflow-y:auto;animation:mi .25s cubic-bezier(.16,1,.3,1);border:1px solid var(--bd)}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--bd);font-size:15px;font-weight:600}
.modal-b{padding:22px}
.modal-f{display:flex;justify-content:flex-end;gap:8px;padding:14px 22px;border-top:1px solid var(--bd)}
@keyframes mi{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.mh{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--bd)}
.mt{font-size:17px;font-weight:700;color:var(--t)}
.mx{width:30px;height:30px;border-radius:8px;border:none;background:var(--bg);cursor:pointer;font-size:16px;color:var(--t2);display:flex;align-items:center;justify-content:center;transition:all .2s}
.mx:hover{background:#fef2f2;color:var(--d)}
.mb{padding:22px}
.mf{display:flex;justify-content:flex-end;gap:8px;padding:14px 22px;border-top:1px solid var(--bd)}

/* ── FORM ── */
.fg{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fg .full{grid-column:1/-1}
.fgr{display:flex;flex-direction:column;gap:5px}
.fgr label{font-size:12px;font-weight:500;color:var(--t2)}
.fgr label span{color:var(--d);margin-left:2px}
.fi{padding:9px 13px;border:1.5px solid var(--bd);border-radius:8px;font-size:13px;outline:none;transition:border .2s,box-shadow .2s;width:100%;background:var(--card)}
.fi:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
select.fi{cursor:pointer}
textarea.fi{resize:vertical;min-height:70px}

/* ── PROGRESS ── */
.pf{display:flex;align-items:center;margin:14px 0}
.ps2{flex:1;display:flex;flex-direction:column;align-items:center;position:relative}
.ps2::before{content:'';position:absolute;top:13px;left:50%;right:-50%;height:2px;background:var(--bd);z-index:0}
.ps2:last-child::before{display:none}
.ps2.done::before{background:var(--s)}
.pd{width:26px;height:26px;border-radius:50%;background:var(--bd);border:3px solid var(--card);display:flex;align-items:center;justify-content:center;font-size:12px;z-index:1;position:relative}
.ps2.done .pd{background:var(--s);color:#fff}
.ps2.active .pd{background:var(--p);color:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.2)}
.pl{font-size:10px;color:var(--t3);margin-top:4px;text-align:center}

/* ── FILE ── */
.fl{display:flex;flex-direction:column;gap:6px}
.fi2{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--bg);border-radius:8px;border:1px solid var(--bd);transition:all .2s}
.fi2:hover{border-color:var(--p);background:var(--pl)}
.fi2 .fic{font-size:22px}
.fi2 .fin{flex:1;min-width:0}
.fi2 .fn{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fi2 .fm{font-size:11px;color:var(--t3)}
.fi2 .fdl{font-size:13px;color:var(--p);cursor:pointer;padding:3px 8px;border-radius:5px;transition:background .2s}
.fi2 .fdl:hover{background:var(--pl)}
.fi2 .fdel{background:none;border:none;color:var(--t3);cursor:pointer;font-size:16px;padding:2px 6px;border-radius:4px;transition:all .2s}
.fi2 .fdel:hover{background:#fef2f2;color:var(--d)}
.fi-drop{border:2px dashed var(--bd);border-radius:10px;padding:24px;text-align:center;color:var(--t3);font-size:13px;cursor:pointer;transition:all .2s;margin-top:8px}
.fi-drop:hover{border-color:var(--p);background:var(--pl);color:var(--p)}
.fi-drop input{display:none}

/* ── DRAW ── */
.dp{background:linear-gradient(135deg,#1e3a5f 0%,#0f172a 60%,#1e1b4b 100%);border-radius:16px;padding:26px;margin-bottom:18px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.dp::before{content:'';position:absolute;top:-40px;right:-40px;width:200px;height:200px;background:rgba(99,102,241,.12);border-radius:50%}
.dp::after{content:'';position:absolute;bottom:-60px;left:-20px;width:160px;height:160px;background:rgba(99,102,241,.06);border-radius:50%}
.dp-t{font-size:18px;font-weight:700;color:#fff;margin-bottom:4px;position:relative;z-index:1}
.dp-s{font-size:12px;color:rgba(255,255,255,.5);margin-bottom:20px;position:relative;z-index:1}
.dp-c{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;position:relative;z-index:1}
.dp-f{display:flex;flex-direction:column;gap:5px}
.dp-f label{font-size:11px;font-weight:500;color:rgba(255,255,255,.75)}
.dp-f select,.dp-f input{padding:8px 13px;border-radius:8px;border:1.5px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font-size:13px;outline:none;min-width:140px;backdrop-filter:blur(8px);transition:all .2s}
.dp-f select option{background:#0f172a;color:#fff}
.dp-f select:focus,.dp-f input:focus{border-color:rgba(99,102,241,.6);background:rgba(255,255,255,.12)}
.dp-f input{width:90px}
.dr-res{background:var(--card);border-radius:16px;padding:18px;margin-bottom:18px;display:none;box-shadow:0 1px 3px rgba(0,0,0,.06);border:1px solid var(--bd)}
.dr-res.show{display:block}
.dr-h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.dr-h span:first-child{font-size:14px;font-weight:600}
.drcnt{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--p);color:#fff;font-size:12px;font-weight:700}
.dr-h span:last-child{margin-left:auto;display:flex;gap:6px}
.dc{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.dcard{background:var(--bg);border:1.5px solid var(--bd);border-radius:10px;padding:14px;text-align:center;transition:all .3s;animation:ca .4s cubic-bezier(.16,1,.3,1) both}
.dcard:hover{border-color:var(--accent);background:var(--pl);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.06)}
@keyframes ca{from{opacity:0;transform:scale(.85) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.dc-em{font-size:26px;margin-bottom:6px}
.dc-n{font-size:15px;font-weight:700;margin-bottom:4px}
.dc-m{display:inline-block;font-size:11px;color:var(--p);background:var(--pl);border-radius:20px;padding:2px 9px;margin-bottom:4px}
.dc-o{font-size:11px;color:var(--t3)}

/* ── REVIEW CARD ── */
.rc{background:var(--card);border-radius:14px;padding:16px;border:1.5px solid var(--bd);transition:all .2s;cursor:pointer;margin-bottom:10px}
.rc:hover{border-color:var(--p);box-shadow:0 4px 12px rgba(0,0,0,.06);transform:translateY(-1px)}
.rc-h{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px}
.rc-n{font-size:15px;font-weight:700}
.rc-m{font-size:12px;color:var(--t2);margin-top:3px}
.rc-ex{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.ec{padding:3px 10px;background:var(--pl);color:var(--p);border-radius:20px;font-size:11px;font-weight:500}

/* ── HISTORY ACCORDION ── */
.ha{border:1.5px solid var(--bd);border-radius:12px;margin-bottom:10px;overflow:hidden;background:var(--card)}
.ha-h{padding:14px 18px;background:var(--bg);display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:background .15s;user-select:none}
.ha-h:hover{background:#e2e8f0}
.ha-h span:first-child{font-size:14px;font-weight:600}
.ha-h span:last-child{font-size:12px;color:var(--t2);display:flex;align-items:center;gap:8px}
.ha-b{padding:16px 18px;display:none}
.ha-b.show{display:block}
.ha-ar{font-size:12px;transition:transform .2s}
.ha-ar.open{transform:rotate(180deg)}

/* ── PROJECT CARD ── */
.pj{background:var(--card);border-radius:14px;padding:18px;border:1.5px solid var(--bd);transition:all .2s;cursor:pointer;margin-bottom:10px}
.pj:hover{border-color:var(--p);box-shadow:0 4px 12px rgba(0,0,0,.06);transform:translateY(-1px)}
.pj-h{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
.pj-n{font-size:16px;font-weight:700}
.pj-meta{font-size:12px;color:var(--t2);margin-top:4px;display:flex;flex-wrap:wrap;gap:12px}
.pj-info{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:12px 0;padding:12px;background:var(--bg);border-radius:10px}
.pj-tag{display:flex;flex-direction:column;gap:2px}
.pj-tag-l{font-size:11px;color:var(--t3)}
.pj-tag-v{font-size:13px;font-weight:500}
.pj-actions{display:flex;gap:6px;margin-top:8px}

/* ── EXPERT DETAIL ── */
.ed{text-align:center;padding:20px 0}
.ed-avatar{font-size:56px;margin-bottom:10px}
.ed-name{font-size:20px;font-weight:700;margin-bottom:6px}
.ed-info{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.ed-item{display:flex;flex-direction:column;gap:3px}
.ed-l{font-size:11px;color:var(--t3)}
.ed-v{font-size:13px;font-weight:500}

/* ── CHART ── */
.mc{display:flex;flex-direction:column;gap:8px}
.cr{display:flex;align-items:center;gap:10px}
.cl{font-size:12px;color:var(--t2);width:90px;flex-shrink:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb{flex:1;background:var(--bg);border-radius:20px;height:7px;overflow:hidden}
.cbar{height:100%;border-radius:20px;background:linear-gradient(90deg,#6366f1,#4f46e5);transition:width 1s cubic-bezier(.16,1,.3,1)}
.cc{font-size:12px;font-weight:600;width:20px;text-align:right}

/* ── PAGINATION ── */
.pag{display:flex;justify-content:center;gap:5px;margin-top:14px}
.pb{width:32px;height:32px;border-radius:7px;border:1.5px solid var(--bd);background:var(--card);cursor:pointer;font-size:12px;color:var(--t2);display:flex;align-items:center;justify-content:center;transition:all .15s}
.pb:hover{border-color:var(--p);color:var(--p)}
.pb.on{background:var(--p);border-color:var(--p);color:#fff}

/* ── TOAST ── */
.tc{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:6px}
.toast{display:flex;align-items:center;gap:8px;padding:11px 16px;border-radius:10px;background:#0f172a;color:#fff;font-size:13px;box-shadow:0 4px 20px rgba(0,0,0,.2);animation:ti .3s ease;min-width:240px}
@keyframes ti{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.toast.suc{background:#065f46}.toast.err{background:#7f1d1d}.toast.warn{background:#92400e}

/* ── CONFIRM ── */
.cf{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(4px);z-index:2000;align-items:center;justify-content:center}
.cf.on{display:flex}
.cb2{background:var(--card);border-radius:16px;padding:28px;max-width:360px;width:90%;box-shadow:0 25px 60px rgba(0,0,0,.2);text-align:center;animation:mi .2s ease;border:1px solid var(--bd)}
.cb2.wide{max-width:560px}
.cbi2{font-size:40px;margin-bottom:10px}
.cbt2{font-size:16px;font-weight:700;margin-bottom:8px;color:var(--t)}
.cbm2{font-size:13px;color:var(--t2);margin-bottom:20px;max-height:70vh;overflow-y:auto;overscroll-behavior:contain;text-align:left}
.cbm2::-webkit-scrollbar{width:5px}
.cbm2::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}
.cbb2{display:flex;gap:8px;justify-content:center}

/* ── EMPTY（升级版） ── */
.es{text-align:center;padding:60px 20px;color:var(--t3)}
.es .em2{font-size:48px;margin-bottom:14px;opacity:.45;filter:grayscale(.3)}
.es p{font-size:13px;margin-bottom:16px;line-height:1.6}
.es .es-action{display:inline-block;padding:8px 18px;background:var(--pl);color:var(--p);border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .2s;border:none}
.es .es-action:hover{background:rgba(37,99,235,.12);transform:translateY(-1px)}

/* ── MISC ── */
.ls{font-size:11px;color:var(--t3);margin-top:3px}
.mt8{margin-top:8px}
.fw600{font-weight:600}
@media(max-width:768px){
  .sb{display:none!important}
  .sb.open{display:flex!important;position:fixed;inset:0;z-index:9999;width:260px;box-shadow:4px 0 30px rgba(0,0,0,.4)}
  .mn{margin-left:0!important;padding:56px 12px 12px}
  .sg{grid-template-columns:1fr!important}
  .fg{grid-template-columns:1fr!important}
  .mob-menu-btn{display:flex!important;position:fixed;top:10px;left:10px;z-index:10000;width:38px;height:38px}
  .c{padding:14px;margin-bottom:12px}
  .ph{flex-direction:column;gap:8px;align-items:flex-start}
  .tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{font-size:12px;min-width:600px}
  table th,table td{padding:8px 6px}
  .notif-panel{right:8px;left:8px;width:auto;max-height:60vh}
  .login-overlay .lb{padding:28px 18px;margin:0 8px}
  .es{padding:30px 12px}
  .es .em2{font-size:32px}
}}