/* ====== 83 勤工俭学时薪 · 学院绿 + 打卡钟 + 米白 ====== */
.wsp{
  --bg:#f2f5f1; --bg2:#e6ece3; --card:#fff; --card2:#f6f9f4;
  --ink:#131a15; --sub:#39463d; --faint:#78867c; --line:#d5e0d3; --line2:#e5ece3;
  --green:#2d6a4f; --green-d:#1c4b37; --green-soft:#dfeee3;
  --sand:#c8b48a; --amber:#b8862f; --red:#b3483c;
  --shadow-sm:0 1px 2px rgba(19,26,21,.05),0 7px 18px rgba(19,26,21,.05);
  --shadow:0 2px 6px rgba(19,26,21,.07),0 22px 48px rgba(19,26,21,.10);
  --r:20px; --r-sm:13px;
  background:
    radial-gradient(760px 340px at 100% -8%, rgba(45,106,79,.10), transparent 62%),
    radial-gradient(520px 260px at -6% 22%, rgba(200,180,138,.14), transparent 65%),
    var(--bg);
}
:root[data-theme="dark"] .wsp{
  --bg:#0c1310; --bg2:#111a15; --card:#16211b; --card2:#1b2821;
  --ink:#e6f1e9; --sub:#a5b8ab; --faint:#6b8074; --line:#27362d; --line2:#1d2a23;
  --green:#6fb894; --green-d:#9dd5b8; --green-soft:rgba(111,184,148,.13);
  --sand:#cbb98f; --amber:#d9a852;
}
.wsp .tsk-h1 b{color:var(--green-d);}

.wsp-hero{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:32px;padding:30px 0 24px;align-items:start;}

/* ---- 打卡钟卡片 ---- */
.wsp-clock{
  position:relative;border-radius:var(--r);padding:20px 22px 22px;color:#e8f2ec;
  background:linear-gradient(158deg,#2c6350,#1a3f30 70%,#143026);
  box-shadow:0 22px 46px rgba(20,63,48,.28);
  overflow:hidden;
}
.wsp-clock::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 26px);
}
.wsp-clock::after{
  content:"";position:absolute;right:-46px;top:-46px;width:150px;height:150px;border-radius:50%;
  border:1px dashed rgba(255,255,255,.16);
}
.wsp-clock-head{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1;}
.wsp-clock-head span{font-size:11.5px;font-weight:800;letter-spacing:.34em;color:#cdE6d6;}
.wsp-clock-head em{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.24em;color:rgba(232,242,236,.5);}

.wsp-clock-face{
  position:relative;z-index:1;margin:14px 0 6px;height:104px;border-radius:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.18));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 2px 12px rgba(0,0,0,.4);
}
.wsp-clock-face::after{
  content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 9px);
  opacity:.5;
}
.wsp-clock-face span{
  font:800 37px/1 var(--num,"Bahnschrift","Dosis",monospace);letter-spacing:.08em;
  color:#8ff0b8;text-shadow:0 0 14px rgba(143,240,184,.55),0 0 34px rgba(143,240,184,.24);
  font-variant-numeric:tabular-nums;
}
.wsp-clock-face small{font-size:9px;font-weight:800;letter-spacing:.3em;color:rgba(143,240,184,.62);}

