.coupon-grant-page { display: grid; gap: 16px; }
.coupon-grant-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.coupon-grant-stats > div { display: grid; min-height: 108px; align-content: center; gap: 5px; padding: 15px; border: 1px solid #e5ded2; border-radius: 13px; background: rgba(255, 253, 248, .92); box-shadow: 0 8px 22px rgba(74, 59, 35, .035); }
.coupon-grant-stats span, .coupon-grant-stats small { color: #898d80; font-size: 11px; }
.coupon-grant-stats strong { color: #405b37; font: 600 26px/1.1 "Noto Serif SC", serif; }
.coupon-grant-table { min-width: 1080px; }
.coupon-grant-table td:first-child { min-width: 180px; }
.coupon-grant-table td:first-child strong, .coupon-grant-table td:first-child small { display: block; }
.coupon-grant-kind { display: inline-block; margin: 4px 0; padding: 2px 7px; border-radius: 99px; background: #f4ead7; color: #9d6b2f; font-size: 10px; font-style: normal; }
.coupon-grant-editor { max-width: 1040px; margin: 0 auto; }
.coupon-grant-editor form { display: grid; gap: 18px; }
.coupon-grant-form-section { display: grid; gap: 14px; padding: 20px; border: 1px solid #e8e1d5; border-radius: 14px; background: #fbf9f3; }
.coupon-grant-form-section > header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 11px; border-bottom: 1px solid #ebe4d9; }
.coupon-grant-form-section > header b { color: #3d5437; font: 600 17px/1.3 "Noto Serif SC", serif; }
.coupon-grant-form-section > header small { color: #8b9084; }
.coupon-grant-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.coupon-grant-form-grid .wide { grid-column: 1 / -1; }
.coupon-grant-form-grid label, .coupon-grant-form-section > label { color: #566051; font-size: 12px; }
.coupon-grant-check { display: flex !important; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 40px; padding-top: 23px; }
.coupon-grant-check input { width: 17px; height: 17px; accent-color: #617c50; }
.coupon-grant-rule-summary { margin: 0; padding: 11px 13px; border-left: 3px solid #7f9c69; border-radius: 6px; background: #edf5e8; color: #405c38; font-size: 12px; font-weight: 700; }
.coupon-grant-audience-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.coupon-grant-audience-tabs label { display: flex; align-items: center; justify-content: center; min-height: 52px; border: 1px solid #e0d9cc; border-radius: 10px; background: #fffdf8; cursor: pointer; }
.coupon-grant-audience-tabs label:has(input:checked) { border-color: #8ea47f; background: #f0f6ec; box-shadow: 0 0 0 2px rgba(111, 139, 92, .08); }
.coupon-grant-audience-tabs input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.coupon-grant-audience-tabs span { color: #52634b; font-weight: 700; }
.coupon-grant-audience-panel { display: grid; gap: 12px; padding: 14px; border: 1px solid #e7e0d4; border-radius: 11px; background: #fffdf8; }
.coupon-grant-audience-panel[hidden], .coupon-grant-form-grid [hidden] { display: none !important; }
.coupon-grant-choice-list { display: flex; flex-wrap: wrap; gap: 8px; }
.coupon-grant-choice-list label { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #e4ddd1; border-radius: 99px; background: #faf8f2; cursor: pointer; }
.coupon-grant-choice-list label:has(input:checked) { border-color: #98ab89; background: #edf4e9; color: #46613d; }
.coupon-grant-choice-list input { width: 15px; height: 15px; accent-color: #607b50; }
.coupon-grant-user-picker { gap: 10px; }
.coupon-grant-selected-head { display: flex; align-items: center; justify-content: space-between; }
.coupon-grant-selected-head b, .coupon-grant-selected-head small { display: block; }
.coupon-grant-selected-head b { color: #43543d; font-size: 12px; }
.coupon-grant-selected-head small { margin-top: 2px; color: #95988e; font-size: 10px; }
.coupon-grant-selected-empty { padding: 9px 11px; border: 1px dashed #dfd8cc; border-radius: 9px; color: #999b91; font-size: 11px; }
.coupon-grant-selected-users { display: flex; flex-wrap: wrap; gap: 7px; }
.coupon-grant-selected-users > span { display: grid; grid-template-columns: minmax(0, 1fr) 18px; min-width: 150px; padding: 7px 7px 7px 10px; border: 1px solid #b8c8ac; border-radius: 9px; background: #eff5eb; }
.coupon-grant-selected-users b, .coupon-grant-selected-users small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coupon-grant-selected-users b { color: #40543a; font-size: 11px; }
.coupon-grant-selected-users small { color: #7b8975; font-size: 9px; }
.coupon-grant-selected-users button { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #7d8c76; cursor: pointer; }
.coupon-grant-selected-users i { align-self: center; color: #778072; font-size: 10px; font-style: normal; }
.coupon-grant-user-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.coupon-grant-user-search button { min-width: 78px; }
.coupon-grant-user-result-head { display: flex; align-items: center; justify-content: space-between; min-height: 18px; color: #858b80; font-size: 10px; }
.coupon-grant-user-empty { grid-column: 1 / -1; display: grid; min-height: 92px; place-content: center; gap: 5px; padding: 14px; border: 1px dashed #e2dbd0; border-radius: 9px; text-align: center; }
.coupon-grant-user-empty b { color: #687361; font-size: 12px; }
.coupon-grant-user-empty span { color: #96998f; font-size: 10px; }
.coupon-grant-user-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 330px; overflow: auto; gap: 8px; padding: 2px; }
.coupon-grant-user-list label { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 9px; padding: 10px; border: 1px solid #e6dfd4; border-radius: 9px; background: #fff; cursor: pointer; }
.coupon-grant-user-list label:has(input:checked) { border-color: #94aa83; background: #f1f6ed; }
.coupon-grant-user-list input { width: 16px; height: 16px; accent-color: #607b50; }
.coupon-grant-user-list b, .coupon-grant-user-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coupon-grant-user-list b { color: #44523f; font-size: 12px; }
.coupon-grant-user-list small { color: #929589; font-size: 10px; }
.coupon-grant-user-more { justify-self: center; }
.coupon-grant-preview { display: grid; gap: 13px; padding: 18px; border: 1px solid #cfdcc6; border-radius: 13px; background: #f2f7ee; }
.coupon-grant-preview header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.coupon-grant-preview header span { color: #75856e; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.coupon-grant-preview h3 { margin: 4px 0 0; color: #354d31; font: 600 18px/1.3 "Noto Serif SC", serif; }
.coupon-grant-preview header > b { color: #4e7042; font-size: 16px; }
.coupon-grant-preview dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; margin: 0; }
.coupon-grant-preview dl div { display: grid; gap: 3px; }
.coupon-grant-preview dt { color: #8b9485; font-size: 10px; }
.coupon-grant-preview dd { margin: 0; color: #586653; font-size: 12px; }
.coupon-grant-preview-users { display: flex; flex-wrap: wrap; gap: 6px; }
.coupon-grant-preview-users span, .coupon-grant-preview-users i { padding: 4px 8px; border-radius: 99px; background: #fff; color: #63715d; font-size: 10px; font-style: normal; }
.coupon-grant-editor-actions { display: flex; align-items: center; gap: 9px; position: sticky; bottom: 0; z-index: 2; padding: 14px 0 0; background: rgba(255, 253, 248, .96); }
.coupon-grant-editor-actions span { flex: 1; }
.coupon-grant-editor-actions button:disabled { cursor: not-allowed; opacity: .48; }
.coupon-grant-detail-head { display: grid; gap: 17px; }
.coupon-grant-task-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid #e8e1d6; border-radius: 12px; background: #faf8f2; }
.coupon-grant-task-summary > div { display: grid; gap: 5px; min-height: 108px; align-content: center; padding: 15px; border-right: 1px solid #e8e1d6; }
.coupon-grant-task-summary > div:last-child { border-right: 0; }
.coupon-grant-task-summary span, .coupon-grant-task-summary small { color: #8d9186; font-size: 10px; }
.coupon-grant-task-summary b { overflow: hidden; color: #40533b; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.coupon-grant-detail-actions { display: flex; justify-content: flex-end; gap: 9px; }

@media (max-width: 1050px) {
  .coupon-grant-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .coupon-grant-task-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coupon-grant-task-summary > div:nth-child(2) { border-right: 0; }
  .coupon-grant-task-summary > div:nth-child(-n+2) { border-bottom: 1px solid #e8e1d6; }
}

@media (max-width: 700px) {
  .coupon-grant-stats, .coupon-grant-form-grid, .coupon-grant-user-list, .coupon-grant-preview dl { grid-template-columns: 1fr; }
  .coupon-grant-form-grid .wide { grid-column: auto; }
  .coupon-grant-audience-tabs { grid-template-columns: 1fr; }
  .coupon-grant-preview header, .coupon-grant-form-section > header, .coupon-grant-editor-actions, .coupon-grant-detail-actions { align-items: stretch; flex-direction: column; }
  .coupon-grant-editor-actions span { display: none; }
  .coupon-grant-editor-actions button, .coupon-grant-detail-actions button { width: 100%; }
}