html { font-size: var(--rep-font-size, 16px); }
body {
  font-family: var(--rep-font);
  background: var(--rep-bg);
  color: var(--rep-text);
}
h1, h2, h3, .rep-heading { font-family: var(--rep-heading-font); }

/* ---------- shell ---------- */
.rep-sidebar {
  width: 264px; min-width: 264px;
  background: var(--rep-sidebar);
  color: var(--rep-sidebar-text);
  display: flex; flex-direction: column;
  padding: 1rem .75rem;
}
.rep-brand { display: flex; align-items: center; gap: .7rem; padding: .5rem .75rem 1.25rem; }
.rep-brand i { font-size: 1.7rem; color: var(--rep-accent); }
.rep-brand-title { font-family: var(--rep-heading-font); font-weight: 700; font-size: 1.15rem; line-height: 1.1; }
.rep-brand-sub { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.rep-brand-top { padding: 0; }
.rep-nav { display: flex; flex-direction: column; gap: .15rem; flex-grow: 1; overflow-y: auto; }
.rep-nav-link {
  display: flex; align-items: center; gap: .75rem;
  color: var(--rep-sidebar-text); text-decoration: none;
  padding: 0 .85rem; min-height: var(--rep-target);
  border-radius: var(--rep-radius);
  font-weight: 500; font-size: .93rem;
  transition: background .15s ease, color .15s ease;
}
.rep-nav-link:hover { background: rgba(255,255,255,.09); color: var(--rep-sidebar-text); }
.rep-nav-link.active { background: var(--rep-primary); color: #fff; }
.rep-nav-link i { font-size: 1.1rem; width: 1.4rem; text-align: center; }
.rep-sidebar-footer { border-top: 1px solid rgba(255,255,255,.12); padding-top: .5rem; margin-top: .5rem; }

.rep-topbar {
  display: flex; align-items: center; gap: 1rem;
  background: var(--rep-surface);
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding: .7rem 1.5rem; min-height: 3.6rem;
}
[data-theme-dark="true"] .rep-topbar { border-bottom-color: rgba(255,255,255,.08); }
.rep-topbar-title { font-family: var(--rep-heading-font); font-size: 1.2rem; font-weight: 600; }
.rep-topnav { display: flex; gap: .25rem; flex-wrap: wrap; }
.rep-top-link { color: var(--rep-text); text-decoration: none; padding: .45rem .8rem; border-radius: var(--rep-radius); font-size: .9rem; }
.rep-top-link:hover { background: rgba(0,0,0,.06); color: var(--rep-text); }
.rep-user { font-size: .88rem; opacity: .85; }
.rep-content { padding: 1.5rem; max-width: 1400px; width: 100%; }

/* ---------- components ---------- */
.card, .rep-surface {
  background: var(--rep-surface);
  border-radius: var(--rep-radius);
  border: 1px solid rgba(0,0,0,.07);
  color: var(--rep-text);
}
[data-theme-dark="true"] .card, [data-theme-dark="true"] .rep-surface { border-color: rgba(255,255,255,.1); }
.btn { border-radius: var(--rep-radius); min-height: var(--rep-target); display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn-sm { min-height: calc(var(--rep-target) - .7rem); }
.btn-primary { background: var(--rep-primary); border-color: var(--rep-primary); }
.btn-primary:hover, .btn-primary:focus { filter: brightness(.92); background: var(--rep-primary); border-color: var(--rep-primary); }
.btn-outline-primary { color: var(--rep-primary); border-color: var(--rep-primary); }
.btn-outline-primary:hover { background: var(--rep-primary); border-color: var(--rep-primary); }
a { color: var(--rep-primary); }
.form-control, .form-select { border-radius: var(--rep-radius); min-height: var(--rep-target); background: var(--rep-surface); color: var(--rep-text); }
.form-control:focus, .form-select:focus { border-color: var(--rep-primary); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--rep-primary) 25%, transparent); }
textarea.form-control { min-height: 6rem; }
.table { color: var(--rep-text); background: var(--rep-surface); border-radius: var(--rep-radius); overflow: hidden; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.form-check-input:checked { background-color: var(--rep-primary); border-color: var(--rep-primary); }
.form-switch .form-check-input { width: 2.6em; height: 1.4em; cursor: pointer; }

/* stat cards */
.rep-stat { padding: 1.1rem 1.25rem; display: flex; align-items: center; gap: 1rem; }
.rep-stat i { font-size: 1.6rem; color: var(--rep-primary); background: color-mix(in srgb, var(--rep-primary) 12%, transparent); border-radius: var(--rep-radius); padding: .6rem .75rem; }
.rep-stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.rep-stat-label { font-size: .8rem; opacity: .7; }

/* theme gallery */
.rep-theme-card { cursor: default; }
.rep-swatches { display: flex; height: 3rem; border-radius: calc(var(--rep-radius) * .75); overflow: hidden; }
.rep-swatches span { flex: 1; }

/* integrations */
.rep-int-card { height: 100%; display: flex; flex-direction: column; }
.rep-int-logo { font-size: 1.5rem; color: var(--rep-primary); }
.rep-kv { font-size: .82rem; }
.rep-kv dt { font-weight: 600; }
.badge.bg-enabled { background: #1a7f4b !important; }
.badge.bg-disabled { background: #b54708 !important; }

/* login */
.rep-login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--rep-sidebar), color-mix(in srgb, var(--rep-primary) 60%, var(--rep-sidebar)));
  padding: 1rem;
}
.rep-login-card { width: 100%; max-width: 420px; padding: 2.25rem; }

/* skip link for a11y */
.rep-skip { position: absolute; inset-inline-start: -9999px; top: 0; background: var(--rep-primary); color: #fff; padding: .6rem 1rem; z-index: 2000; }
.rep-skip:focus { inset-inline-start: 0; }

@media (max-width: 900px) {
  .rep-sidebar { width: 76px; min-width: 76px; }
  .rep-nav-link span, .rep-brand div, .rep-sidebar-footer span { display: none; }
}

/* ---------- billing workspace ---------- */
.billing-page { max-width: 1180px; }
.billing-page .billing-hero {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.billing-page .billing-hero h1,
.billing-page .billing-hero h2,
.billing-page .billing-hero h3,
.billing-page .billing-hero h4 { margin-bottom: .35rem; letter-spacing: -.015em; }
.billing-page .billing-eyebrow {
  color: var(--rep-primary); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: .35rem;
}
.billing-page .billing-subtitle { color: color-mix(in srgb, var(--rep-text) 65%, transparent); margin: 0; max-width: 680px; }
.billing-page .billing-actions { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: flex-end; }
.billing-page .billing-card {
  background: var(--rep-surface); border: 1px solid color-mix(in srgb, var(--rep-text) 10%, transparent);
  border-radius: calc(var(--rep-radius) * 1.35); box-shadow: 0 .35rem 1.2rem rgba(15, 23, 42, .045);
  overflow: hidden;
}
.billing-page .billing-card > .card-header,
.billing-page .billing-card > .billing-card-header {
  background: color-mix(in srgb, var(--rep-primary) 4%, var(--rep-surface));
  border-bottom: 1px solid color-mix(in srgb, var(--rep-text) 9%, transparent);
  padding: 1rem 1.25rem;
}
.billing-page .billing-card > .card-body { padding: 1.25rem; }
.billing-page .billing-section {
  border: 1px solid color-mix(in srgb, var(--rep-text) 10%, transparent);
  border-radius: var(--rep-radius); padding: 1.15rem 1.2rem; margin-bottom: 1rem;
}
.billing-page .billing-section:last-child { margin-bottom: 0; }
.billing-page .billing-section-title {
  display: flex; align-items: center; gap: .6rem; margin-bottom: .2rem;
  font-weight: 700; font-size: 1rem;
}
.billing-page .billing-section-title i {
  color: var(--rep-primary); background: color-mix(in srgb, var(--rep-primary) 11%, transparent);
  border-radius: 50%; padding: .45rem; font-size: .9rem;
}
.billing-page .billing-section-help { color: color-mix(in srgb, var(--rep-text) 62%, transparent); font-size: .84rem; margin: 0 0 1rem 2.05rem; }
.billing-page .form-label { font-weight: 600; font-size: .87rem; margin-bottom: .4rem; }
.billing-page .form-text { line-height: 1.45; }
.billing-page .required-note { color: color-mix(in srgb, var(--rep-text) 60%, transparent); font-size: .78rem; }
.billing-page .billing-summary {
  background: linear-gradient(145deg, color-mix(in srgb, var(--rep-primary) 9%, var(--rep-surface)), var(--rep-surface));
  border: 1px solid color-mix(in srgb, var(--rep-primary) 18%, transparent);
  border-radius: calc(var(--rep-radius) * 1.35); padding: 1.3rem;
}
.billing-page .billing-summary-title { font-weight: 700; margin-bottom: .8rem; }
.billing-page .billing-summary-row {
  display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--rep-text) 8%, transparent); font-size: .88rem;
}
.billing-page .billing-summary-row:last-child { border-bottom: 0; }
.billing-page .billing-summary-row span:first-child { color: color-mix(in srgb, var(--rep-text) 62%, transparent); }
.billing-page .billing-toolbar { padding: 1rem 1.25rem; background: color-mix(in srgb, var(--rep-text) 2%, var(--rep-surface)); }
.billing-page .billing-table-wrap { overflow-x: auto; }
.billing-page .billing-table { min-width: 720px; margin-bottom: 0; }
.billing-page .billing-table thead th { white-space: nowrap; padding: .85rem 1rem; }
.billing-page .billing-table tbody td { padding: .9rem 1rem; }
.billing-page .billing-empty { padding: 4rem 1.5rem; text-align: center; color: color-mix(in srgb, var(--rep-text) 62%, transparent); }
.billing-page .billing-empty i { display: block; font-size: 2.5rem; color: color-mix(in srgb, var(--rep-primary) 55%, transparent); margin-bottom: .8rem; }
.billing-page .billing-danger-card { border-color: color-mix(in srgb, #dc3545 28%, transparent); }
.billing-page .billing-muted-panel { background: color-mix(in srgb, var(--rep-text) 3%, var(--rep-surface)); }
.billing-page .billing-sticky-actions {
  position: sticky; bottom: 0; z-index: 2; margin: 1rem -1.25rem -1.25rem;
  padding: 1rem 1.25rem; background: color-mix(in srgb, var(--rep-surface) 94%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--rep-text) 10%, transparent);
  backdrop-filter: blur(8px);
}
.billing-page .billing-action-note { font-size: .8rem; color: color-mix(in srgb, var(--rep-text) 58%, transparent); }
.billing-page .billing-filter-grid { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(150px, 1fr)) auto; gap: .75rem; align-items: end; }
.billing-foundation-hero { padding: 1.35rem 1.5rem; border-radius: calc(var(--rep-radius) * 1.35); background: linear-gradient(115deg, color-mix(in srgb, var(--rep-primary) 9%, var(--rep-surface)), var(--rep-surface)); border: 1px solid color-mix(in srgb, var(--rep-primary) 15%, transparent); }
.billing-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.billing-stat-card { display: flex; align-items: center; gap: .75rem; padding: 1rem; background: var(--rep-surface); border: 1px solid color-mix(in srgb, var(--rep-text) 10%, transparent); border-radius: var(--rep-radius); box-shadow: 0 .25rem .8rem rgba(15, 23, 42, .035); }
.billing-stat-card strong { display: block; font-size: 1.35rem; line-height: 1.1; letter-spacing: -.02em; }
.billing-stat-label { display: block; color: color-mix(in srgb, var(--rep-text) 62%, transparent); font-size: .76rem; margin-bottom: .2rem; }
.billing-stat-icon { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; flex: 0 0 2.35rem; color: var(--rep-primary); background: color-mix(in srgb, var(--rep-primary) 11%, transparent); border-radius: .7rem; }
.billing-stat-icon-success { color: #16805c; background: color-mix(in srgb, #16805c 11%, transparent); }
.billing-stat-icon-warning { color: #a15c00; background: color-mix(in srgb, #d99000 14%, transparent); }
.billing-stat-icon-muted { color: #637083; background: color-mix(in srgb, #637083 12%, transparent); }
.billing-guidance { display: flex; align-items: flex-start; gap: .1rem; padding: .85rem 1rem; border: 0; }
.billing-guidance strong, .billing-guidance span { display: block; }
.billing-guidance span { margin-top: .15rem; color: color-mix(in srgb, var(--rep-text) 70%, transparent); }
.billing-count-pill { white-space: nowrap; padding: .3rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--rep-primary) 10%, transparent); color: var(--rep-primary); font-size: .75rem; font-weight: 700; }
.billing-create-panel { background: color-mix(in srgb, var(--rep-primary) 2.5%, var(--rep-surface)); }
.billing-form-kicker { display: flex; align-items: center; gap: .65rem; margin-bottom: 1rem; }
.billing-form-kicker strong, .billing-form-kicker small { display: block; }
.billing-form-kicker small { color: color-mix(in srgb, var(--rep-text) 60%, transparent); margin-top: .15rem; }
.billing-step { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--rep-primary); color: #fff; font-weight: 700; font-size: .82rem; }
.billing-department-row { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid color-mix(in srgb, var(--rep-text) 8%, transparent); }
.billing-department-row:last-of-type { border-bottom: 0; }
.billing-page details { position: relative; }
.billing-page details > summary { list-style: none; cursor: pointer; }
.billing-page details > summary::-webkit-details-marker { display: none; }
.billing-page details[open] > summary { background: var(--rep-primary); color: #fff; }
.billing-page details[open] > form { position: absolute; right: 0; top: 2.35rem; z-index: 5; box-shadow: 0 .6rem 1.5rem rgba(15, 23, 42, .14); }
.billing-page details[open] > form .form-label { color: var(--rep-text); }
.billing-foundation-layout { align-items: start; }
.billing-service-rail { position: sticky; top: 1rem; }
.billing-service-rail .card-header { padding: 1rem; }
.billing-service-rail .card-body { padding: 1rem; }
.billing-service-rail .billing-section-help { margin-left: 0; }
.billing-service-rail .list-group-item { padding-inline: 1rem; }
.billing-service-rail .list-group-item > .d-flex { align-items: flex-start; }
.billing-rail-form .form-label { font-size: .78rem; }
.billing-rail-form .form-control, .billing-rail-form .form-select { font-size: .82rem; }
.billing-service-rail details[open] > form { position: static; width: 100%; min-width: 0 !important; margin-top: .65rem !important; }
.billing-service-rail details[open] > summary { display: inline-block; }
.billing-service-rail details[open] { width: 100%; }
.billing-service-rail details[open] + form { display: none; }
/* The class is also used directly on legacy cards so these screens can adopt
   the visual system without changing their existing form contracts. */
.billing-card {
  border: 1px solid color-mix(in srgb, var(--rep-text) 10%, transparent);
  border-radius: calc(var(--rep-radius) * 1.35); box-shadow: 0 .35rem 1.2rem rgba(15, 23, 42, .045);
  overflow: hidden;
}
.billing-card .card-header {
  background: color-mix(in srgb, var(--rep-primary) 4%, var(--rep-surface));
  border-bottom: 1px solid color-mix(in srgb, var(--rep-text) 9%, transparent);
}
.billing-card .form-label { font-weight: 600; font-size: .87rem; }
.billing-card .card-footer { border-top: 1px solid color-mix(in srgb, var(--rep-text) 9%, transparent); }
@media (max-width: 760px) {
  .billing-page .billing-hero { flex-direction: column; }
  .billing-page .billing-actions { justify-content: flex-start; }
  .billing-page .billing-filter-grid { grid-template-columns: 1fr; }
  .billing-page .billing-card > .card-body { padding: 1rem; }
  .billing-page .billing-section { padding: 1rem; }
  .billing-page .billing-sticky-actions { margin-inline: -1rem; padding-inline: 1rem; }
  .billing-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .billing-foundation-hero { padding: 1rem; }
  .billing-page details[open] > form { position: static; min-width: 0 !important; width: min(100%, 620px); }
  .billing-service-rail { position: static; }
}