.vat-class-card {
  margin-top: 24px;
  padding: 26px;
  border: 1px solid color-mix(in srgb, var(--border, #d6ded9) 76%, #167456);
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 0%, rgba(29, 132, 95, .15), transparent 34%),
    linear-gradient(145deg, #fbfdfb 0%, #f1f7f3 100%);
  box-shadow: 0 16px 40px rgba(27, 54, 44, .08);
}
.vat-class-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.vat-class-head h3,
.vat-class-dialog h3 { margin: 5px 0 7px; font-family: "DM Serif Display", Georgia, serif; font-size: 25px; color: #173e31; }
.vat-class-head p { margin: 0; max-width: 720px; color: #607068; }
.vat-class-kicker { color: #167456; font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.vat-class-summary { display: flex; align-items: center; gap: 12px; margin: 22px 0 12px; color: #53645c; }
.vat-class-summary strong { color: #173e31; font-size: 22px; }
.vat-class-summary span { padding: 5px 10px; border-radius: 999px; background: #e0eee7; color: #126344; font-size: 12px; font-weight: 700; }
.vat-class-impact { margin: 0 0 16px; padding: 16px; border: 1px solid #c8ddd1; border-radius: 15px; background: rgba(232, 244, 237, .7); }
.vat-impact-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.vat-impact-head > div:first-child { display: grid; gap: 4px; }
.vat-impact-head strong { color: #214438; }
.vat-impact-balance { display: grid; justify-items: end; color: #176747; font-size: 20px; font-weight: 800; }
.vat-impact-balance.is-due { color: #a64b2d; }
.vat-impact-balance small { color: #73827a; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.vat-impact-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px; margin-top: 13px; }
.vat-impact-field { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; padding: 10px 11px; border-radius: 10px; background: rgba(255, 255, 255, .82); }
.vat-impact-field span { color: #167456; font-size: 11px; font-weight: 850; }
.vat-impact-field strong { justify-self: end; color: #233f35; }
.vat-impact-field small { grid-column: 1 / -1; color: #718078; }
.vat-impact-empty { margin: 12px 0 0; color: #718078; }
.vat-impact-foot { display: flex; align-items: center; gap: 14px; margin-top: 13px; color: #53675d; font-size: 12px; }
.vat-impact-foot code { margin-left: auto; padding: 4px 7px; border-radius: 6px; background: #d8e9df; color: #315546; }
.vat-class-table-wrap { overflow-x: auto; border: 1px solid #dce6e0; border-radius: 15px; background: rgba(255, 255, 255, .86); }
.vat-class-table { width: 100%; min-width: 780px; border-collapse: collapse; }
.vat-class-table th { padding: 11px 14px; background: #eef5f1; color: #64766d; font-size: 11px; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
.vat-class-table td { padding: 14px; border-top: 1px solid #e7eee9; color: #273c34; vertical-align: middle; }
.vat-class-table td small { display: block; margin-top: 4px; color: #809087; }
.vat-class-empty { padding: 28px !important; color: #7c8d84 !important; text-align: center; }
.vat-class-badge { display: inline-flex; padding: 5px 9px; border: 1px solid #d9e1dc; border-radius: 999px; color: #7b8a82; font-size: 11px; font-weight: 700; }
.vat-class-badge.is-set { border-color: #aad0bd; background: #e7f4ec; color: #126344; }
.vat-class-edit { padding: 7px 12px; border: 1px solid #b9cec2; border-radius: 9px; background: #fff; color: #176b4d; font-weight: 750; cursor: pointer; }
.vat-class-edit:hover { background: #eaf5ef; }
.vat-class-status { margin: 13px 2px 0; color: #718078; font-size: 12px; }
.vat-class-dialog { width: min(680px, calc(100vw - 28px)); padding: 0; border: 0; border-radius: 22px; color: #263b33; box-shadow: 0 28px 90px rgba(11, 34, 26, .32); }
.vat-class-dialog::backdrop { background: rgba(15, 37, 29, .58); backdrop-filter: blur(4px); }
.vat-class-dialog form { display: grid; gap: 18px; padding: 26px; background: linear-gradient(150deg, #fff 0%, #f2f7f4 100%); }
.vat-class-dialog-head { display: flex; justify-content: space-between; gap: 20px; }
.vat-class-close { width: 34px; height: 34px; border: 1px solid #d2ddd7; border-radius: 50%; background: #fff; color: #63736b; cursor: pointer; }
.vat-class-dialog label { display: grid; gap: 7px; color: #43574d; font-size: 12px; font-weight: 750; }
.vat-class-dialog select,
.vat-class-dialog input,
.vat-class-dialog textarea { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid #cddbd3; border-radius: 10px; background: #fff; color: #213a30; font: inherit; }
.vat-class-dialog textarea { min-height: 92px; resize: vertical; }
.vat-class-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vat-class-target { padding: 12px 14px; border-left: 3px solid #278363; border-radius: 4px 10px 10px 4px; background: #e8f3ed; color: #355a4b; font-size: 13px; }
.vat-class-actions { display: flex; justify-content: flex-end; gap: 10px; }
@media (max-width: 720px) {
  .vat-class-card { padding: 18px; border-radius: 17px; }
  .vat-class-head { display: grid; }
  .vat-class-head .btn { width: 100%; }
  .vat-class-fields { grid-template-columns: 1fr; }
  .vat-impact-head { display: grid; }
  .vat-impact-balance { justify-items: start; }
  .vat-impact-foot { align-items: flex-start; flex-direction: column; }
  .vat-impact-foot code { margin-left: 0; }
  .vat-class-dialog form { padding: 20px; }
}