.page-period-bonus {
  background:
    radial-gradient(circle at 9% 7%, rgba(157, 123, 90, .12), transparent 30rem),
    linear-gradient(180deg, #fbfaf7 0%, #f4f1ea 100%);
}
.period-bonus-shell { width: min(1180px, 100%); margin: 0 auto; display: grid; gap: 20px; color: #28251f; }
.period-bonus-hero, .period-bonus-card header, .readiness-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.period-bonus-hero { padding: clamp(20px, 4vw, 38px); border: 1px solid #ded7ca; border-radius: 24px; background: rgba(255,255,255,.92); box-shadow: 0 16px 45px rgba(66,52,38,.08); }
.period-bonus-hero h1, .period-bonus-card h2, .readiness-card h2, .period-bonus-calculate h2, .period-bonus-review h2 { margin: 4px 0 8px; line-height: 1.15; }
.period-bonus-hero h1 { font-size: clamp(1.8rem, 4vw, 3.1rem); }
.period-bonus-hero p, .period-bonus-card p, .readiness-card p { margin: 0; max-width: 72ch; color: #665f54; }
.period-bonus-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.period-bonus-actions a, .period-bonus-actions button, .period-bonus-shell button, .period-bonus-shell input, .period-bonus-shell select, .period-bonus-shell textarea, .period-bonus-shell summary { min-height: 44px; }
.period-bonus-banner, .readiness-guard { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid; border-radius: 16px; }
.period-bonus-banner.is-ready, .readiness-card.is-ready { border-color: #9ac2ae; background: #eff8f2; }
.period-bonus-banner.is-blocked, .readiness-card.is-blocked { border-color: #dbb598; background: #fff6ed; }
.period-bonus-banner span, .readiness-guard p { color: #5f584e; }
.period-bonus-filter, .period-bonus-calculate, .period-bonus-form fieldset, .period-bonus-review, .period-bonus-summary, .period-bonus-separation, .period-bonus-snapshots details, .period-bonus-empty, .readiness-guard { border: 1px solid #ded7ca; border-radius: 18px; background: #fff; }
.period-bonus-filter { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; padding: 14px; }
.period-bonus-filter label { min-width: min(220px, 100%); }
.period-bonus-shell label { display: grid; align-content: start; gap: 7px; color: #4b463e; font-weight: 650; }
.period-bonus-shell input, .period-bonus-shell select, .period-bonus-shell textarea { width: 100%; padding: 10px 12px; border: 1px solid #bfb6a7; border-radius: 10px; background: #fff; color: #27231e; font: inherit; }
.period-bonus-shell textarea { min-height: 110px; resize: vertical; }
.period-bonus-card-grid, .readiness-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.period-bonus-card, .readiness-card { min-width: 0; padding: 20px; border: 1px solid #ded7ca; border-radius: 20px; background: rgba(255,255,255,.96); box-shadow: 0 10px 30px rgba(66,52,38,.06); }
.period-bonus-card { display: grid; gap: 16px; }
.period-bonus-card dl, .readiness-card dl, .period-bonus-separation dl, .period-bonus-snapshots dl { display: grid; gap: 0; margin: 0; }
.period-bonus-card dl > div, .readiness-card dl > div, .period-bonus-separation dl > div, .period-bonus-snapshots dl > div { display: grid; grid-template-columns: minmax(120px,.8fr) minmax(0,1.2fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid #ece7df; }
.period-bonus-card dt, .readiness-card dt, .period-bonus-separation dt, .period-bonus-snapshots dt { color: #716a5f; }
.period-bonus-card dd, .readiness-card dd, .period-bonus-separation dd, .period-bonus-snapshots dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.readiness-card dd small { display: block; margin-top: 3px; font-weight: 500; color: #756e63; }
.period-bonus-status { display: inline-flex; align-items: center; width: fit-content; min-height: 30px; padding: 5px 10px; border-radius: 999px; background: #ece8e0; color: #4a453e; font-size: .78rem; font-weight: 800; letter-spacing: .03em; }
.period-bonus-status.is-active, .period-bonus-status.is-approved { background: #dcefe3; color: #21583b; }
.period-bonus-status.is-scheduled, .period-bonus-status.is-pending { background: #fff0c7; color: #735817; }
.period-bonus-status.is-stopped, .period-bonus-status.is-rejected, .period-bonus-status.is-void { background: #f7dfdc; color: #7a3128; }
.period-bonus-separation { padding: 16px; background: #f7f4ee; }
.period-bonus-separation > span, .period-bonus-separation > small, .period-bonus-summary small { display: block; margin-top: 5px; color: #6f685d; }
.period-bonus-separation > strong { display: block; margin-top: 4px; }
.period-bonus-card details { border-top: 1px solid #e5dfd5; }
.period-bonus-card summary, .period-bonus-snapshots summary { cursor: pointer; padding: 10px 0; font-weight: 750; }
.period-bonus-stop { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 10px; }
.period-bonus-form { display: grid; gap: 18px; }
.period-bonus-form fieldset { min-width: 0; margin: 0; padding: 20px; }
.period-bonus-form legend { padding: 0 8px; font-size: 1.1rem; font-weight: 800; }
.period-bonus-help { margin: 0 0 14px; color: #6a6358; }
.period-bonus-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.period-bonus-fields .span-2 { grid-column: span 2; }
[data-period-bonus-form] [hidden] { display: none !important; }
.period-bonus-errors { padding: 16px 18px; border: 1px solid #dca59e; border-radius: 16px; background: #fff0ee; color: #6d2b24; }
.period-bonus-errors ul { margin-bottom: 0; }
.period-bonus-calculate { display: grid; grid-template-columns: minmax(200px,1.3fr) repeat(3,minmax(150px,.8fr)); align-items: end; gap: 12px; padding: 18px; }
.period-bonus-calculate button { grid-column: -2 / -1; }
.period-bonus-calculate button:disabled { opacity: .5; cursor: not-allowed; }
.period-bonus-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid #ded7ca; border-radius: 18px; background: #fff; }
.period-bonus-table { width: 100%; min-width: 900px; border-collapse: collapse; }
.period-bonus-table th, .period-bonus-table td { padding: 14px; border-bottom: 1px solid #ece7df; text-align: left; vertical-align: top; }
.period-bonus-table th { background: #f5f1ea; color: #595248; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.period-bonus-table small { display: block; margin-top: 4px; color: #6d665b; line-height: 1.5; }
.period-bonus-empty { padding: 30px; text-align: center; }
.period-bonus-empty p { margin: 7px 0 0; color: #6d665b; }
.period-bonus-detail-grid { display: grid; grid-template-columns: minmax(260px,.7fr) minmax(0,1.3fr); gap: 16px; }
.period-bonus-summary { display: grid; align-content: start; gap: 8px; padding: 22px; }
.period-bonus-summary > strong { font-size: clamp(2rem,6vw,3.6rem); line-height: 1; }
.period-bonus-summary code { overflow-wrap: anywhere; }
.period-bonus-snapshots { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.period-bonus-snapshots details { min-width: 0; padding: 16px; }
.period-bonus-snapshots pre { max-width: 100%; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.period-bonus-review { display: grid; grid-template-columns: minmax(230px,1fr) repeat(3,minmax(190px,.8fr)); gap: 14px; padding: 20px; }
.period-bonus-review form { display: grid; align-content: end; gap: 10px; }
.readiness-guard { background: #f4f1ea; }
.readiness-guard code { overflow-wrap: anywhere; }
.readiness-card { display: grid; align-content: start; gap: 14px; }
.readiness-blocker, .readiness-next { padding: 12px; border-radius: 12px; background: rgba(255,255,255,.7); }
.readiness-blocker p, .readiness-next p { margin-top: 4px; }
.readiness-generated { color: #6a6358; text-align: right; }
@media (max-width: 960px) {
  .period-bonus-card-grid, .readiness-grid { grid-template-columns: 1fr; }
  .period-bonus-calculate { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .period-bonus-calculate > div { grid-column: span 2; }
  .period-bonus-calculate button { grid-column: auto; }
  .period-bonus-snapshots { grid-template-columns: 1fr; }
  .period-bonus-review { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .period-bonus-review > div { grid-column: span 2; }
}
@media (max-width: 700px) {
  .period-bonus-hero, .period-bonus-detail-grid { display: grid; grid-template-columns: 1fr; }
  .period-bonus-actions { width: 100%; }
  .period-bonus-actions > * { flex: 1 1 160px; text-align: center; }
  .period-bonus-fields, .period-bonus-calculate, .period-bonus-review { grid-template-columns: 1fr; }
  .period-bonus-fields .span-2, .period-bonus-calculate > div, .period-bonus-review > div { grid-column: auto; }
  .period-bonus-stop { grid-template-columns: 1fr; }
  .period-bonus-card dl > div, .readiness-card dl > div, .period-bonus-separation dl > div, .period-bonus-snapshots dl > div { grid-template-columns: 1fr; gap: 3px; }
  .period-bonus-filter { display: grid; grid-template-columns: 1fr; }
  .period-bonus-filter label { min-width: 0; }
  .period-bonus-shell { gap: 14px; }
}