/* ====== 84 校园兼职时薪 · 招工海报（黄）+ 靛蓝 + 票据 ====== */
.cpp{
  --bg:#f5f4ee; --bg2:#eae8de; --card:#fff; --card2:#f8f7f1;
  --ink:#15161c; --sub:#3d3f4a; --faint:#7d7f8b; --line:#dfdcd0; --line2:#eceadf;
  --indigo:#2f3a7a; --indigo-d:#1e2657; --indigo-soft:#e3e6f4;
  --yellow:#eec14b; --yellow-d:#b8862f; --red:#b8463c;
  --shadow-sm:0 1px 2px rgba(21,22,28,.05),0 7px 18px rgba(21,22,28,.05);
  --shadow:0 2px 6px rgba(21,22,28,.07),0 22px 48px rgba(21,22,28,.10);
  --r:20px; --r-sm:13px;
  background:
    radial-gradient(720px 320px at 102% -6%, rgba(238,193,75,.16), transparent 62%),
    radial-gradient(560px 280px at -8% 24%, rgba(47,58,122,.09), transparent 66%),
    var(--bg);
}
:root[data-theme="dark"] .cpp{
  --bg:#0e0f14; --bg2:#14151c; --card:#1a1c24; --card2:#20222b;
  --ink:#ecedf3; --sub:#a9abb8; --faint:#71737f; --line:#2a2c37; --line2:#202129;
  --indigo:#8b97df; --indigo-d:#b3bdf0; --indigo-soft:rgba(139,151,223,.13);
  --yellow:#eec14b; --yellow-d:#e0b45e;
}
.cpp .tsk-h1 b{color:var(--indigo-d);}

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

