/* ============================================================
   工资条 Payslip
   ============================================================ */

.slip-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0 14px;
}
.slip-head .icon-btn[disabled] { opacity: .35; pointer-events: none; }
.slip-month { flex: 1; min-width: 0; text-align: center; }
.slip-month-title {
  font-size: 19px; font-weight: 750; letter-spacing: -.02em;
  display: inline-flex; align-items: center; gap: 7px;
}
.slip-month-title .tag { height: 19px; font-size: 10px; }
.slip-month-sub {
  font-size: 10px; color: var(--text-3); margin-top: 3px;
  font-family: var(--font-num); letter-spacing: .02em;
}

/* ----- hero ----- */
.slip-hero {
  position: relative; overflow: hidden;
  border-radius: 22px;
  padding: 17px 18px 16px;
  color: #fff;
  background: linear-gradient(135deg, #0b2a5b 0%, #1258ba 55%, #1677ff 100%);
  box-shadow: 0 20px 40px -22px rgba(11, 42, 91, .8);
}
.slip-hero::before {
  content: ""; position: absolute; width: 230px; height: 230px; border-radius: 50%;
  top: -120px; right: -80px;
  background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 65%);
}
.slip-hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: radial-gradient(circle at 88% 4%, #000, transparent 62%);
  pointer-events: none;
}
.slip-hero-top { position: relative; display: flex; align-items: center; justify-content: space-between; z-index: 1; }
.slip-hero-label { font-size: 12px; opacity: .78; letter-spacing: .06em; }
.slip-eye {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .16);
  display: grid; place-items: center; color: #fff;
}
.slip-eye .icon { width: 15px; height: 15px; }
.slip-net {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start; gap: 3px;
  margin-top: 6px;
  font-family: var(--font-num); font-weight: 750;
  font-size: 40px; letter-spacing: -.035em; line-height: 1.12;
  text-shadow: 0 2px 16px rgba(0, 20, 60, .22);
  cursor: pointer;
}
.slip-net .slip-yen { font-size: 19px; font-weight: 650; opacity: .8; margin-top: 5px; }
.slip-hero-meta {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 9px; font-size: 10.5px; opacity: .74;
}
.slip-hero-meta span { display: inline-flex; align-items: center; gap: 4px; }
.slip-hero-meta .icon { width: 12px; height: 12px; }
.slip-hero-link {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; height: 38px; margin-top: 14px; padding: 0 12px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff; font-size: 12px; font-weight: 550;
}
.slip-hero-link .icon { width: 14px; height: 14px; opacity: .7; }
.slip-hero-link:active { background: rgba(255, 255, 255, .18); }

/* ----- kpis ----- */
.slip-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 12px; padding: 13px 6px;
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-l); box-shadow: var(--shadow-card);
}
.slip-kpi { text-align: center; position: relative; display: flex; flex-direction: column; gap: 3px; }
.slip-kpi + .slip-kpi::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px;
  width: 1px; background: var(--line-2);
}
.slip-kpi span { font-size: 10px; color: var(--text-3); }
.slip-kpi b {
  font-family: var(--font-num); font-size: 13.5px; font-weight: 700;
  letter-spacing: -.01em; color: var(--text-1);
}
.is-deduct { color: var(--danger) !important; }
.is-plus { color: var(--success-deep) !important; }

/* ----- cards / rows ----- */
.slip-card { margin-top: 12px; padding: 15px 16px; }
.slip-card .card-head { margin-bottom: 4px; }
.slip-card-sum { font-size: 12px; font-weight: 650; color: var(--text-2); font-family: var(--font-num); }
.slip-rows { display: flex; flex-direction: column; }
.slip-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 0; border-top: 1px solid var(--line-2);
}
.slip-row:first-child { border-top: 0; }
.slip-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.slip-row-label { font-size: 13px; color: var(--text-2); }
.slip-row-note { font-size: 9.5px; color: var(--text-4); font-family: var(--font-num); }
.slip-row-type {
  font-size: 9px; color: var(--text-4);
  padding: 1px 4px; border-radius: 4px; background: var(--bg-2);
  flex: none;
}
.slip-row-amount { font-family: var(--font-num); font-size: 13px; font-weight: 650; letter-spacing: -.01em; flex: none; }

/* ----- attendance link ----- */
.slip-att { margin-top: 12px; padding: 15px 16px 13px; }
.slip-att-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 6px; }
.slip-att-item {
  text-align: center; position: relative;
  display: flex; flex-direction: column; gap: 2px; padding: 6px 0;
}
.slip-att-item + .slip-att-item::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 1px; background: var(--line-2);
}
.slip-att-item span { font-size: 10px; color: var(--text-3); }
.slip-att-item b { font-size: 17px; font-weight: 700; line-height: 1.2; }
.slip-att-item b small { font-size: 9.5px; font-weight: 600; color: var(--text-3); margin-left: 1px; }
.slip-att-item em { font-style: normal; font-size: 10px; font-weight: 600; font-family: var(--font-num); }
.slip-att-foot {
  display: flex; align-items: center; gap: 7px;
  margin-top: 9px; padding-top: 10px; border-top: 1px solid var(--line-2);
  font-size: 10.5px; color: var(--text-3); line-height: 1.5;
}

