/* Shared page header. Artwork and controls occupy separate columns on desktop. */
html[data-theme] main .system-page-hero {
  display:grid; grid-template-columns:minmax(0,1fr) 15rem; position:relative; isolation:isolate; overflow:hidden; width:100%; box-sizing:border-box;
  margin:0 0 1.5rem!important; padding:0!important; border-radius:1.25rem!important;
  border:var(--ui-border-width,1px) solid color-mix(in srgb,var(--ui-header),white 28%)!important;
  background:linear-gradient(115deg,var(--ui-header),color-mix(in srgb,var(--ui-header) 62%,var(--ui-accent)))!important;
  color:var(--ui-header-text)!important;
  box-shadow:0 10px 24px color-mix(in srgb,var(--ui-header),transparent 78%);
}
html[data-theme] main .system-page-hero-content {
  position:relative; display:grid!important; grid-template-columns:minmax(0,1fr) 7rem;
  align-items:center; gap:1.5rem; min-height:9rem; padding:1.5rem 2rem; background:transparent!important;
}
html[data-theme] main .system-page-hero-copy { min-width:0; background:transparent!important; }
html[data-theme] main .system-page-kicker {
  display:inline-flex; align-items:center; width:auto; padding:.3rem .65rem;
  border:1px solid color-mix(in srgb,var(--ui-header-text),transparent 65%); border-radius:999px;
  background:color-mix(in srgb,var(--ui-header-text),transparent 90%)!important;
  color:var(--ui-header-text)!important; font-size:.7rem!important; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;
}
html[data-theme] main .system-page-hero-copy h1 {
  margin:.65rem 0 0!important; padding:0!important; font-size:2rem!important; font-weight:800!important;
  line-height:1.2!important; overflow-wrap:anywhere; color:var(--ui-header-text)!important; background:transparent!important;
}
html[data-theme] main .system-page-hero-copy p {
  margin:.45rem 0 0!important; max-width:52rem; font-size:.9rem!important; line-height:1.5;
  color:var(--ui-header-text)!important; background:transparent!important;
}
html[data-theme] main .system-page-hero-icon {
  position:static!important; display:grid!important; place-items:center; width:7rem; height:6rem;
  margin:0!important; padding:0!important; font-size:4.8rem!important;
  color:var(--ui-header-text)!important; background:transparent!important; opacity:.38;
  pointer-events:none; transform:none!important;
}
html[data-theme] main .system-page-hero-footer {
  display:flex; flex-direction:column; justify-content:center; align-items:stretch; gap:1rem;
  padding:1.25rem; border-left:1px solid color-mix(in srgb,var(--ui-header-text),transparent 80%);
  background:color-mix(in srgb,var(--ui-header),black 12%)!important;
}
html[data-theme] main .system-page-hero-actions,
html[data-theme] main .system-page-hero-navigation {
  display:flex!important; align-items:center; flex-wrap:wrap; gap:.65rem;
  min-width:0; margin:0!important; padding:0!important; background:transparent!important;
}
html[data-theme] main .system-page-hero-actions { flex:0 1 auto; }
html[data-theme] main .system-page-hero-navigation { margin-left:0!important; }
html[data-theme] main .system-page-hero-actions:empty { display:none!important; }
html[data-theme] main .system-page-hero-footer :is(a,button) {
  display:inline-flex!important; align-items:center; justify-content:center; gap:.5rem;
  min-height:44px; max-width:100%; padding:.65rem 1rem!important; margin:0!important;
  border:1px solid color-mix(in srgb,var(--ui-accent),white 35%)!important; border-radius:.75rem!important;
  background:var(--ui-accent)!important; color:var(--ui-accent-text)!important;
  font-size:.875rem!important; font-weight:700!important; line-height:1.4;
  text-decoration:none; text-align:center; box-shadow:0 3px 10px #0002;
}
html[data-theme] main .system-page-hero-footer :is(a,button) :is(i,span) {color:inherit!important;}
html[data-theme] main .system-page-hero-navigation a {
  background:var(--ui-surface)!important; color:var(--ui-text)!important; border-color:var(--ui-border)!important;
}
html[data-theme] main .system-page-hero-footer :is(a,button):hover {filter:brightness(1.08);}
html[data-theme] main .system-page-hero-actions :is(.print-action,[onclick*="window.print"],[onclick*="printInvoiceReport"]) {background:#15803d!important;color:#fff!important;border-color:#166534!important;}
html[data-theme] main .system-page-hero-actions :is(.danger-action,.btn-danger,form[action*="delete"] button) {background:#b91c1c!important;color:#fff!important;border-color:#991b1b!important;}
html[data-theme] main .system-page-hero-actions form {margin:0!important;max-width:100%;}
/* Legacy module utility classes must not override header action contrast. */
html[data-theme] body[data-module] main .system-page-hero[data-standard] .system-page-hero-actions :is(a,button) {
  background:var(--ui-accent)!important;color:var(--ui-accent-text)!important;
}
html[data-theme] body[data-module] main .system-page-hero[data-standard] .system-page-hero-actions :is(a,button) :is(i,span) {
  background:transparent!important;color:inherit!important;
}
html[data-theme] body[data-module] main .system-page-hero[data-standard] .system-page-hero-actions :is(.print-action,[onclick*="window.print"],[onclick*="printInvoiceReport"]) {background:#15803d!important;color:#fff!important;}
html[data-theme] body[data-module] main .system-page-hero[data-standard] .system-page-hero-actions :is(.danger-action,.btn-danger,form[action*="delete"] button) {background:#b91c1c!important;color:#fff!important;}
html[data-theme="contrast"] main .system-page-hero {background:#000!important;border:2px solid #fff!important;}
html[data-theme] main .system-page-hero:not(:has(.system-page-hero-footer)) {grid-template-columns:minmax(0,1fr);}
html[data-theme] main .system-page-kicker {gap:.45rem;}
html[data-theme] main .system-page-hero-footer :is(a,button) {overflow-wrap:normal;word-break:normal;}
/* Compact credit controls keep words and numeric badges intact. */
html[data-theme] main .system-page-hero-actions a[href*="credits/history"] {width:100%;}
html[data-theme] main .system-page-hero-actions a[href*="credits/history"] span {
  flex-shrink:0;white-space:nowrap;min-width:2rem;text-align:center;
}
html[data-theme] main .system-page-hero-actions form[action$="/credits/alert-settings"] {
  display:grid!important;grid-template-columns:minmax(0,1fr);gap:.6rem;width:100%;box-sizing:border-box;
}
html[data-theme] main .system-page-hero-actions form[action$="/credits/alert-settings"] label {
  display:flex;align-items:center;flex-wrap:wrap;gap:.35rem;line-height:1.4;
}
html[data-theme] main .system-page-hero-actions form[action$="/credits/alert-settings"] input {
  width:3.5rem;flex-shrink:0;margin:0!important;
}
html[data-theme] main .system-page-hero-actions form[action$="/credits/alert-settings"] button {
  width:100%;white-space:nowrap;word-break:normal;
}
@media(max-width:900px) {
  html[data-theme] main .system-page-hero {grid-template-columns:minmax(0,1fr);}
  html[data-theme] main .system-page-hero-footer {border-left:0;border-top:1px solid color-mix(in srgb,var(--ui-header-text),transparent 80%);}
}
@media(max-width:640px) {
  html[data-theme] main .system-page-hero-content {grid-template-columns:minmax(0,1fr) 3.5rem;gap:.75rem;padding:1.25rem;min-height:8rem;}
  html[data-theme] main .system-page-hero-copy h1 {font-size:1.5rem!important;}
  html[data-theme] main .system-page-hero-icon {width:3.5rem;height:4rem;font-size:3rem!important;}
  html[data-theme] main .system-page-hero-footer {padding:1rem 1.25rem;}
  html[data-theme] main .system-page-hero-actions,html[data-theme] main .system-page-hero-navigation {width:100%;justify-content:flex-start;}
}
@media print {
  html[data-theme] main .system-page-hero-footer,html[data-theme] main .system-page-hero-icon {display:none!important;}
  html[data-theme] main .system-page-hero-content {display:block!important;min-height:0;padding:1rem;}
}