.wsp-clock label{position:relative;z-index:1;display:block;font-size:11.5px;font-weight:700;color:#a9c6b6;margin-top:11px;}
.wsp-clock select,.wsp-clock input{
  position:relative;z-index:1;width:100%;height:36px;margin-top:4px;padding:0 10px;
  border:1.5px solid rgba(255,255,255,.18);border-radius:9px;
  background:rgba(255,255,255,.07);color:#eaf5ee;
  font:700 13.5px/34px var(--num,"Bahnschrift",monospace);outline:none;
}
.wsp-clock select{font-family:inherit;font-weight:700;}
.wsp-clock select option{color:#1c3b2c;background:#f4faf6;}
.wsp-clock input:focus,.wsp-clock select:focus{border-color:#7fd3a2;box-shadow:0 0 0 3px rgba(127,211,162,.22);}
.wsp-grid2{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;}
.wsp-clock .tsk-btn-main{
  position:relative;z-index:1;background:linear-gradient(180deg,#79d6a4,#3f9d72);
  color:#0d2a1d;border:0;font-weight:800;box-shadow:0 10px 22px rgba(63,157,114,.32);
}
.wsp-clock .tsk-btn-main:hover{filter:brightness(1.04);}
.wsp-clock-foot{position:relative;z-index:1;margin-top:10px;font-size:10.5px;color:rgba(200,224,210,.66);text-align:center;}

/* ---- 结果区 ---- */
.wsp-result{margin-top:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 24px;}
.wsp-res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(154px,1fr));gap:11px;}
.wsp-res-card{background:var(--card2);border:1px solid var(--line2);border-radius:var(--r-sm);padding:15px 17px;}
.wsp-res-card b{display:block;font:800 24px/1.15 var(--num,"Bahnschrift",monospace);color:var(--ink);font-variant-numeric:tabular-nums;}
.wsp-res-card span{display:block;font-size:11.5px;color:var(--faint);font-weight:700;margin-top:5px;}
.wsp-res-card i{display:block;font-style:normal;font-size:10.5px;color:var(--sub);margin-top:4px;line-height:1.5;}
.wsp-res-card.wsp-main{background:var(--green-soft);border-color:rgba(45,106,79,.32);}
.wsp-res-card.wsp-main b{color:var(--green-d);}

.wsp-alert{margin-top:14px;padding:12px 15px;border-radius:10px;background:var(--green-soft);border:1px solid rgba(45,106,79,.28);font-size:12.5px;line-height:1.8;color:var(--sub);}
.wsp-alert b{color:var(--green-d);}
.wsp-alert.is-warn{background:rgba(179,72,60,.09);border-color:rgba(179,72,60,.3);}
.wsp-alert.is-warn b{color:var(--red);}

.wsp-seg{margin-top:16px;}
.wsp-seg-bar{height:14px;border-radius:99px;background:var(--line2);overflow:hidden;}
.wsp-seg-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--green),#79c89a);transition:width .45s ease;}
.wsp-seg-bar.is-over i{background:linear-gradient(90deg,#c1862c,var(--red));}
.wsp-seg-scale{display:flex;justify-content:space-between;margin-top:7px;font-size:10.5px;color:var(--faint);font-weight:700;}

/* ---- 岗位表 ---- */
.wsp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.wsp-table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--shadow-sm);min-width:560px;}
.wsp-table th,.wsp-table td{padding:12px 15px;text-align:left;font-size:12.5px;line-height:1.7;border-bottom:1px solid var(--line2);}
.wsp-table tr:last-child td{border-bottom:0;}
.wsp-table thead th{background:var(--card2);font-weight:800;color:var(--green-d);font-size:12px;letter-spacing:.02em;}
.wsp-table tbody tr:nth-child(even){background:var(--card2);}
.wsp-table td:first-child{font-weight:800;color:var(--ink);}
.wsp-rate{font:800 13px/1.4 var(--num,"Bahnschrift",monospace);color:var(--amber);white-space:nowrap;}

/* ---- 学业占用 ---- */
.wsp-acad{display:grid;gap:9px;}
.wsp-a-row{display:grid;grid-template-columns:132px 76px 1fr;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 18px;box-shadow:var(--shadow-sm);}
.wsp-a-row b{font-size:12.5px;font-weight:800;color:var(--ink);}
.wsp-a-lv{display:inline-block;text-align:center;font-size:11px;font-weight:800;padding:4px 0;border-radius:99px;letter-spacing:.06em;}
.wsp-lv-1{background:rgba(45,106,79,.12);color:#2d6a4f;}
.wsp-lv-2{background:rgba(184,134,47,.14);color:#a2761f;}
.wsp-lv-3{background:rgba(184,134,47,.2);color:#8f6514;}
.wsp-lv-4{background:rgba(179,72,60,.13);color:#a53f34;}
:root[data-theme="dark"] .wsp-lv-1{color:#8fd6b0;}
:root[data-theme="dark"] .wsp-lv-2{color:#e0b264;}
:root[data-theme="dark"] .wsp-lv-3{color:#ecc27c;}
:root[data-theme="dark"] .wsp-lv-4{color:#e39288;}
.wsp-a-row p{margin:0;font-size:12px;line-height:1.75;color:var(--sub);}

/* ---- 规则 ---- */
.wsp-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;}
.wsp-rule{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--green);border-radius:var(--r-sm);padding:14px 17px;box-shadow:var(--shadow-sm);}
.wsp-rule b{font-size:12.5px;font-weight:800;color:var(--green-d);}
.wsp-rule p{margin:5px 0 0;font-size:12px;line-height:1.75;color:var(--sub);}

/* ---- 防骗 ---- */
.wsp-scam{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.wsp-scam li{position:relative;padding:13px 16px 13px 44px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);font-size:12.5px;line-height:1.75;color:var(--sub);box-shadow:var(--shadow-sm);}
.wsp-scam li::before{content:"✕";position:absolute;left:14px;top:12px;width:20px;height:20px;border-radius:50%;background:rgba(179,72,60,.12);color:var(--red);font-size:12px;font-weight:800;line-height:20px;text-align:center;}

@media (max-width:900px){
  .wsp-hero{grid-template-columns:1fr;gap:22px;}
  .wsp-a-row{grid-template-columns:104px 60px 1fr;gap:10px;}
}
@media (max-width:520px){
  .wsp-a-row{grid-template-columns:1fr;gap:6px;}
  .wsp-a-lv{width:76px;}
}