/* 初中英语教师工作台 v2 —— 可爱风格 */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --pk:#f56ea8; --pk-d:#e14d91; --pk-l:#ffe3ef; --pl:#a78bfa; --pl-l:#f0e9ff;
  --bg:#fdf1f6; --card:#fff; --tx:#4a3a4e; --tx2:#9b8aa0; --ok:#4cbf7f; --bad:#ff7d7d;
  --line:#f6dce8;
}
html,body{min-height:100%}
body{font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;background:linear-gradient(160deg,#fdf1f6,#f3efff 55%,#eef7ff);color:var(--tx);font-size:14px}
button{font-family:inherit}
.hidden{display:none!important}

/* 顶栏 */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;padding:10px 18px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.brand-ic{font-size:26px;background:var(--pk-l);width:44px;height:44px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center}
.brand-title{font-size:17px;font-weight:800;color:var(--pk-d)}
.brand-sub{font-size:11px;color:var(--tx2)}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{border:none;background:#fff;border:1.5px solid var(--line);color:var(--tx);padding:8px 14px;border-radius:999px;cursor:pointer;font-size:13px;transition:.15s}
.tab:hover{border-color:var(--pk)}
.tab.on{background:var(--pk);border-color:var(--pk);color:#fff;box-shadow:0 4px 10px rgba(245,110,168,.35)}
.top-right{margin-left:auto}
.save-dot{font-size:12px;color:var(--tx2);background:#f6f7fb;padding:5px 10px;border-radius:999px}

main{padding:16px;max-width:1500px;margin:0 auto}
.page{display:none}
.page.on{display:block;animation:pop .2s ease}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* 面板 */
.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:0 6px 18px rgba(180,90,150,.08)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:800;font-size:15px;color:var(--pk-d);margin-bottom:10px}
.mini-btn{border:1px solid var(--line);background:#fff;color:var(--tx2);border-radius:8px;padding:4px 9px;font-size:12px;cursor:pointer}
.mini-btn:hover{border-color:var(--pk);color:var(--pk-d)}
.mini-select{border:1px solid var(--line);border-radius:8px;padding:4px 8px;font-size:12.5px;color:var(--tx);background:#fff}
.hint{font-size:11.5px;color:var(--tx2);margin-top:8px;line-height:1.6}
input,select{font-family:inherit}

/* ① 听力 & 作业 */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}
.unit-list{display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 210px);overflow:auto;padding-right:4px}
.unit-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.unit-head{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;background:linear-gradient(90deg,#fff,var(--pk-l))}
.unit-head .u-num{width:34px;height:34px;border-radius:10px;background:var(--pk);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex:0 0 auto}
.unit-head .u-tt{flex:1;font-weight:700;font-size:13.5px}
.unit-head .arrow{color:var(--tx2);transition:.2s}
.unit-card.open .arrow{transform:rotate(90deg)}
.unit-body{display:none;padding:10px 12px;border-top:1px dashed var(--line)}
.unit-card.open .unit-body{display:block}
.unit-body iframe{width:100%;height:420px;border:1px solid var(--line);border-radius:12px;background:#fff}
.unit-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.unit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.unit-link-card{display:flex;align-items:center;gap:10px;border:1px solid #f3d9e6;border-radius:14px;padding:10px 12px;background:linear-gradient(90deg,#fff,#fff8fc)}
.unit-link-card .u-num{width:38px;height:38px;border-radius:12px;background:var(--pk);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex:0 0 auto}
.unit-link-card .u-info{flex:1;min-width:0}
.unit-link-card .u-tt{font-weight:700;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.unit-link-card .u-sub{font-size:11px;color:#9b8aa0;margin-top:2px}
.unit-link-card .u-play{flex:0 0 auto;text-decoration:none;padding:8px 14px}
@media (max-width:900px){ .unit-grid{grid-template-columns:1fr} }
.vid-bak{margin-bottom:10px}
.vid-bak iframe{width:100%;height:300px;border:none;border-radius:12px}

.hw-toolbar{display:flex;gap:8px;margin-bottom:10px}
.hw-toolbar input{flex:1;border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13px;outline:none}
.hw-toolbar input:focus{border-color:var(--pk)}
.pk-btn{border:none;border-radius:10px;padding:8px 14px;font-size:13px;cursor:pointer;font-weight:700}
.pk-btn.sm{padding:8px 12px}
.pk-btn.main{background:var(--pk);color:#fff;box-shadow:0 4px 10px rgba(245,110,168,.3)}
.pk-btn.soft{background:#f4f1fb;color:var(--pl)}
.pk-btn.gray{background:#f6f7fb;color:var(--tx2)}
.pk-btn.bad{background:#ffe9e9;color:var(--bad)}
.pk-btn.ok{background:#e7f8ee;color:var(--ok)}
.pk-btn.gold{background:#fff4dd;color:#d9a441}
.hw-list{display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 320px);overflow:auto}
.hw-card{border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:#fff}
.hw-card-head{display:flex;align-items:center;gap:8px}
.hw-card-head b{flex:1;font-size:13px}
.hw-date{font-size:11px;color:var(--tx2)}
.hw-stu{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.hw-chip{border-radius:999px;padding:4px 10px;font-size:12px;background:#f6f7fb;color:var(--tx);border:1px solid var(--line);cursor:pointer}
.hw-chip.off{background:#ffe9e9;color:var(--bad);border-color:#ffcfcf}
.hw-chip.paid{background:#e8f1fd;color:#3a70c9;border-color:#c9dcf9;text-decoration:line-through}

/* 积分系统 */
.pts-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.pts-head{display:flex;align-items:center;gap:10px}
.pts-head .em{font-size:22px}
.pts-head b{font-size:17px;color:var(--pk-d)}
.pts-wrap{display:grid;grid-template-columns:1fr 300px;gap:14px;align-items:start}
.stu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.stu-card{border:1.5px solid var(--line);border-radius:16px;padding:12px;background:linear-gradient(180deg,#fff,#fff8fc);position:relative;text-align:center}
.stu-card .ava{width:52px;height:52px;margin:0 auto;border-radius:50%;background:var(--pk-l);display:flex;align-items:center;justify-content:center;font-size:26px}
.stu-card .nm{font-weight:800;font-size:14px;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stu-card .no{font-size:10.5px;color:var(--tx2)}
.stu-card .score-row{display:flex;justify-content:space-between;margin-top:8px;font-size:12px}
.stu-card .score-row b{font-size:15px}
.stu-card .p-pts{color:var(--ok)}
.stu-card .p-coins{color:#e8a13e}
.stu-card .ops{display:flex;justify-content:center;gap:6px;margin-top:10px}
.cute-btn{width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;font-size:14px;display:inline-flex;align-items:center;justify-content:center;transition:.12s}
.cute-btn.plus{background:#e7f8ee;color:var(--ok)}
.cute-btn.minus{background:#ffe9e9;color:var(--bad)}
.cute-btn.cart{background:#fff4dd;color:#d9a441}
.cute-btn.swap{background:#f0e9ff;color:var(--pl)}
.cute-btn:hover{transform:scale(1.12)}
.card-tools{position:absolute;top:8px;right:8px;display:flex;gap:4px}
.tool-btn{border:1px solid var(--line);background:#fff;border-radius:8px;width:28px;height:25px;cursor:pointer;font-size:12.5px;box-shadow:0 1px 3px rgba(0,0,0,.06);display:inline-flex;align-items:center;justify-content:center;transition:.12s}
.tool-btn:hover{transform:scale(1.1)}
.tool-btn.ed{color:#3a70c9;border-color:#c9dcf9;background:#f3f8ff}
.tool-btn.del{color:#ff7d7d;border-color:#ffcfcf;background:#fff5f5}

/* 排行榜侧栏 */
.rank-box{border:1.5px solid var(--line);border-radius:16px;background:#fff;padding:12px;position:sticky;top:80px}
.rank-box .tt{font-weight:800;color:var(--pk-d);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.rank-list{display:flex;flex-direction:column;gap:4px;max-height:calc(100vh - 260px);overflow:auto}
.rank-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;font-size:12.5px}
.rank-item:nth-child(1){background:linear-gradient(90deg,#fff4dd,#fff)}
.rank-item:nth-child(2){background:linear-gradient(90deg,#f0effc,#fff)}
.rank-item:nth-child(3){background:linear-gradient(90deg,#fde8e2,#fff)}
.rank-item .r-idx{width:22px;text-align:center;font-weight:800;color:var(--tx2)}
.rank-item:nth-child(1) .r-idx{color:#e8a13e}
.rank-item:nth-child(2) .r-idx{color:#9a8fd0}
.rank-item:nth-child(3) .r-idx{color:#e08a62}
.rank-item .r-nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-item .r-pts{font-weight:800;color:var(--ok)}

/* 弹窗 */
.overlay{position:fixed;inset:0;background:rgba(60,40,70,.35);z-index:100;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:#fff;border-radius:18px;width:520px;max-width:96vw;max-height:92vh;overflow:auto;padding:18px}
.modal.wide{width:720px}
.modal-head{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:15px;color:var(--pk-d);margin-bottom:12px}
.x-close{cursor:pointer;color:var(--tx2);font-size:16px;padding:4px}
.m-row{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;align-items:center}
.m-row input,.m-row select{border:1.5px solid var(--line);border-radius:10px;padding:8px 10px;font-size:13px;outline:none;min-width:0}
.m-row input:focus,.m-row select:focus{border-color:var(--pk)}
.m-row .grow{flex:1}
.m-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.m-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.prize-card{border:1.5px solid var(--line);border-radius:12px;padding:10px;text-align:center;background:#fffafd;position:relative}
.prize-card .p-em{font-size:24px}
.prize-card .p-nm{font-size:12.5px;font-weight:700;margin-top:4px}
.prize-card .p-price{font-size:12px;color:#e8a13e}
.prize-card .p-op{display:flex;gap:6px;justify-content:center;margin-top:6px}
.cute-btn.tiny{width:24px;height:24px;font-size:11px}
.log-line{font-size:12.5px;padding:7px 4px;border-bottom:1px dashed var(--line);display:flex;gap:8px;align-items:center}
.log-line b{color:var(--ok)}
.log-line b.mi{color:var(--bad)}
/* 随机点名 */
.roll-box{text-align:center;padding:10px}
.roll-ava{font-size:64px;margin-bottom:8px}
.roll-name{font-size:26px;font-weight:800;color:var(--pk-d);min-height:40px}
.roll-wrap{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-height:300px;overflow:auto;margin-top:10px}
.roll-chip{padding:6px 12px;border-radius:999px;background:var(--pl-l);color:var(--pl);font-size:13px}
.roll-chip.hit{background:var(--pk);color:#fff}
/* 成绩 */
.exam-side{display:flex;flex-direction:column;gap:8px;min-width:170px}
.exam-item{border:1.5px solid var(--line);border-radius:12px;padding:9px 11px;cursor:pointer;background:#fff;font-size:13px}
.exam-item.on{border-color:var(--pk);background:var(--pk-l)}
.exam-item .e-nm{font-weight:700}
.exam-item .e-dt{font-size:11px;color:var(--tx2)}
.score-layout{display:grid;grid-template-columns:180px 1fr;gap:14px}
.score-table-wrap{overflow:auto;max-height:calc(100vh - 240px);border-radius:12px;border:1px solid var(--line)}
table.score{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
.score th{background:var(--pk-l);color:var(--pk-d);padding:8px 10px;position:sticky;top:0;font-weight:700}
.score td{border-bottom:1px solid #fdf0f6;padding:7px 10px;text-align:center}
.score td input{width:64px;border:1px solid #f3d9e6;border-radius:8px;padding:5px 6px;text-align:center;font-size:13px;background:#fffafd;outline:none}
.score td input::-webkit-outer-spin-button,.score td input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.score td input[type=number]{-moz-appearance:textfield}
.pk-btn.gray.on{background:#e8eefc;color:#3a70c9;border:1px solid #c9dcf9}
.score td input:focus{border-color:var(--pk)}
.rank-badge{font-weight:800;color:var(--pk-d)}
.td-total{font-weight:800;color:var(--ok)}
.td-avg{color:var(--tx2)}
.sel-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.stat-card{border-radius:14px;padding:12px 14px;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.stat-card .k{font-size:12px;opacity:.95}
.stat-card .v{font-size:22px;font-weight:800;margin-top:2px}
.sc-pk{background:linear-gradient(135deg,#f56ea8,#f9a8c8)}
.sc-pl{background:linear-gradient(135deg,#a78bfa,#c4b0fb)}
.sc-ok{background:linear-gradient(135deg,#4cbf7f,#8fdcb4)}
.sc-go{background:linear-gradient(135deg,#e8a13e,#f4c98b)}
/* toast */
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);background:rgba(60,40,70,.9);color:#fff;padding:10px 20px;border-radius:999px;font-size:13px;opacity:0;transition:.25s;z-index:200;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%)}
@media (max-width: 900px){
  .topbar{position:static;gap:8px;padding:10px}
  .tabs{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .split{grid-template-columns:1fr}
  .pts-wrap{grid-template-columns:1fr}
  .rank-box{position:static;order:-1}
  .score-layout{grid-template-columns:1fr}
  .exam-side{flex-direction:row;overflow-x:auto;min-width:0}
  .stat-strip{grid-template-columns:1fr 1fr}
  .unit-body iframe{height:340px}
}

.tt-edit{font-size:11px;color:#f0b8c9;margin-left:5px;cursor:pointer;opacity:.75}
.tt-edit:hover{opacity:1;color:var(--pk-d)}