:root {
  color-scheme: light;
  --ink: #101f49;
  --muted: #596986;
  --line: #e2eaf4;
  --surface: #f5f8fc;
  --panel: #fff;
  --brand: #0867dd;
  --bright: #079df5;
  --azure: #00a6fd;
  --blue-soft: #eaf3ff;
  --good: #06764d;
  --green-soft: #e9f9f1;
  --amber: #915607;
  --amber-soft: #fff5df;
  --radius: 16px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
}
a {
  color: var(--brand);
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
:focus-visible {
  outline: 3px solid #0969da;
  outline-offset: 4px;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1 {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.2;
  letter-spacing: -1.2px;
}
h2 {
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.5px;
}
h3 {
  font-size: 16px;
  line-height: 1.4;
}
p + p {
  margin-top: 8px;
}
strong {
  font-weight: 700;
}
button {
  cursor: pointer;
}
svg.icon {
  width: 21px;
  height: 21px;
  flex: none;
  vertical-align: middle;
}
main {
  padding: 32px 0 48px;
  min-height: 75vh;
}
section[id] {
  scroll-margin-top: 100px;
}
.shell {
  width: min(1184px, calc(100% - 48px));
  margin: auto;
}
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 84px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--ink);
}
.wordmark {
  font-size: 28px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 1px;
}
.brand-caption {
  font-size: 11px;
  color: var(--muted);
  max-width: 130px;
  line-height: 1.5;
  border-left: 1px solid var(--line);
  padding-left: 18px;
}
.brand-dot {
  color: var(--bright);
}
.header-link {
  font-weight: 650;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 14px;
  white-space: nowrap;
}
.desktop-nav {
  display: flex;
  gap: 26px;
  height: 100%;
  align-items: center;
}
.desktop-nav a {
  height: 100%;
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 3px solid transparent;
  padding-top: 3px;
}
.desktop-nav a[aria-current] {
  color: var(--brand);
  border-color: var(--brand);
}
.desktop-nav .icon {
  width: 18px;
}
.bottom-nav {
  display: none;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  background: var(--ink);
  color: white;
  padding: 12px;
  z-index: 99;
}
.skip-link:focus {
  top: 8px;
}
.muted {
  color: var(--muted);
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 11px;
  font-weight: 750;
  color: var(--brand);
  display: flex;
  align-items: center;
  gap: 8px;
}
.eyebrow:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bright);
}
.hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  overflow: hidden;
  background: var(--blue-soft);
  border: 1px solid #d8e8fb;
  border-radius: 20px;
  margin-bottom: 28px;
}
.hero-copy {
  padding: 36px 40px;
  display: grid;
  gap: 18px;
  justify-items: start;
}
.hero h1 {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.13;
  letter-spacing: -1.8px;
  max-width: 560px;
}
.hero h1 em {
  color: var(--brand);
  font-style: normal;
}
.hero p {
  max-width: 450px;
  color: var(--muted);
  font-size: 15px;
}
.hero-visual {
  position: relative;
  min-height: 260px;
  background: #182432;
}
.hero-visual img {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
}
.hero-caption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-caption .icon {
  color: var(--brand);
}
.hero-caption small {
  display: block;
  color: var(--muted);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--brand);
  border: 1px solid var(--brand);
  border-radius: 9px;
  padding: 11px 18px;
  min-height: 44px;
  color: white;
  font-weight: 650;
  line-height: 1.4;
  text-align: center;
}
.btn:hover {
  background: #0456bd;
}
.btn.secondary {
  background: white;
  color: var(--brand);
  border-color: #cddff8;
}
.btn.secondary:hover {
  background: var(--blue-soft);
}
.btn[disabled] {
  cursor: not-allowed;
  background: #e8edf4;
  border-color: var(--line);
  color: var(--muted);
}
.btn.full {
  width: 100%;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 650;
}
.text-link .icon {
  width: 16px;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pad {
  padding: 24px;
}
.stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.content-layout,
.detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
.detail > .stack {
  min-width: 0;
}
.detail > .stack > * {
  min-width: 0;
  max-width: 100%;
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.section-head h2 {
  margin: 0;
}
.section-head small {
  color: var(--muted);
}
.section-intro {
  margin-bottom: 24px;
}
.section-intro p {
  color: var(--muted);
  margin-top: 6px;
}
.input {
  width: 100%;
  min-width: 0;
  padding: 11px 13px;
  min-height: 44px;
  border: 1px solid #d6e1ef;
  border-radius: 8px;
  background: white;
  color: var(--ink);
}
textarea.input {
  resize: vertical;
  min-height: 100px;
}
.search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 1;
}
.search-field > .icon {
  position: absolute;
  left: 13px;
  color: var(--muted);
}
.search-field input {
  padding-left: 42px;
}
.filters {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  /* Search plus three selects plus a button cannot sit on one line on a phone. */
  flex-wrap: wrap;
}
.filters .search-field {
  flex: 1 1 220px;
}
.filters select {
  width: auto;
  flex: 1 1 140px;
  min-width: 0;
}
.field {
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 550;
}
.field small {
  font-weight: 400;
  color: var(--muted);
}
.form-stack {
  display: grid;
  gap: 18px;
}
.campaign-list {
  display: grid;
  gap: 16px;
}
.campaign {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  overflow: hidden;
  transition: border-color 0.15s;
}
.campaign:hover {
  border-color: #93baf3;
}
.campaign-art {
  background: #e7f0ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  position: relative;
}
.campaign-art .avatar {
  width: 80px;
  height: 80px;
  font-size: 28px;
  background: #fff;
  color: var(--brand);
}
.campaign-art > .icon {
  position: absolute;
  width: 100px;
  height: 100px;
  opacity: 0.07;
  bottom: 8px;
  right: 0;
}
.campaign-content {
  padding: 22px;
  display: grid;
  gap: 14px;
  min-width: 0;
}
.campaign-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.campaign-heading small {
  color: var(--muted);
}
.campaign h3 a {
  color: var(--ink);
}
.campaign-summary {
  font-size: 13px;
  color: var(--muted);
}
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  font-size: 11px;
  font-weight: 650;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
}
.blue {
  background: var(--blue-soft);
  color: var(--brand);
}
.green {
  background: var(--green-soft);
  color: var(--good);
}
.amber {
  background: var(--amber-soft);
  color: var(--amber);
}
.red {
  background: #fff0f1;
  color: #b82340;
}
.purple {
  background: #f1ecff;
  color: #6441b3;
}
.progress {
  height: 7px;
  background: #e9eef5;
  border-radius: 99px;
  overflow: hidden;
}
.progress span {
  display: block;
  height: 100%;
  background: var(--bright);
  border-radius: inherit;
}
.funding-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 7px;
}
.funding-head strong {
  color: var(--brand);
}
.funding-values {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
}
.amount-pair {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.amount-pair > span {
  font-size: 11px;
}
.amount-pair strong {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.amount-pair:last-child {
  text-align: right;
}
.positive {
  color: var(--good);
}
.campaign-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  gap: 12px;
}
.mini-facts {
  display: flex;
  gap: 16px;
}
.mini-facts > span {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mini-facts strong {
  color: var(--ink);
}
.mini-facts .icon {
  color: var(--brand);
  width: 17px;
}
.guide-list {
  display: grid;
  gap: 20px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: steps;
}
.guide-list li {
  display: flex;
  gap: 12px;
  counter-increment: steps;
}
.guide-list li:before {
  content: counter(steps, decimal-leading-zero);
  color: var(--brand);
  background: var(--blue-soft);
  font-weight: 700;
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 11px;
}
.guide-list p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.guide-list strong {
  font-size: 13px;
}
.trust-note {
  display: flex;
  gap: 12px;
  color: var(--good);
  background: var(--green-soft);
  padding: 16px;
  border-radius: 10px;
}
.trust-note p {
  color: #3b6c5b;
  font-size: 12px;
  margin-top: 4px;
}
.preview-links {
  display: grid;
  margin-top: 16px;
  gap: 8px;
}
.preview-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
}
.preview-links a > .icon:last-child {
  margin-left: auto;
  width: 15px;
}
.preview-links a:hover {
  background: var(--blue-soft);
}
.footer {
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 0 36px;
  color: var(--muted);
  font-size: 11px;
}

.empty-state {
  padding: 40px 20px;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
}
.empty-state > .icon {
  width: 32px;
  height: 32px;
  color: var(--muted);
}
.empty-state p {
  max-width: 400px;
}
.breadcrumbs {
  display: flex;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 22px;
  align-items: center;
}
.breadcrumbs .icon {
  width: 16px;
}
.breadcrumbs span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detail-hero {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.detail-banner {
  min-width: 0;
  max-width: 100%;
  height: 230px;
  background: #203246;
  position: relative;
}
.detail-banner img {
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 56%;
}
.detail-banner small {
  position: absolute;
  bottom: 10px;
  right: 14px;
  background: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
}
.creator-line {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Avatar, name, category and funding status cannot share one line on a phone. */
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.creator-line .badge {
  margin-left: auto;
}
@media (max-width: 520px) {
  .creator-line .badge {
    margin-left: 0;
  }
}
.avatar {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
}
.detail-copy {
  padding: 26px;
  display: grid;
  /* A single auto track sizes to the widest child's min-content and can exceed the padded
     box, which then gets clipped by .detail-hero's overflow:hidden. Cap the track instead. */
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
.detail-copy > * {
  min-width: 0;
}
.detail-copy .creator-line {
  margin: 0;
}
.detail-copy p {
  color: var(--muted);
}
.facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.fact-tile {
  padding: 14px;
  background: var(--blue-soft);
  border-radius: 9px;
  display: grid;
  gap: 5px;
  font-size: 11px;
}
.fact-tile .icon {
  color: var(--brand);
}
.fact-tile strong {
  font-size: 15px;
}
.budget-row {
  display: grid;
  grid-template-columns: 1fr 1.3fr auto auto;
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  font-size: 13px;
}
.budget-share{flex:none;min-width:48px;text-align:center;padding:4px 10px;border-radius:8px;background:var(--blue-soft);color:var(--brand);font-weight:700;font-variant-numeric:tabular-nums}
.budget-row:last-child {
  border: 0;
}
.budget-row .progress {
  height: 6px;
}
.budget-total {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.cta-panel {
  padding: 24px;
  position: sticky;
  top: 108px;
  display: grid;
  gap: 18px;
}
.cta-amount {
  font-size: 28px;
  font-weight: 750;
  letter-spacing: -1px;
}
.divider {
  height: 1px;
  background: var(--line);
}
.note {
  background: var(--blue-soft);
  padding: 14px 16px;
  border-radius: 9px;
  font-size: 12px;
  color: #3d5c85;
}
.note.warning {
  background: var(--amber-soft);
  color: var(--amber);
}
.note.success {
  background: var(--green-soft);
  color: var(--good);
}
.trust-list {
  display: grid;
  gap: 14px;
}
.trust-item {
  display: flex;
  gap: 10px;
  font-size: 13px;
}
.trust-item .icon {
  color: var(--good);
  width: 18px;
}
.preview-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  background: #edf3fb;
  color: #435c7b;
  border: 1px dashed #b5c9e3;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 12px;
  margin-bottom: 24px;
}
.preview-banner a {
  font-weight: 600;
}
.role-switch {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.role-switch a[aria-current] {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.dashboard-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 16px;
}
.dashboard-title h1 {
  font-size: 30px;
}
.dashboard-title p {
  color: var(--muted);
  margin-top: 5px;
}
.profile-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}
.icon-button {
  border: 1px solid var(--line);
  background: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  min-width: 44px;
  min-height: 44px;
  color: var(--brand);
}
.welcome {
  background: var(--blue-soft);
  padding: 24px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.welcome h2 {
  color: var(--brand);
  font-size: 24px;
}
.welcome p {
  color: #4f6890;
  margin-top: 6px;
}
.welcome > .icon {
  width: 54px;
  height: 54px;
  color: var(--brand);
}
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}
.metric {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  gap: 14px;
  align-items: center;
  min-width: 0;
  background: white;
  color: var(--ink);
}
.metric .icon-box {
  width: 48px;
  height: 48px;
  background: var(--blue-soft);
  color: var(--brand);
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: none;
}
.metric > div {
  min-width: 0;
}
.metric strong {
  display: block;
  font-size: clamp(15px, 1.35vw, 20px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.6px;
  line-height: 1.4;
  /* A figure must stay whole and readable: never wrapped mid-number ("Rp 6.500." / "000")
     and never truncated ("Rp 6...."). Kept on one line, sized to fit the card instead. */
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: nowrap;
}
.metric .muted {
  font-size: 12px;
}
.metric.green .icon-box {
  background: var(--green-soft);
  color: var(--good);
}
.metric.green strong {
  color: var(--good);
}
.metric.hero-metric {
  background: var(--blue-soft);
  grid-column: 1/-1;
}
.virtual-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f1efff;
  padding: 22px;
  border: 1px solid #e5dfff;
  border-radius: 12px;
  gap: 12px;
}
.virtual-account small {
  color: #605989;
  display: block;
}
.virtual-account strong {
  font-size: 22px;
  letter-spacing: 2px;
}
.action-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
/* The primary action earns more width than the escape hatch beside it. */
.action-row .btn {
  flex: 1 1 auto;
}
.action-row .btn.secondary {
  flex: 0 1 auto;
}
.list-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.list-row:last-child {
  border: 0;
}
.list-row > .row-main {
  flex: 1;
  min-width: 0;
}
.list-row p {
  font-size: 12px;
  color: var(--muted);
  margin: 3px 0;
}
.list-row > .icon {
  width: 16px;
  color: var(--muted);
}
.list-row .amount {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}
.list-row .badge {
  margin-top: 5px;
}
.portfolio-card {
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 18px;
  margin-top: 12px;
  color: var(--ink);
  display: block;
}
.portfolio-card:hover {
  border-color: #93baf3;
}
.portfolio-card .creator-line {
  margin-bottom: 12px;
}
.portfolio-card .creator-line > .icon {
  margin-left: auto;
  width: 16px;
}
.portfolio-card .funding-values {
  padding-left: 58px;
}
.tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
  overflow-x: auto;
}
.tabs a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  color: var(--muted);
  font-size: 13px;
  font-weight: 550;
}
.tabs a[aria-current] {
  border-color: var(--brand);
  color: var(--brand);
}
.tabs .icon {
  width: 17px;
}
.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.quick-link {
  border: 1px solid var(--line);
  padding: 16px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink);
}
.quick-link > .icon {
  color: var(--brand);
}
.quick-link > .badge {
  margin-left: auto;
}
.quick-link:hover {
  background: var(--blue-soft);
}
.review-card {
  border: 1px solid var(--line);
  padding: 20px;
  border-radius: 12px;
  display: grid;
  gap: 16px;
}
.review-card .creator-line {
  margin: 0;
}
.review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}
.timeline li {
  position: relative;
  padding: 0 0 28px 28px;
  border-left: 2px solid #dce8f8;
  margin-left: 6px;
}
.timeline li:before {
  content: "";
  position: absolute;
  left: -6px;
  top: 5px;
  width: 10px;
  height: 10px;
  background: #b3c5e0;
  border: 2px solid white;
  border-radius: 50%;
}
.timeline li.done:before {
  background: var(--brand);
}
.timeline li:last-child {
  border-color: transparent;
  padding-bottom: 0;
}
.timeline strong {
  font-size: 13px;
}
.timeline p {
  font-size: 12px;
  color: var(--muted);
}
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 12px 20px;
  background: var(--ink);
  color: white;
  border-radius: 10px;
  box-shadow: 0 4px 24px #15244830;
  z-index: 100;
}
.inline-actions {
  display: flex;
  gap: 10px;
}
.inline-actions .btn {
  font-size: 12px;
  flex: 1;
  padding: 10px;
}
.details-box summary {
  cursor: pointer;
  font-weight: 650;
  padding: 14px 0;
  color: var(--brand);
}
.details-box[open] summary {
  margin-bottom: 12px;
}
.payment-options {
  display: grid;
  gap: 10px;
}
.payment-option {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  color: var(--muted);
}
[hidden] {
  display: none !important;
}
@media (min-width: 1100px) {
  .metrics.admin-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .admin-metrics .metric {
    align-items: flex-start;
    flex-direction: column;
  }
  .dashboard-layout {
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
  }
}
@media (max-width: 1023px) {
  .brand-caption {
    display: none;
  }
  .desktop-nav {
    gap: 18px;
  }
  .content-layout,
  .detail {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 18px;
  }
  .campaign {
    grid-template-columns: 180px minmax(0, 1fr);
  }
  .campaign-art {
    display: flex;
    min-height: 100%;
  }
  .hero-copy {
    padding: 28px;
  }
  .pad {
    padding: 20px;
  }
  .mini-facts {
    gap: 10px;
  }
  .budget-row {
    grid-template-columns: 1fr auto;
  }
  .budget-row .progress {
    display: none;
  }
}
@media (max-width: 767px) {
  .shell {
    width: calc(100% - 32px);
  }
  main {
    padding: 22px 0 32px;
  }
  .topbar {
    height: 68px;
    gap: 12px;
  }
  .header-link {
    font-size: 12px;
    padding: 7px 10px;
  }
  .desktop-nav {
    display: none;
  }
  .bottom-nav {
    display: flex;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid var(--line);
    padding: 9px 8px calc(9px + env(safe-area-inset-bottom));
    z-index: 30;
    gap: 4px;
  }
  .bottom-nav a {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 10px;
    min-height: 44px;
    color: var(--muted);
  }
  .bottom-nav a[aria-current] {
    color: var(--brand);
    font-weight: 700;
  }
  .bottom-nav a[aria-current] .icon {
    stroke-width: 2.3;
  }
  .bottom-nav .icon {
    width: 21px;
    height: 21px;
  }
  /* The bottom nav is fixed and sits on top of the page, so anything it can render over
     (every page below 767px) needs room reserved at the bottom or its last section is
     hidden underneath — same reasoning as body:has(.invest-bar) .footer further down.
     Excludes invest-bar pages: .bottom-nav is display:none there (still in the DOM, so
     :has(.bottom-nav) alone would match) and .footer already reserves its own room. */
  body:has(.bottom-nav):not(:has(.invest-bar)) main {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }
  .hero {
    grid-template-columns: 1fr;
    border-radius: 14px;
    margin-bottom: 24px;
  }
  .hero-copy {
    padding: 26px 24px;
  }
  .hero h1 {
    font-size: 34px;
  }
  .hero-visual {
    display: block;
    position: relative;
    height: 190px;
    min-height: 190px;
    width: 100%;
  }
  .hero-caption {
    bottom: 12px;
    left: 12px;
    right: 12px;
    padding: 10px 14px;
    gap: 10px;
  }
  .hero-caption .icon {
    width: 20px;
    height: 20px;
  }
  .hero-caption div strong {
    font-size: 12px;
    display: block;
  }
  .hero-caption div small {
    font-size: 10px;
  }
  .hero p {
    font-size: 13px;
  }
  .content-layout,
  .detail {
    /* 1fr means minmax(auto, 1fr): the track cannot shrink below its content's min-content
       and then overflows the container. Cap the minimum explicitly. */
    grid-template-columns: minmax(0, 1fr);
  }
  .campaign {
    grid-template-columns: 1fr;
  }
  .campaign-art {
    display: block;
    width: 100%;
    height: 200px;
    max-height: 220px;
  }
  .campaign-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .campaign-content {
    padding: 20px;
  }
  .content-layout > aside {
    display: grid;
    gap: 18px;
  }
  .section-head {
    gap: 8px;
  }
  .section-head h2 {
    font-size: 18px;
  }
  .section-head small {
    font-size: 11px;
  }
  .filters {
    gap: 8px;
  }
  .filters select {
    font-size: 12px;
    max-width: 43%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .input {
    font-size: 16px;
  }
  .cta-panel {
    position: static;
  }
  .footer {
    flex-wrap: wrap;
    gap: 12px;
    padding: 24px 0 110px;
  }
  .footer > span:last-child {
    display: none;
  }
  .footer > span {
    font-size: 10px;
  }
  .toast {
    bottom: 90px;
    font-size: 12px;
  }
  .preview-banner {
    align-items: flex-start;
    flex-direction: column;
    padding: 12px;
    font-size: 11px;
    gap: 6px;
  }
  .dashboard-title {
    margin-bottom: 20px;
  }
  .dashboard-title h1 {
    font-size: 26px;
    letter-spacing: -0.8px;
  }
  .dashboard-title p {
    font-size: 12px;
  }
  .profile-controls {
    gap: 8px;
  }
  .profile-controls .avatar {
    display: flex;
    width: 36px;
    height: 36px;
    font-size: 13px;
    flex-shrink: 0;
  }
  .welcome {
    padding: 20px;
  }
  .welcome h2 {
    font-size: 22px;
  }
  .welcome p {
    font-size: 12px;
  }
  .welcome > .icon {
    width: 38px;
    height: 38px;
  }
  .metrics {
    gap: 10px;
  }
  .metric {
    padding: 16px;
    gap: 10px;
    flex-direction: column;
    align-items: flex-start;
  }
  .metric strong {
    font-size: 20px;
  }
  .metric .icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  .metric.hero-metric {
    flex-direction: row;
    align-items: center;
  }
  .metric.hero-metric .icon-box {
    width: 48px;
    height: 48px;
  }
  .metric.hero-metric strong {
    font-size: 28px;
  }
  .virtual-account {
    padding: 18px;
  }
  .virtual-account strong {
    font-size: 19px;
    letter-spacing: 1px;
  }
  .virtual-account small {
    font-size: 11px;
  }
  .action-row {
    flex-direction: column;
  }
  .list-row {
    gap: 10px;
  }
  .list-row .amount {
    font-size: 13px;
  }
  .list-row strong {
    font-size: 13px;
  }
  .portfolio-card {
    padding: 15px;
  }
  .portfolio-card .funding-values {
    padding-left: 0;
  }
  .quick-grid,
  .review-grid {
    grid-template-columns: 1fr;
  }
  .detail-banner {
    height: 190px;
  }
  .detail-copy {
    padding: 20px;
  }
  .detail-copy h1 {
    font-size: 26px;
  }
  .facts-grid {
    gap: 8px;
  }
  .fact-tile {
    padding: 12px 8px;
    font-size: 10px;
  }
  .fact-tile strong {
    font-size: 12px;
  }
  .tabs {
    gap: 18px;
  }
  .pad {
    padding: 20px;
  }
  .creator-line .badge {
    font-size: 10px;
  }
  .budget-row {
    font-size: 12px;
    gap: 10px;
  }
  .budget-total {
    font-size: 12px;
  }
  .breadcrumbs {
    font-size: 11px;
  }
  .row-main {
    overflow-wrap: anywhere;
  }
  .amount-pair strong {
    font-size: 14px;
  }
}
@media (max-width: 359px) {
  .shell {
    width: calc(100% - 24px);
  }
  .hero-copy {
    padding: 22px 18px;
  }
  .hero h1 {
    font-size: 30px;
  }
  .campaign-content,
  .pad,
  .detail-copy {
    padding: 16px;
  }
  .campaign-heading {
    flex-wrap: wrap;
  }
  .campaign-bottom {
    flex-wrap: wrap;
  }
  .metric {
    padding: 12px;
  }
  .metric strong {
    font-size: 17px;
  }
  .amount-pair strong {
    font-size: 12px;
  }
  .list-row {
    flex-wrap: wrap;
  }
  .list-row .amount {
    margin-left: auto;
  }
  .tabs {
    gap: 14px;
  }
  .virtual-account strong {
    font-size: 17px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .header-link {
    display: none;
  }
  .desktop-nav {
    gap: 16px;
  }
  .desktop-nav a {
    font-size: 13px;
  }
  .topbar {
    gap: 16px;
  }
}
@media (max-width: 479px) {
  /* Only rows that actually carry an avatar get the avatar column. Applying it to every
     row left an empty 36px gutter and pushed trailing metadata into it. */
  .list-row:has(> .avatar) {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px 12px;
  }
  .list-row > .avatar {
    width: 36px;
    height: 36px;
    grid-column: 1;
    grid-row: 1;
  }
  .list-row:has(> .avatar) > .row-main {
    grid-column: 2;
  }
  .list-row:has(> .avatar) > div:not(.row-main),
  .list-row:has(> .avatar) > .amount,
  .list-row:has(> .avatar) > strong {
    grid-column: 2;
    text-align: left;
  }
  .list-row > .icon:last-child {
    display: none;
  }
  .list-row .row-main > strong:last-child {
    white-space: nowrap;
  }
  .metric strong {
    overflow-wrap: normal;
  }
}
@media (max-width: 359px) {
  .metrics {
    grid-template-columns: 1fr;
  }
  .metric {
    flex-direction: row;
    align-items: center;
    padding: 16px;
  }
  .metric strong {
    font-size: 22px;
  }
  .metric .icon-box {
    width: 42px;
    height: 42px;
  }
  .metric.hero-metric strong {
    font-size: 25px;
  }
}

/* Authenticated workspaces use the same typography and blue/white primitives. */
.auth-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:960px;margin:48px auto}.dashboard-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;margin-bottom:48px}.dashboard-content{min-width:0}.side-nav{display:flex;flex-direction:column;gap:4px;position:sticky;top:96px}.side-nav a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:8px;color:var(--muted,#53657a)}.side-nav a[aria-current=page]{background:#eaf3ff;color:#075bbb;font-weight:700}.side-nav svg{width:20px;height:20px;flex:none}.payment-card{padding:20px 0;border-bottom:1px solid var(--line,#e1e8ef)}.budget-input{display:grid;grid-template-columns:1fr 1fr;gap:16px}.auth-layout .welcome{border-radius:16px;padding:32px}.dashboard-content .metrics{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.form-error{white-space:normal}.payment-card small{overflow-wrap:anywhere}.details-box summary p{margin:8px 0}.history-list{padding-left:24px}.history-list li{padding:8px}.dashboard-content .list-row{flex-wrap:wrap}.dashboard-content .amount-pair{gap:16px}.dashboard-content h2{font-size:20px}.dashboard-content h3{font-size:16px}
@media(max-width:900px){.dashboard-layout{grid-template-columns:1fr}.side-nav{position:static;flex-direction:row;overflow-x:auto;padding-bottom:8px}.side-nav a{white-space:nowrap}.dashboard-menu{min-width:0}.auth-layout{grid-template-columns:1fr}.auth-layout aside{display:none}}
@media(max-width:520px){.budget-input{grid-template-columns:1fr}.dashboard-content .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.auth-layout{margin:24px auto}.dashboard-content .amount-pair{align-items:flex-start}.dashboard-content .amount-pair strong{white-space:nowrap}}
@media(max-width:767px){.dashboard-menu{display:none}}
.chip-row{display:flex;gap:4px;overflow-x:auto;margin-bottom:16px;border-bottom:1px solid var(--line);scrollbar-width:none}
.chip-row::-webkit-scrollbar{display:none}
/* Category tabs: icon beside label, active marked by colour plus an underline. */
.chip{flex:none;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:0;background:none;color:var(--ink);font-size:13px;font-weight:600;white-space:nowrap;min-height:44px;border-bottom:3px solid transparent;margin-bottom:-1px}
.chip .icon{width:18px;height:18px;color:var(--muted)}
.chip:hover{color:var(--azure)}
.chip:hover .icon{color:var(--azure)}
.chip.is-active{color:var(--azure);border-bottom-color:var(--azure)}
.chip.is-active .icon{color:var(--azure)}
.campaign-art{padding:0;overflow:hidden}
.campaign-art img{width:100%;height:100%;object-fit:cover;display:block}
.campaign-art.is-placeholder{padding:24px}
.creator-meta{color:var(--muted);display:block;margin-top:2px}
.campaign-title-line{font-weight:650}
.campaign-title-line a{color:var(--ink)}
.campaign-title-line a:hover{color:var(--brand)}
.btn.compact{min-height:38px;padding:8px 14px;font-size:13px}
.funding-values{display:flex;flex-wrap:wrap;gap:18px}
.track-record{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.track-tile{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;gap:10px;align-items:center;min-width:0}
.track-tile strong{display:block;font-size:17px;white-space:nowrap}
.track-tile small{color:var(--muted)}
.track-tile .icon{color:var(--brand);flex:none}
@media(max-width:767px){.campaign-art{height:200px;min-height:180px;width:100%;display:flex}.campaign-art img{height:100%;width:100%;object-fit:cover}.campaign-art.is-placeholder{min-height:160px}.chip-row{margin-inline:0}}
.va-card{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:#f4f2ff;border-color:#ddd6fb}
.va-number{font-size:clamp(20px,2.4vw,26px);letter-spacing:1.5px;font-variant-numeric:tabular-nums;color:#3d2f8f;white-space:nowrap}
.metrics.hero-first{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.metrics.hero-first .hero-metric{grid-column:1/-1;background:var(--blue-soft);border-color:#d8e8fb}
.metrics.hero-first .hero-metric strong{font-size:clamp(24px,3vw,32px)}
.metrics.hero-first .hero-metric .icon-box{background:#fff}
@media(max-width:767px){.action-row .full-mobile{width:100%}.va-card{align-items:flex-start}}
.portfolio-row summary{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.portfolio-head{display:flex;align-items:center;gap:12px;min-width:0}
.portfolio-head .avatar{width:44px;height:44px;font-size:15px;flex:none}
.portfolio-figures{display:flex;gap:24px;flex-wrap:wrap}
.portfolio-figures .amount-pair{display:grid;gap:2px}
.portfolio-figures span{font-size:12px;color:var(--muted)}
.positive{color:var(--good)}
@media(max-width:520px){.portfolio-figures{gap:16px;width:100%}}
.payout-recipients{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.payout-recipients li{border:1px solid var(--line);border-radius:10px;padding:12px;display:grid;gap:4px}
.payout-recipients small{color:var(--muted)}
.payout-recipients .missing-account{color:#9a1d1d;font-weight:600}
.admin-metrics .hero-metric{grid-column:1/-1;background:var(--blue-soft);border-color:#d8e8fb}
.admin-metrics .hero-metric .icon-box{background:#fff}
.admin-metrics .hero-metric strong{font-size:clamp(20px,2.2vw,28px)}
/* Scannable destination tiles: icon, label, and a count that reads differently when work waits. */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.tile{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);transition:border-color .15s,background .15s}
.tile:hover{border-color:#93baf3;background:var(--blue-soft)}
.tile .icon-box{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--blue-soft);color:var(--brand)}
.tile .icon-box.green{background:var(--green-soft);color:var(--good)}
.tile .icon-box.amber{background:var(--amber-soft);color:var(--amber)}
.tile-body{flex:1;min-width:0;display:grid;gap:2px}
.tile-body strong{font-size:14px;line-height:1.35}
.tile-body small{color:var(--muted);font-size:12px}
.tile > .icon{color:var(--muted);flex:none;width:18px}
.tile-count{flex:none;min-width:28px;height:28px;padding:0 8px;border-radius:999px;display:grid;place-items:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;background:var(--brand);color:#fff}
.tile-count.is-zero{background:#eef2f7;color:var(--muted)}
.tile.has-pending{border-color:#bcd8fb}
/* The row's trailing metadata must not strand below the body text on narrow screens. */
.list-row > .row-main{flex:1 1 220px}
.list-row > small{margin-left:auto;white-space:nowrap;color:var(--muted)}
@media(max-width:520px){.list-row > small{margin-left:0;flex-basis:100%}}
.page-heading{margin-bottom:20px}
.page-heading h1{margin-top:4px}
.tile-grid{grid-template-columns:repeat(auto-fit,minmax(208px,1fr))}
/* The wide emphasis card has horizontal room to spare: keep icon and figure on one line. */
.admin-metrics .hero-metric{flex-direction:row;align-items:center;gap:18px}
.admin-metrics .hero-metric .icon-box{width:52px;height:52px}
/* Top-aligned so a one-line and a two-line label still share the same baseline. */
.tile{align-items:flex-start}
.tile .icon-box,.tile .tile-count,.tile > .icon{margin-top:1px}
/* No trailing rule or dead space under the last item in a panel. */
.panel .payment-card:last-child{border-bottom:0;padding-bottom:0}
.panel .list-row:last-of-type{border-bottom:0;padding-bottom:0}
.campaign-row-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* A currency figure needs ~200px of card. Only widen above the phone breakpoint so the
   two-up mobile layout survives. */
@media(min-width:768px){.metrics.hero-first{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
.metric > div{min-width:0;overflow:hidden}
/* Touch targets: discrete controls reach 44px on pointer-coarse screens. */
@media(max-width:767px){
  .header-link{min-height:44px;display:inline-flex;align-items:center}
  .chip{min-height:44px}
  .btn.compact{min-height:44px}
  .text-link{min-height:44px;align-items:center}
  .filters .search-field{flex:1 1 100%}
}
@media(max-width:767px){
  .brand{min-height:44px}
  /* Card titles are links too, not just the "Lihat detail" button beside them. */
  .campaign-heading h3 a,.campaign-title-line a{display:inline-block;padding-block:11px}
  .campaign-heading h3,.campaign-title-line{margin-block:-8px}
}
/* Brand mark. The raster is 209x40; rendering it smaller keeps it sharp on 2x screens. */
.brand-mark{width:118px;height:auto;display:block;flex:none}
.footer-mark{width:96px;height:auto;display:block}
@media(max-width:767px){.brand-mark{width:104px}}
/* Marketplace app bar. Azure sampled from materi/platform/uiux-main.png (#00a6fd). */
.site-header.brand-bar{background:var(--azure);border-bottom-color:transparent}
.brand-bar .brand{color:#fff}
.brand-bar .brand-caption{color:rgba(255,255,255,.92);border-left-color:rgba(255,255,255,.35)}
.brand-bar .desktop-nav a{color:rgba(255,255,255,.86)}
.brand-bar .desktop-nav a:hover{color:#fff}
.brand-bar .desktop-nav a[aria-current]{color:#fff;border-color:#fff}
.brand-bar .header-link{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.12)}
.brand-bar .header-link:hover{background:rgba(255,255,255,.22)}
@media(max-width:767px){
  /* Back-navigation and the auth page's sign-in link are the only way out of those screens. */
  .breadcrumbs a{display:inline-block;padding-block:12px}
  .auth-alt a{display:inline-block;padding-block:12px}
}
/* Virtual accounts: one row per bank, since a creator now holds several. */
.va-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.va-head .icon{color:var(--brand);flex:none;margin-top:2px}
.va-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.va-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fbfcfe}
.va-bank{flex:none;min-width:70px;font-size:11px;font-weight:750;letter-spacing:1px;color:var(--muted);text-transform:uppercase}
.va-row .va-number{font-size:clamp(16px,2vw,20px);letter-spacing:1.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.va-row .btn{margin-left:auto}
/* Sticky invest bar. The decision lives at the bottom of a long page on a phone. */
.invest-bar{display:none}
@media(max-width:1023px){
  .invest-bar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:31;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);
    border-top:1px solid var(--line)}
  .invest-bar .btn{flex:1}
  .invest-bar .btn.secondary{flex:0 0 auto}
  .detail .cta-panel{padding-bottom:8px}
  body:has(.invest-bar) .footer{padding-bottom:150px}
}
@media(max-width:767px){body:has(.invest-bar) .bottom-nav{display:none}}
@media(max-width:520px){
  /* Bank and badges on one line, the number and its copy button on the next. */
  .va-row{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center}
  .va-bank{grid-column:1;min-width:0}
  .va-row .badge{grid-column:2;justify-self:end}
  .va-row .va-number{grid-column:1;font-size:18px;letter-spacing:1px}
  .va-row .btn{grid-column:2;margin-left:0}
}
/* Groups two near-identical forms (provider action vs. manual fallback) with a clear label
   between them, so an operator never has to guess which button a field belongs to. */
.integration-block{padding-top:16px;border-top:1px solid var(--line)}
.integration-block:first-of-type{border-top:0;padding-top:0}
.integration-label{display:block;font-size:11px;font-weight:750;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.integration-divider{display:flex;align-items:center;gap:10px;margin:4px 0;color:var(--muted);font-size:12px}
.integration-divider::before,.integration-divider::after{content:"";flex:1;height:1px;background:var(--line)}
/* Credential rows: label/status/hint on the left, a masked set-form and a clear-form on the
   right. Two forms per row need visual grouping without looking like one combined form. */
.credential-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.credential-form{flex:1 1 220px;min-width:200px;display:flex;gap:8px;align-items:flex-end}
.credential-form .field{flex:1;margin-bottom:0}
.credential-form.secondary{flex:0 0 auto}
.credential-form .btn{flex:none}
@media(max-width:600px){.credential-form{flex-direction:column;align-items:stretch}}
/* Manual reconcile form for an unmatched VA deposit: select + button on one line where room
   allows, stacked on narrow screens like any other form-stack. */
.reconcile-form{margin-top:10px;display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.reconcile-form .field{flex:1 1 220px;margin-bottom:0}
.reconcile-form .btn{flex:none}

/* Pagination controls */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 24px 0 12px;
  flex-wrap: wrap;
}
.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
}
.page-link:hover:not(.disabled):not(.active) {
  background: #f8fafc;
  border-color: #6366f1;
  color: #6366f1;
}
.page-link.active {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
  cursor: default;
}
.page-link.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.page-ellipsis {
  padding: 0 4px;
  color: var(--muted);
  font-weight: bold;
}

/* ROI Projection Table & Data Table Component */
.roi-table-container {
  margin: 1.25rem 0;
  border-radius: 12px;
  border: 1px solid var(--line, #e2e8f0);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface, #ffffff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  min-width: 0;
  max-width: 100%;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.4;
}
.data-table thead {
  background: #f8fafc;
  border-bottom: 2px solid #e2e8f0;
}
.data-table th {
  padding: 0.75rem 0.85rem;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  white-space: normal;
}
.data-table td {
  padding: 0.85rem;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: #334155;
}
.data-table tbody tr:last-child td {
  border-bottom: none;
}
.data-table tbody tr:hover td {
  background-color: #f8fafc;
}
.data-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.data-table th.num {
  text-align: right;
}
.data-table .highlight {
  background-color: rgba(16, 185, 129, 0.03);
}
.data-table tbody tr:hover .highlight {
  background-color: rgba(16, 185, 129, 0.06);
}
.roi-gain {
  color: #059669;
  font-weight: 700;
}
.roi-gain-total {
  color: #047857;
  font-weight: 800;
  font-size: 0.95rem;
}
.roi-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}
.roi-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  background: #f1f5f9;
  font-size: 0.8rem;
  color: #475569;
  font-weight: 500;
  border: 1px solid #e2e8f0;
}
.roi-chip strong {
  color: #0f172a;
}
.badge-scenario {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-scenario .scenario-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.badge-scenario.conservative {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
}
.badge-scenario.conservative .scenario-dot {
  background: #64748b;
}
.badge-scenario.moderate {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.badge-scenario.moderate .scenario-dot {
  background: #10b981;
}
.badge-scenario.aggressive {
  background: #f5f3ff;
  color: #5b21b6;
  border: 1px solid #ddd6fe;
}
.badge-scenario.aggressive .scenario-dot {
  background: #8b5cf6;
}


.evidence-pre {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow-y: auto;
}

/* Panduan kredensial — dialog bukti-panduan (settings/credentials) */
.guide-dialog {
  width: min(880px, calc(100vw - 32px));
  max-height: min(82vh, 900px);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0;
  background: var(--bg, #ffffff);
  color: inherit;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}
.guide-dialog::backdrop {
  background: rgba(9, 12, 18, 0.55);
}
.guide-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px 12px;
  border-bottom: 1px solid var(--line);
}
.guide-dialog-head h2 {
  margin: 0 0 4px;
  font-size: 18px;
}
.guide-dialog-body {
  padding: 16px 22px 22px;
  max-height: min(64vh, 720px);
  overflow-y: auto;
}
.guide-steps {
  margin: 8px 0 4px;
  padding-left: 22px;
}
.guide-steps li {
  margin-bottom: 8px;
  line-height: 1.5;
}
.guide-steps code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 5px;
  padding: 1px 5px;
  word-break: break-all;
}