:root {
  --white: #FFFFFF;
  --navy-deepest: #071426;
  --navy-deep: #102A43;
  --navy: #102A43;
  --gold: #BA8C21;
  --gold-light: #D4A832;
  --gold-pale: rgba(186,140,33,0.08);
  --gold-border: rgba(186,140,33,0.35);
  --gold-text: #8A6A19;
  --off-white: #F7F8FA;
  --body-text: #263238;
  --border-gray: #E5E7EB;
  --error-text: #B6382F;
  --navy-mid: #F7F8FA;
  --navy-card: #FFFFFF;
  --navy-lift: #E5E7EB;
  --navy-border: #E5E7EB;
  --ivory: #071426;
  --ivory-muted: #263238;
  --ivory-faint: #6B7785;
  --black: #000000;
  --font-display: 'Cormorant Garamond',Georgia,serif;
  --font-label: 'Cinzel',serif;
  --font-body: 'Lato',sans-serif;
  --nav-h: 72px;
  --max-w: 1200px;
  --ease-fast: 0.18s ease;
  --ease-med: 0.32s ease;
  --ease-slow: 0.6s cubic-bezier(0.16,1,0.3,1);
  --shadow-sm: 0 1px 3px rgba(7,20,38,0.07),0 1px 2px rgba(7,20,38,0.05);
  --shadow-md: 0 10px 28px rgba(7,20,38,0.09)
}
body {
  background: var(--white);
  overflow-x: hidden
}
:where(#ibla-resources-root,#ibla-resources-root *,#ibla-resources-root ::before,#ibla-resources-root ::after) {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}
#ibla-resources-root {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--body-text);
  line-height: 1.6;
  width: 100%;
  overflow-x: hidden
}
:where(#ibla-resources-root) a {
  text-decoration: none;
  color: inherit
}
:where(#ibla-resources-root) ul {
  list-style: none;
  margin: 0;
  padding: 0
}
#ibla-resources-root ::selection {
  background: var(--gold-pale);
  color: var(--navy-deepest)
}
#ibla-resources-root [tabindex]:focus-visible,
#ibla-resources-root a:focus-visible,
#ibla-resources-root button:focus-visible,
#ibla-resources-root input:focus-visible,
#ibla-resources-root select:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 3px
}
#ibla-resources-root .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0
}
html[data-lang=en] .lang-en {
  display: inline
}
html[data-lang=en] .lang-id {
  display: none
}
html[data-lang=id] .lang-en {
  display: none
}
html[data-lang=id] .lang-id {
  display: inline
}
#nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 900;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: var(--white);
  border-bottom: 1px solid var(--border-gray);
  transition: box-shadow var(--ease-med)
}
#nav.scrolled {
  box-shadow: var(--shadow-sm)
}
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 40px
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%
}
.nav-logo {
  max-height: 44px;
  max-width: 160px;
  width: auto;
  object-fit: contain
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px
}
.nav-link {
  font-family: var(--font-label);
  font-size: .65rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy-deep);
  position: relative;
  transition: color var(--ease-fast)
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width var(--ease-med)
}
.nav-link:hover {
  color: var(--gold-text)
}
.nav-link:hover::after {
  width: 100%
}
.nav-link.active {
  color: var(--gold-text)
}
.nav-link.active::after {
  width: 100%
}
#ibla-resources-root a.nav-cta,
.nav-cta {
  font-family: var(--font-label);
  font-size: .63rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--navy-deepest);
  color: var(--white);
  padding: 10px 22px;
  transition: background var(--ease-fast),color var(--ease-fast),transform var(--ease-fast)
}
#ibla-resources-root a.nav-cta:hover,
.nav-cta:hover {
  background: var(--gold);
  color: var(--navy-deepest);
  transform: translateY(-1px)
}
.lang-toggle {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-gray);
  overflow: hidden
}
.lang-btn {
  font-family: var(--font-label);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 7px 13px;
  background: 0 0;
  border: none;
  color: var(--ivory-faint);
  cursor: pointer;
  transition: background var(--ease-fast),color var(--ease-fast)
}
.lang-btn:hover {
  color: var(--navy-deepest);
  background: var(--off-white)
}
.lang-btn[aria-pressed=true] {
  background: var(--gold);
  color: var(--navy-deepest)
}
.lang-sep {
  width: 1px;
  height: 26px;
  background: var(--border-gray);
  flex-shrink: 0
}
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: 0 0;
  border: none;
  cursor: pointer;
  padding: 6px
}
.hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--navy-deepest);
  transition: all var(--ease-fast)
}
.hamburger.open span:first-child {
  transform: translateY(6.5px) rotate(45deg)
}
.hamburger.open span:nth-child(2) {
  opacity: 0
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg)
}
@media (max-width:960px) {
  .hamburger {
    display: flex
  }
  .nav-links {
    display: none;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    padding: 28px 40px 36px;
    gap: 26px;
    border-top: 1px solid var(--border-gray);
    box-shadow: var(--shadow-sm)
  }
  .nav-links.open {
    display: flex
  }
}
.page-hero {
  padding-top: calc(var(--nav-h) + 72px);
  padding-bottom: 64px;
  background: var(--white);
  position: relative;
  overflow: hidden
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle,rgba(16,42,67,.06) 1px,transparent 1px);
  background-size: 42px 42px;
  pointer-events: none
}
.page-hero::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse,rgba(186,140,33,.05) 0,transparent 65%);
  pointer-events: none
}
.page-hero-inner {
  position: relative;
  z-index: 1;
  text-align: center
}
.eyebrow {
  font-family: var(--font-label);
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-text);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  justify-content: center
}
.eyebrow::after,
.eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--gold)
}
.page-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--navy-deepest);
  margin-bottom: 18px
}
.page-title em {
  font-style: italic;
  color: var(--gold-text)
}
.page-sub {
  font-size: 1rem;
  color: var(--body-text);
  line-height: 1.8;
  max-width: 540px;
  margin: 0 auto 36px
}
.filter-groups {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px
}
.filter-groups .filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start
}
.filter-groups .filter-label {
  font-family: var(--font-label);
  font-size: .56rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ivory-faint)
}
.filter-groups select {
  background: var(--white);
  border: 1px solid var(--border-gray);
  color: var(--navy-deep);
  font-family: var(--font-label);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 10px 32px 10px 14px;
  min-width: 168px;
  outline: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--ease-fast);
  background-image: linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position: calc(100% - 16px) center,calc(100% - 11px) center;
  background-size: 5px 5px,5px 5px;
  background-repeat: no-repeat
}
.filter-groups select:focus {
  border-color: var(--gold)
}
.filter-groups select.is-active {
  border-color: var(--gold);
  color: var(--gold-text);
  background-color: var(--gold-pale)
}
@media (max-width:700px) {
  .filter-groups {
    flex-direction: column;
    align-items: stretch
  }
  .filter-groups .filter-field {
    width: 100%
  }
  .filter-groups select {
    width: 100%;
    min-width: 0
  }
}
.stats-band {
  background: var(--off-white);
  border-top: 1px solid var(--border-gray);
  border-bottom: 1px solid var(--border-gray);
  padding: 28px 0
}
.stats-row {
  display: grid;
  grid-template-columns: repeat(4,1fr)
}
@media (max-width:600px) {
  .stats-row {
    grid-template-columns: repeat(2,1fr)
  }
}
.stat-item {
  text-align: center;
  padding: 12px 20px;
  border-right: 1px solid var(--border-gray)
}
.stat-item:last-child {
  border-right: none
}
.stat-n {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--gold-text);
  line-height: 1
}
.stat-l {
  font-family: var(--font-label);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ivory-faint);
  margin-top: 5px
}
.resources-section {
  padding: 72px 0 96px;
  background: var(--off-white);
  position: relative
}
.resources-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,transparent,var(--border-gray),transparent)
}
.toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 44px;
  flex-wrap: wrap
}
.search-wrap {
  position: relative;
  flex: 1;
  min-width: 220px
}
.search-wrap input {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border-gray);
  color: var(--navy-deepest);
  font-family: var(--font-body);
  font-size: .9rem;
  padding: 12px 16px 12px 42px;
  outline: 0;
  transition: border-color var(--ease-fast);
  border-radius: 0
}
.search-wrap input::placeholder {
  color: var(--ivory-faint)
}
.search-wrap input:focus {
  border-color: var(--gold)
}
.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ivory-faint);
  font-size: .9rem;
  pointer-events: none
}
.sort-wrap {
  position: relative
}
.sort-wrap select {
  background: var(--white);
  border: 1px solid var(--border-gray);
  color: var(--navy-deep);
  font-family: var(--font-label);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 12px 36px 12px 16px;
  outline: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--ease-fast);
  border-radius: 0
}
.sort-wrap select:focus {
  border-color: var(--gold)
}
.sort-wrap::after {
  content: '▾';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  pointer-events: none;
  font-size: .8rem
}
.sort-wrap select option {
  background: var(--white)
}
.resource-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px
}
@media (max-width:900px) {
  .resource-grid {
    grid-template-columns: repeat(2,1fr)
  }
}
@media (max-width:580px) {
  .resource-grid {
    grid-template-columns: 1fr
  }
}
.resource-card {
  background: var(--white);
  border: 1px solid var(--border-gray);
  box-shadow: var(--shadow-sm);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--ease-med),transform var(--ease-med),box-shadow var(--ease-med);
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  transform: translateY(20px);
  animation: cardIn var(--ease-slow) forwards
}
.resource-card:hover {
  border-color: var(--gold-border);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md)
}
.resource-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ease-med)
}
.resource-card:hover::before {
  transform: scaleX(1)
}
@keyframes cardIn {
  to {
    opacity: 1;
    transform: translateY(0)
  }
}
.card-badges {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px
}
.card-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-label);
  font-size: .56rem;
  letter-spacing: .14em;
  text-transform: uppercase
}
.card-type-badge .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0
}
.badge-econ .dot {
  background: #4a9eff
}
.badge-econ {
  color: #1857a3
}
.badge-finmath .dot {
  background: #a78bfa
}
.badge-finmath {
  color: #6644b8
}
.badge-acct .dot {
  background: #34d399
}
.badge-acct {
  color: #08794a
}
.badge-general .dot {
  background: var(--gold)
}
.badge-general {
  color: var(--gold-text)
}
.badge-neutral .dot {
  background: var(--ivory-faint)
}
.badge-neutral {
  color: var(--ivory-faint)
}
.card-icon {
  font-size: 1.8rem;
  margin-bottom: 14px
}
.card-title {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--navy-deepest);
  line-height: 1.3;
  margin-bottom: 8px
}
.card-metaline {
  font-family: var(--font-label);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 12px
}
.card-desc {
  font-size: .84rem;
  color: var(--body-text);
  line-height: 1.7;
  margin-bottom: 20px;
  flex: 1
}
.card-actions {
  display: flex;
  gap: 10px
}
.btn-dl {
  flex: 1;
  text-align: center;
  display: inline-block;
  text-decoration: none;
  font-family: var(--font-label);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--navy-deepest);
  color: var(--white);
  padding: 10px 14px;
  border: none;
  cursor: pointer;
  transition: background var(--ease-fast),color var(--ease-fast);
  white-space: nowrap
}
.btn-dl:hover {
  background: var(--gold);
  color: var(--navy-deepest)
}
.ibla-resources-fallback {
  margin: 0 0 40px
}
.ibla-resources-fallback-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px
}
.ibla-resources-fallback-item {
  background: var(--white);
  border: 1px solid var(--border-gray);
  box-shadow: var(--shadow-sm);
  padding: 20px 24px
}
.ibla-resources-fallback-title {
  font-size: 1rem;
  margin: 0 0 6px
}
.ibla-resources-fallback-title a {
  color: var(--navy-deepest);
  text-decoration: underline
}
.ibla-resources-fallback-desc {
  font-size: .88rem;
  color: var(--body-text);
  margin: 0 0 8px;
  line-height: 1.6
}
.ibla-resources-fallback-meta {
  font-family: var(--font-label);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ivory-faint);
  margin: 0
}
.skeleton-card {
  background: var(--white);
  border: 1px solid var(--border-gray);
  box-shadow: var(--shadow-sm);
  padding: 32px 28px
}
.skel {
  background: linear-gradient(90deg,var(--border-gray) 25%,var(--off-white) 50%,var(--border-gray) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
  border-radius: 2px
}
@keyframes shimmer {
  0% {
    background-position: 200% 0
  }
  100% {
    background-position: -200% 0
  }
}
.skel-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 14px
}
.skel-title {
  height: 18px;
  width: 75%;
  margin-bottom: 10px
}
.skel-line {
  height: 11px;
  width: 100%;
  margin-bottom: 7px
}
.skel-line.short {
  width: 60%
}
.skel-btn {
  height: 36px;
  margin-top: 20px
}
.state-box {
  grid-column: 1/-1;
  text-align: center;
  padding: 72px 32px;
  background: var(--white);
  border: 1px dashed var(--border-gray)
}
.state-icon {
  font-size: 2.4rem;
  margin-bottom: 16px
}
.state-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--navy-deepest);
  margin-bottom: 10px
}
.state-sub {
  font-size: .9rem;
  color: var(--ivory-faint);
  line-height: 1.7;
  max-width: 400px;
  margin: 0 auto 24px
}
.btn-outline {
  display: inline-block;
  font-family: var(--font-label);
  font-size: .63rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy-deep);
  border: 1px solid var(--navy-deep);
  padding: 11px 24px;
  cursor: pointer;
  background: var(--white);
  transition: border-color var(--ease-fast),color var(--ease-fast),background var(--ease-fast)
}
.btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold-text);
  background: var(--gold-pale)
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 52px;
  flex-wrap: wrap
}
.page-btn {
  font-family: var(--font-label);
  font-size: .6rem;
  letter-spacing: .1em;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--border-gray);
  color: var(--navy-deep);
  cursor: pointer;
  transition: border-color var(--ease-fast),color var(--ease-fast),background var(--ease-fast)
}
.page-btn.active,
.page-btn:hover {
  background: var(--gold);
  color: var(--navy-deepest);
  border-color: var(--gold)
}
.page-btn:disabled {
  opacity: .35;
  cursor: not-allowed
}
.result-count {
  font-size: .82rem;
  color: var(--ivory-faint);
  margin-left: auto;
  white-space: nowrap
}
.upload-cta {
  background: var(--off-white);
  border-top: 1px solid var(--border-gray);
  border-bottom: 1px solid var(--border-gray);
  padding: 56px 0
}
.upload-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center
}
@media (max-width:700px) {
  .upload-inner {
    grid-template-columns: 1fr
  }
}
.upload-inner h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--navy-deepest);
  margin-bottom: 8px
}
.upload-inner h2 em {
  font-style: italic;
  color: var(--gold-text)
}
.upload-inner p {
  font-size: .9rem;
  color: var(--body-text);
  line-height: 1.7
}
#ibla-resources-root a.btn-gold,
.btn-gold {
  display: inline-block;
  font-family: var(--font-label);
  font-size: .65rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--navy-deepest);
  color: var(--white);
  padding: 14px 34px;
  transition: background var(--ease-fast),color var(--ease-fast),transform var(--ease-fast);
  cursor: pointer;
  border: none;
  white-space: nowrap
}
#ibla-resources-root a.btn-gold:hover,
.btn-gold:hover {
  background: var(--gold);
  color: var(--navy-deepest);
  transform: translateY(-2px)
}
#footer {
  background: var(--navy-deepest);
  padding: 44px 0 28px;
  /* Full-bleed fix: on large/ultrawide monitors the footer sat inside
     Elementor's/the theme's boxed content wrapper, so its navy background
     stopped short of the viewport edges (the .container below was already
     centered and capped correctly — only the OUTER background was wrong).
     This is the standard "break out of a centered max-width ancestor"
     technique: width:100vw plus the left/right 50% + negative margin pair
     re-centers the element on the viewport regardless of any ancestor's
     max-width, so the background reaches both edges at any screen size
     (1440px, 1920px, 2560px, ultrawide) without touching the inner
     .container's existing max-width/centering. This does NOT introduce a
     horizontal scrollbar: 100vw includes the scrollbar's own width in
     browsers that reserve space for it, and the body rule's overflow-x
     hidden setting (already declared above) clips that sliver instead of
     showing a scrollbar. No visual/copy/link/spacing changes.
     !important on the layout properties below: this file loads via
     wp_enqueue_style in <head>, so any theme rule targeting the same
     #footer id at equal specificity that loads later in the cascade
     (very common -- most WP themes style their own footer container
     width) would otherwise win on source order alone and silently
     cancel this fix. This does not change what the rule computes to
     when nothing else is conflicting, it just makes sure we always win
     when something is. */
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px
}
.footer-copy {
  font-size: .78rem;
  color: rgba(255,255,255,.5)
}
.footer-legal {
  display: flex;
  gap: 24px
}
.footer-legal a {
  font-size: .78rem;
  color: rgba(255,255,255,.5);
  transition: color var(--ease-fast)
}
.footer-legal a:hover {
  color: var(--gold)
}
@media (max-width:768px) {
  #ibla-resources-root .container {
    padding: 0 22px
  }
}
.usage-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(7,20,38,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px
}
.usage-modal-overlay[hidden] {
  display: none
}
.usage-modal {
  background: var(--white);
  border: 1px solid var(--border-gray);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 440px;
  padding: 36px 32px 30px;
  position: relative;
  max-height: calc(100vh - 40px);
  overflow-y: auto
}
.usage-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: 0 0;
  border: none;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ivory-faint);
  transition: color var(--ease-fast)
}
.usage-modal-close:hover {
  color: var(--navy-deepest)
}
.usage-modal-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy-deepest);
  margin-bottom: 6px;
  padding-right: 24px
}
.usage-modal-resource {
  font-family: var(--font-label);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 22px;
  min-height: 1em;
  word-break: break-word
}
.usage-field {
  margin-bottom: 18px;
  position: relative
}
.usage-field label {
  display: block;
  font-family: var(--font-label);
  font-size: .66rem;
  letter-spacing: .06em;
  color: var(--navy-deep);
  margin-bottom: 7px;
  line-height: 1.4
}
.usage-req {
  color: var(--gold-text)
}
.usage-field input {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border-gray);
  color: var(--navy-deepest);
  font-family: var(--font-body);
  font-size: .9rem;
  padding: 11px 14px;
  outline: 0;
  border-radius: 0;
  transition: border-color var(--ease-fast)
}
.usage-field input:focus {
  border-color: var(--gold)
}
.usage-combobox {
  position: relative
}
.usage-suggestions {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--white);
  border: 1px solid var(--border-gray);
  box-shadow: var(--shadow-sm);
  max-height: 190px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0
}
.usage-suggestions[hidden] {
  display: none
}
.usage-suggestions li {
  padding: 10px 14px;
  font-size: .86rem;
  color: var(--body-text);
  cursor: pointer;
  transition: background var(--ease-fast)
}
.usage-suggestions li:focus,
.usage-suggestions li:hover {
  background: var(--off-white)
}
.usage-error {
  font-size: .76rem;
  color: var(--error-text);
  margin-top: 6px
}
.usage-error[hidden] {
  display: none
}
.usage-helper {
  font-size: .78rem;
  color: var(--ivory-faint);
  line-height: 1.6;
  margin-bottom: 22px
}
.usage-actions {
  display: flex;
  gap: 12px
}
.usage-actions .btn-gold,
.usage-actions .btn-outline {
  flex: 1;
  text-align: center;
  padding: 12px 14px
}
.usage-actions .usage-submit:disabled {
  opacity: .6;
  cursor: not-allowed
}
@media (max-width:480px) {
  .usage-actions {
    flex-direction: column-reverse
  }
}