/* ----- history ----- */
.slip-history { padding-bottom: 8px; }
.slip-hist {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 8px; margin: 1px -8px;
  border-radius: 11px; text-align: left;
  transition: background var(--dur-1);
}
.slip-hist:active { background: var(--card-2); }
.slip-hist.is-active { background: var(--brand-50); }
body.theme-dark .slip-hist.is-active { background: var(--brand-100); }
.slip-hist-month {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  background: var(--bg-2); color: var(--text-2);
  font-family: var(--font-num); font-size: 12px; font-weight: 700;
}
.slip-hist.is-active .slip-hist-month { background: var(--brand); color: #fff; }
.slip-hist-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.slip-hist-meta span:first-child { font-size: 11px; color: var(--text-2); font-weight: 550; }
.slip-hist-meta span:last-child { font-size: 9.5px; color: var(--text-4); }
.slip-hist-net { font-family: var(--font-num); font-size: 13px; font-weight: 700; color: var(--text-1); flex: none; }
.slip-hist .cell-chevron { width: 14px; height: 14px; }

/* ----- notice / download / foot ----- */
.slip-notice { margin-top: 14px; font-size: 10.5px; line-height: 1.6; }
.slip-download { margin-top: 16px; height: 46px; }
.slip-foot {
  text-align: center; font-size: 10px; color: var(--text-4);
  padding: 16px 0 2px; letter-spacing: .02em;
}

/* ----- loan deduction ----- */
.slip-loan-link {
  display: flex; align-items: center; gap: 9px;
  width: 100%; margin-top: 12px; padding: 11px 13px;
  border-radius: 13px; text-align: left;
  background: var(--warning-soft);
  border: 1px solid transparent;
}
.slip-loan-ico {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: rgba(255, 125, 0, .14); color: var(--warning-deep);
}
.slip-loan-ico .icon { width: 15px; height: 15px; }
.slip-loan-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.slip-loan-main b { font-size: 12px; font-weight: 650; color: var(--text-1); }
.slip-loan-main em { font-style: normal; font-size: 9.5px; color: var(--text-3); }
.slip-loan-amount { font-family: var(--font-num); font-size: 13px; font-weight: 700; color: var(--warning-deep); flex: none; }
.slip-loan-link > .icon { width: 14px; height: 14px; color: var(--text-4); flex: none; }
body.theme-dark .slip-loan-ico { background: rgba(255, 125, 0, .18); }

/* ----- monthly living allowance ----- */
.slip-hero-note {
  position: relative; z-index: 1;
  margin-top: 6px;
  font-size: 10px; color: rgba(255, 255, 255, .68);
  letter-spacing: .01em;
}
.slip-hero-pay {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .78);
}
.slip-hero-pay > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.slip-hero-pay span { font-size: 9.5px; color: rgba(255, 255, 255, .66); }
.slip-hero-pay b { font-family: var(--font-num); font-size: 15px; font-weight: 700; color: #fff; white-space: nowrap; }
.slip-hero-att {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px;
  margin-top: 9px;
  font-size: 10px; color: rgba(255, 255, 255, .62);
}
.slip-hero-att b { font-family: var(--font-num); font-size: 12px; font-weight: 650; color: #fff; }
.slip-hero-att-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, .4); }

/* ----- year-end settlement ----- */
.slip-year { margin-top: 12px; padding: 16px; }
.slip-year .card-head { margin-bottom: 12px; }
.slip-year-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.slip-year-grid > div {
  padding: 9px 8px; border-radius: 10px;
  background: var(--bg-2);
  display: flex; flex-direction: column; gap: 3px;
}
.slip-year-grid span { font-size: 9.5px; color: var(--text-3); }
.slip-year-grid b { font-family: var(--font-num); font-size: 12px; font-weight: 650; color: var(--text-1); }
.slip-year-grid b.is-deduct { color: var(--warning-deep); }
.slip-year-total {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--line-2);
}
.slip-year-total span { font-size: 11px; color: var(--text-2); }
.slip-year-total b { font-family: var(--font-num); font-size: 20px; font-weight: 750; color: var(--brand-600); }
.slip-year-note {
  margin-top: 8px; font-size: 9.5px; line-height: 1.6;
  color: var(--text-3);
}

