.button, .icon-button {
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 750;
}
.button { display: inline-flex; min-height: 44px; padding: 0.7rem 1rem; border-radius: var(--radius-sm); }
.button--primary { background: var(--cyan); color: #fff; }
.button--primary:hover { background: var(--cyan-hover); text-decoration: none; }
.button--secondary { border-color: var(--line); background: var(--surface-quiet); color: var(--text); }
.button--compact { min-height: 38px; padding: 0.45rem 0.75rem; }
.button--wide { width: 100%; }
.icon-button { display: inline-grid; width: 40px; height: 40px; border-color: var(--line); background: transparent; color: var(--text-muted); border-radius: 50%; }
.icon-button--small { width: 30px; height: 30px; }
.field { display: grid; gap: 0.45rem; }
.field label { color: var(--text-muted); font-size: 0.86rem; font-weight: 750; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 0.75rem 0.9rem; border: 1px solid var(--line);
  background: var(--surface-quiet); color: var(--text); border-radius: var(--radius-sm);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--cyan-hover); }
.form-stack { display: grid; gap: 1rem; }
.form-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0; color: var(--text-muted); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; }
.form-divider::before, .form-divider::after { height: 1px; flex: 1; background: var(--line-soft); content: ""; }
.alert { padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.alert--error { border-color: #794047; background: var(--red-soft); color: var(--red); }
.alert--info { border-color: var(--cyan); background: var(--cyan-soft); color: var(--text); }
.toast-stack { position: fixed; top: 1rem; right: 1rem; z-index: 100; display: grid; width: min(28rem, calc(100vw - 2rem)); gap: 0.65rem; }
.toast { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 1rem; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.product-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 1.1rem; min-height: 230px; padding: 1.5rem; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-md); }
.product-card--pm { border-top: 4px solid var(--cyan); }
.product-card--weg { border-top: 4px solid var(--green); }
.product-card--cyan { border-top: 4px solid var(--cyan); }
.product-card--green { border-top: 4px solid var(--green); }
.product-card--amber { border-top: 4px solid var(--amber); }
.product-card__mark { display: grid; width: 64px; height: 64px; place-items: center; background: var(--surface-strong); color: var(--cyan-hover); font-weight: 850; border-radius: var(--radius-sm); }
.product-card--weg .product-card__mark { color: var(--green); }
.product-card--cyan .product-card__mark { color: var(--cyan-hover); }
.product-card--green .product-card__mark { color: var(--green); }
.product-card--amber .product-card__mark { color: var(--amber); }
.product-card h2 { margin-bottom: 0.75rem; font-size: 1.55rem; }
.product-card p:last-child { color: var(--text-muted); }
.product-card:hover, .customer-card:hover { border-color: var(--cyan-hover); text-decoration: none; transform: translateY(-1px); }
.plan-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1rem; }
.badge, .count-badge { display: inline-flex; min-height: 28px; align-items: center; padding: 0.25rem 0.6rem; background: var(--surface-strong); color: var(--text-muted); font-size: 0.78rem; font-weight: 800; border-radius: 999px; }
.badge--success { background: var(--green-soft); color: var(--green); }
.empty-state { grid-column: 1 / -1; padding: 2.5rem 1.25rem; border: 1px dashed var(--line); color: var(--text-muted); text-align: center; border-radius: var(--radius-md); }
.back-link { display: inline-flex; margin-bottom: 1.5rem; color: var(--cyan-hover); font-weight: 750; }
.product-heading { display: flex; align-items: flex-start; gap: 1.25rem; margin-bottom: 2rem; }
.product-card__mark--large { width: 76px; height: 76px; flex: 0 0 76px; font-size: 1.05rem; }
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.panel { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-md); }
.plan-card { display: grid; align-content: start; gap: 1.5rem; min-height: 250px; padding: 1.5rem; }
.feature-list { display: grid; gap: 0.65rem; padding: 0; list-style: none; }
.feature-list li { position: relative; padding-left: 1.35rem; color: var(--text-muted); }
.feature-list li::before { position: absolute; left: 0; color: var(--green); content: "\2713"; font-weight: 900; }
.section-stack { display: grid; gap: 1rem; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.section-heading h2 { margin-top: 0.15rem; }
.customer-grid { display: grid; gap: 0.75rem; }
.customer-card, .data-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.9rem; }
.customer-card { padding: 1rem; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: var(--radius-sm); }
.customer-card span:nth-child(2), .data-row span:nth-child(2) { display: grid; gap: 0.2rem; }
.customer-card small, .data-row small { color: var(--text-muted); }
.customer-card__mark { display: grid; width: 42px; height: 42px; place-items: center; background: var(--surface-strong); color: var(--cyan-hover); font-size: 0.78rem; font-weight: 900; border-radius: var(--radius-sm); }
.products-empty { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; padding: 1.25rem; }
.products-empty > div { margin-right: auto; }
.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stat { display: grid; gap: 0.35rem; padding: 1.25rem; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); }
.stat span { color: var(--text-muted); font-size: 0.82rem; font-weight: 800; text-transform: uppercase; }
.stat strong { font-size: 1.35rem; }
.section-panel { margin-top: 1rem; overflow: hidden; }
.section-panel > .section-heading { padding: 1.25rem; border-bottom: 1px solid var(--line-soft); }
.data-list { display: grid; }
.data-row { padding: 0.9rem 1.25rem; }
.data-row + .data-row { border-top: 1px solid var(--line-soft); }
.form-page { width: min(100%, 780px); margin-inline: auto; padding: clamp(2rem, 5vw, 5rem) clamp(1.25rem, 4vw, 4rem); }
.form-panel { display: grid; gap: 1rem; padding: 1.5rem; }
.form-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.field-error { color: var(--red); }
.review-card { display: grid; overflow: hidden; }
.review-row { display: grid; grid-template-columns: minmax(10rem, 0.7fr) minmax(0, 1.3fr); align-items: center; gap: 1rem; padding: 1rem 1.25rem; }
.review-row + .review-row { border-top: 1px solid var(--line-soft); }
.review-row > span:first-child { color: var(--text-muted); }
.review-card > .form-actions { margin: 0; padding: 1.25rem; }
.entitlement-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.entitlement-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; }
@media (max-width: 760px) {
  .product-grid { grid-template-columns: 1fr; }
  .product-card { min-height: 0; }
  .plan-grid, .summary-grid { grid-template-columns: 1fr; }
  .products-empty { align-items: flex-start; flex-direction: column; }
  .products-empty > div { margin-right: 0; }
  .customer-card, .data-row { grid-template-columns: auto minmax(0, 1fr); }
  .review-row { grid-template-columns: 1fr; gap: 0.35rem; }
  .entitlement-row { grid-template-columns: auto minmax(0, 1fr); }
  .entitlement-actions { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
  .customer-card > .badge, .data-row > .badge { grid-column: 2; justify-self: start; }
}