/* ---- 招工海报 ---- */
.cpp-poster{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px 22px;box-shadow:var(--shadow);
  background-image:repeating-linear-gradient(0deg,rgba(47,58,122,.025) 0 1px,transparent 1px 22px);
}
.cpp-poster::before{
  content:"";position:absolute;inset:0 0 auto 0;height:6px;border-radius:var(--r) var(--r) 0 0;
  background:repeating-linear-gradient(45deg,var(--yellow) 0 12px,#1d1e26 12px 24px);
}
.cpp-poster-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0 12px;border-bottom:1px dashed var(--line);margin-bottom:12px;}
.cpp-poster-head span{font-size:12px;font-weight:800;letter-spacing:.28em;color:var(--indigo-d);}
.cpp-poster-head em{
  font-style:normal;font-size:9px;font-weight:800;letter-spacing:.2em;color:#1d1e26;
  background:var(--yellow);padding:4px 8px;border-radius:4px;
}
.cpp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px;}
.cpp-poster label{display:block;font-size:11.5px;font-weight:700;color:var(--faint);}
.cpp-poster input{
  width:100%;height:36px;margin-top:4px;padding:0 10px;border:1.5px solid var(--line);border-radius:8px;
  background:var(--card2);color:var(--ink);font:700 13.5px/36px var(--num,"Bahnschrift",monospace);outline:none;
}
.cpp-poster input:focus{border-color:var(--indigo);box-shadow:0 0 0 3px var(--indigo-soft);}
.cpp-poster .tsk-btn-main{background:linear-gradient(180deg,#3a4793,var(--indigo-d));border:0;box-shadow:0 10px 22px rgba(47,58,122,.26);}
.cpp-poster-foot{margin-top:10px;font-size:10.5px;color:var(--faint);text-align:center;}

/* ---- 车票 ---- */
.cpp-ticket{
  position:relative;margin-top:14px;display:grid;grid-template-columns:1fr 1fr;
  background:var(--card);border:1.5px dashed var(--indigo);border-radius:14px;
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.cpp-ticket::before,.cpp-ticket::after{
  content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:var(--bg);
  border:1.5px dashed var(--indigo);top:50%;transform:translateY(-50%);
}
.cpp-ticket::before{left:-8px;}
.cpp-ticket::after{right:-8px;}
.cpp-ticket-l,.cpp-ticket-r{padding:13px 16px;text-align:center;}
.cpp-ticket-l{border-right:1.5px dashed var(--indigo);}
.cpp-ticket-l span,.cpp-ticket-r span{display:block;font-size:10px;font-weight:800;letter-spacing:.22em;color:var(--faint);}
.cpp-ticket-l b,.cpp-ticket-r b{display:block;font:800 25px/1.2 var(--num,"Bahnschrift",monospace);color:var(--indigo-d);margin-top:3px;font-variant-numeric:tabular-nums;}
.cpp-ticket-l small,.cpp-ticket-r small{display:block;font-size:10px;color:var(--faint);margin-top:2px;}

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

.cpp-cmp{margin-top:16px;display:grid;gap:8px;}
.cpp-cmp-row{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;}
.cpp-cmp-row span{font-size:11px;font-weight:800;color:var(--faint);letter-spacing:.06em;}
.cpp-cmp-bar{height:14px;border-radius:99px;background:var(--line2);overflow:hidden;}
.cpp-cmp-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#c8c9d4,#9fa2b5);transition:width .45s ease;}
.cpp-cmp-bar.cpp-real i{background:linear-gradient(90deg,var(--indigo),#6b7ce0);}

.cpp-alert{margin-top:14px;padding:12px 15px;border-radius:10px;background:var(--indigo-soft);border:1px solid rgba(47,58,122,.26);font-size:12.5px;line-height:1.8;color:var(--sub);}
.cpp-alert b{color:var(--indigo-d);}
.cpp-alert.is-warn{background:rgba(184,70,60,.09);border-color:rgba(184,70,60,.3);}
.cpp-alert.is-warn b{color:var(--red);}

/* ---- 时薪表 ---- */
.cpp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.cpp-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;}
.cpp-table th,.cpp-table td{padding:12px 15px;text-align:left;font-size:12.5px;line-height:1.7;border-bottom:1px solid var(--line2);}
.cpp-table tr:last-child td{border-bottom:0;}
.cpp-table thead th{background:var(--card2);font-weight:800;color:var(--indigo-d);font-size:12px;}
.cpp-table tbody tr:nth-child(even){background:var(--card2);}
.cpp-table td:first-child{font-weight:800;color:var(--ink);}
.cpp-rate{font:800 13px/1.4 var(--num,"Bahnschrift",monospace);color:var(--yellow-d);white-space:nowrap;}

/* ---- 通勤卡片 ---- */
.cpp-cm{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;}
.cpp-cm-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:15px 17px 15px 42px;box-shadow:var(--shadow-sm);}
.cpp-cm-card::before{
  content:"";position:absolute;left:15px;top:16px;width:14px;height:14px;border-radius:50%;
  background:var(--yellow);border:2px solid #1d1e26;
}
.cpp-cm-card b{font-size:12.5px;font-weight:800;color:var(--indigo-d);}
.cpp-cm-card p{margin:5px 0 0;font-size:12px;line-height:1.75;color:var(--sub);}

/* ---- 学业平衡 ---- */
.cpp-bal{display:grid;gap:9px;}
.cpp-bal-row{display:grid;grid-template-columns:132px 68px 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);}
.cpp-bal-row b{font-size:12.5px;font-weight:800;color:var(--ink);}
.cpp-lv{display:inline-block;text-align:center;font-size:11px;font-weight:800;padding:4px 0;border-radius:99px;letter-spacing:.06em;}
.cpp-lv-1{background:rgba(47,58,122,.1);color:#2f3a7a;}
.cpp-lv-2{background:rgba(238,193,75,.24);color:#8a6414;}
.cpp-lv-3{background:rgba(238,193,75,.34);color:#7a5410;}
.cpp-lv-4{background:rgba(184,70,60,.13);color:#a53f34;}
:root[data-theme="dark"] .cpp-lv-1{color:#a8b4ee;}
:root[data-theme="dark"] .cpp-lv-2{color:#e6c273;}
:root[data-theme="dark"] .cpp-lv-3{color:#efce8c;}
:root[data-theme="dark"] .cpp-lv-4{color:#e39288;}
.cpp-bal-row p{margin:0;font-size:12px;line-height:1.75;color:var(--sub);}

/* ---- 骗局 ---- */
.cpp-scam{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;}
.cpp-scam-item{position:relative;background:var(--card);border:1px solid var(--line);border-top:3px solid var(--red);border-radius:var(--r-sm);padding:14px 17px;box-shadow:var(--shadow-sm);}
.cpp-scam-item b{display:block;font-size:12.5px;font-weight:800;color:var(--red);}
.cpp-scam-item p{margin:5px 0 0;font-size:12px;line-height:1.75;color:var(--sub);}

@media (max-width:900px){
  .cpp-hero{grid-template-columns:1fr;gap:22px;}
  .cpp-bal-row{grid-template-columns:104px 56px 1fr;gap:10px;}
}
@media (max-width:520px){
  .cpp-grid2{grid-template-columns:1fr;}
  .cpp-bal-row{grid-template-columns:1fr;gap:6px;}
  .cpp-lv{width:68px;}
}