/* ----- payday countdown ----- */
.slip-payline {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px; padding: 13px 16px 12px;
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-l); box-shadow: var(--shadow-card);
}
.slip-payline-main { flex: 1; min-width: 0; }
.slip-payline-label { font-size: 10px; color: var(--text-3); letter-spacing: .04em; }
.slip-payline-num { display: flex; align-items: baseline; gap: 2px; margin-top: 1px; }
.slip-payline-num b {
  font-family: var(--font-num); font-size: 28px; font-weight: 750;
  letter-spacing: -.03em; line-height: 1.1; color: var(--brand-600);
}
.slip-payline-num span { font-size: 11px; color: var(--text-3); margin-left: 1px; }
.slip-payline-num em {
  font-style: normal; font-size: 9.5px; color: var(--text-4);
  margin-left: 8px; font-family: var(--font-num);
}
.slip-payline.is-paid .slip-payline-num b { font-size: 20px; color: var(--success-deep); }
.slip-payline.is-paid .slip-payline-num em { margin-left: 6px; }
.slip-payline-bar { height: 3px; margin-top: 8px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.slip-payline-bar i {
  display: block; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), #6cb2ff);
  transition: width .5s var(--ease-out);
}
.slip-payline.is-paid .slip-payline-bar i { background: var(--success); }
.slip-payline-bank {
  flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  font-size: 9.5px; color: var(--text-4);
}
.slip-payline-bank span { display: inline-flex; align-items: center; gap: 3px; }
.slip-payline-bank .icon { width: 11px; height: 11px; }
.slip-payline-bank b { font-size: 10.5px; color: var(--success-deep); font-weight: 650; }

/* ----- payslip status steps ----- */
.slip-steps {
  display: flex; align-items: flex-start;
  margin-top: 12px; padding: 14px 12px 12px;
}
.slip-step {
  width: 64px; flex: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
}
.slip-step-dot {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-2); color: var(--text-4);
  border: 1px solid var(--line);
}
.slip-step-dot .icon { width: 12px; height: 12px; }
.slip-step > div { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.slip-step.is-done .slip-step-dot { background: var(--brand); border-color: transparent; color: #fff; }
.slip-step.is-active .slip-step-dot {
  background: var(--brand-50); border-color: var(--brand); color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-50);
}
body.theme-dark .slip-step.is-active .slip-step-dot { background: var(--brand-100); box-shadow: 0 0 0 4px rgba(22,119,255,.12); }
.slip-step b { font-size: 11px; font-weight: 550; color: var(--text-2); }
.slip-step.is-active b { color: var(--brand); font-weight: 650; }
.slip-step em { font-style: normal; font-size: 9px; color: var(--text-4); font-family: var(--font-num); }
.slip-step-line { flex: 1; height: 1px; background: var(--line); margin-top: 12px; }
.slip-step-line.is-done { background: var(--brand-200); }

/* ----- masked amounts ----- */
.slip-page.is-masked .money {
  filter: blur(7px);
  transition: filter var(--dur-2);
  user-select: none;
}

/* ----- detail sheet ----- */
.slip-detail-net {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px; border-radius: 14px;
  background: var(--brand-50); border: 1px solid var(--brand-100);
  margin-bottom: 12px;
}
body.theme-dark .slip-detail-net { background: var(--brand-100); border-color: transparent; }
.slip-detail-net span { font-size: 11px; color: var(--text-3); }
.slip-detail-net b { font-family: var(--font-num); font-size: 26px; font-weight: 750; letter-spacing: -.02em; color: var(--brand-600); }
.slip-detail-net em { font-style: normal; font-size: 10px; color: var(--text-3); }
.slip-detail-sec {
  font-size: 11px; font-weight: 650; color: var(--text-3);
  padding: 10px 2px 6px;
}
.slip-detail-list { display: flex; flex-direction: column; }
.slip-detail-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 8px 2px; border-top: 1px solid var(--line-2);
  font-size: 12px; color: var(--text-2);
}
.slip-detail-row:first-child { border-top: 0; }
.slip-detail-row span { display: flex; flex-direction: column; gap: 1px; }
.slip-detail-row em { font-style: normal; font-size: 9.5px; color: var(--text-4); font-family: var(--font-num); }
.slip-detail-row b { font-family: var(--font-num); font-size: 12.5px; font-weight: 650; color: var(--text-1); flex: none; }
.slip-detail-total {
  display: flex; justify-content: space-between;
  margin-top: 6px; padding: 10px 2px 2px;
  border-top: 1px dashed var(--line);
  font-size: 12.5px; font-weight: 650; color: var(--text-1);
}
.slip-detail-total b { font-family: var(--font-num); }
.slip-formula { margin-top: 14px; padding: 12px; border-radius: 12px; background: var(--card-2); }
.slip-formula-line { font-size: 11.5px; color: var(--text-2); line-height: 1.6; font-family: var(--font-num); }
.slip-formula-line b { color: var(--brand); }
.slip-formula p { margin-top: 6px; font-size: 10px; color: var(--text-3); line-height: 1.65; }