/* ==========================================================================
   IVDS Cloud — design system
   Layered on top of Bootstrap 5.3 RTL (local). No CDN, no build step.

   Signature: the rack unit. A VPS is measured in U, so every key number
   (price, CPU, RAM, disk) is set in a hairline instrument face with a small
   engraved unit beside it — the way specs are silkscreened on rack hardware.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  color-scheme: light;

  --ivds-ink:        #0A1017;
  --ivds-paper:      #F5F7FA;
  --ivds-surface:    #FFFFFF;
  --ivds-surface-2:  #EDF1F6;
  --ivds-line:       #DCE3EC;
  --ivds-line-soft:  #EAF0F6;

  --ivds-text:       #101A26;
  --ivds-muted:      #5B6B7F;
  --ivds-faint:      #8695A6;

  --ivds-signal:     #0EA5E9;
  --ivds-signal-deep:#0369A1;
  --ivds-signal-wash:#E7F6FE;

  --ivds-good:       #0E9F6E;
  --ivds-good-wash:  #E6F7F1;
  --ivds-warn:       #D97706;
  --ivds-warn-wash:  #FEF3E2;
  --ivds-bad:        #DC2626;
  --ivds-bad-wash:   #FDECEC;

  --ivds-r-xs: 6px;
  --ivds-r-sm: 10px;
  --ivds-r:    14px;
  --ivds-r-lg: 20px;

  --ivds-shadow-1: 0 1px 2px rgba(16, 26, 38, .05);
  --ivds-shadow-2: 0 10px 30px -18px rgba(16, 26, 38, .35);
  --ivds-shadow-3: 0 30px 60px -30px rgba(16, 26, 38, .45);

  --ivds-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Bootstrap bridge */
  --bs-body-bg: var(--ivds-paper);
  --bs-body-color: var(--ivds-text);
  --bs-border-color: var(--ivds-line);
  --bs-primary: var(--ivds-signal);
  --bs-primary-rgb: 14, 165, 233;
  --bs-border-radius: var(--ivds-r-sm);
  --bs-link-color: var(--ivds-signal-deep);
  --bs-link-hover-color: var(--ivds-signal);
}

[data-theme="dark"] {
  color-scheme: dark;

  --ivds-ink:        #05080D;
  --ivds-paper:      #080C13;
  --ivds-surface:    #0F1620;
  --ivds-surface-2:  #16202C;
  --ivds-line:       #23303F;
  --ivds-line-soft:  #1B2634;

  --ivds-text:       #E8EEF6;
  --ivds-muted:      #93A4B8;
  --ivds-faint:      #6B7C90;

  --ivds-signal-wash:#0A2737;
  --ivds-good-wash:  #07281F;
  --ivds-warn-wash:  #2A1C08;
  --ivds-bad-wash:   #2B1113;

  --ivds-shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --ivds-shadow-2: 0 10px 30px -18px rgba(0, 0, 0, .8);
  --ivds-shadow-3: 0 30px 60px -30px rgba(0, 0, 0, .9);

  --bs-body-bg: var(--ivds-paper);
  --bs-body-color: var(--ivds-text);
  --bs-border-color: var(--ivds-line);
}

/* ------------------------------------------------------------ typography */
@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
  background: var(--ivds-paper);
  color: var(--ivds-text);
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: -.003em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* nothing in this layout should ever scroll sideways */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .ivds-h {
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.018em;
  color: var(--ivds-text);
  margin: 0;
}

h1 { font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.6rem); line-height: 1.3; }
h2 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.06rem; }

a { color: var(--ivds-signal-deep); text-decoration: none; }
a:hover { color: var(--ivds-signal); }

.text-muted, .text-secondary { color: var(--ivds-muted) !important; }
.text-faint { color: var(--ivds-faint); }

/* The instrument face: every spec number lives here. */
.ivds-num {
  font-family: var(--ivds-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.02em;
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* Engraved unit beside a number. */
.ivds-unit {
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  font-size: .62em;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ivds-faint);
  margin-inline-start: .28em;
  white-space: nowrap;
}

.ivds-eyebrow {
  font-size: .8rem;
  font-weight: 700;
  color: var(--ivds-signal-deep);
  margin: 0 0 .35rem;
}

.ivds-lede {
  color: var(--ivds-muted);
  font-size: 1.02rem;
  max-width: 56ch;
}

/* --------------------------------------------------------------- surface */
.ivds-card {
  background: var(--ivds-surface);
  border: 1px solid var(--ivds-line);
  border-radius: var(--ivds-r);
  box-shadow: var(--ivds-shadow-1);
}

.ivds-card--pad { padding: 1.15rem 1.25rem; }

.ivds-panel {
  background: var(--ivds-surface);
  border: 1px solid var(--ivds-line);
  border-radius: var(--ivds-r-lg);
  box-shadow: var(--ivds-shadow-2);
}

.ivds-rule {
  height: 1px;
  background: var(--ivds-line-soft);
  border: 0;
  margin: 1rem 0;
  opacity: 1;
}

/* Dotted leader used between a label and its value, like a spec sheet. */
.ivds-spec {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .34rem 0;
}
.ivds-spec__k {
  color: var(--ivds-muted);
  font-size: .88rem;
  white-space: nowrap;
}
.ivds-spec__fill {
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--ivds-line);
  transform: translateY(-.28em);
  min-width: 1.5rem;
}
.ivds-spec__v {
  font-weight: 700;
  font-size: .92rem;
  white-space: nowrap;
}

/* --------------------------------------------------------------- buttons */
.btn {
  --bs-btn-font-family: 'Vazirmatn', Tahoma, sans-serif;
  --bs-btn-font-weight: 700;
  --bs-btn-font-size: .94rem;
  --bs-btn-padding-y: .62rem;
  --bs-btn-padding-x: 1.15rem;
  --bs-btn-border-radius: var(--ivds-r-sm);
  transition: transform .12s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  --bs-btn-bg: var(--ivds-signal);
  --bs-btn-border-color: var(--ivds-signal);
  --bs-btn-hover-bg: var(--ivds-signal-deep);
  --bs-btn-hover-border-color: var(--ivds-signal-deep);
  --bs-btn-active-bg: var(--ivds-signal-deep);
  --bs-btn-active-border-color: var(--ivds-signal-deep);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 14, 165, 233;
  box-shadow: 0 6px 18px -10px rgba(14, 165, 233, .9);
}

.btn-ink {
  --bs-btn-bg: var(--ivds-ink);
  --bs-btn-border-color: var(--ivds-ink);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #16202C;
  --bs-btn-hover-border-color: #16202C;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #16202C;
  --bs-btn-active-color: #fff;
}

[data-theme="dark"] .btn-ink {
  --bs-btn-bg: #E8EEF6;
  --bs-btn-border-color: #E8EEF6;
  --bs-btn-color: #0A1017;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-color: #0A1017;
}

.btn-ghost {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--ivds-line);
  --bs-btn-color: var(--ivds-text);
  --bs-btn-hover-bg: var(--ivds-surface-2);
  --bs-btn-hover-border-color: var(--ivds-line);
  --bs-btn-hover-color: var(--ivds-text);
}

.btn-lg {
  --bs-btn-padding-y: .82rem;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-border-radius: var(--ivds-r);
}

.btn-sm {
  --bs-btn-padding-y: .38rem;
  --bs-btn-padding-x: .7rem;
  --bs-btn-font-size: .83rem;
  --bs-btn-border-radius: var(--ivds-r-xs);
}

/* ---------------------------------------------------------------- inputs */
.form-label {
  font-size: .87rem;
  font-weight: 700;
  color: var(--ivds-muted);
  margin-bottom: .4rem;
}

.form-control, .form-select {
  background: var(--ivds-surface);
  border-color: var(--ivds-line);
  color: var(--ivds-text);
  border-radius: var(--ivds-r-sm);
  padding: .62rem .85rem;
  font-size: .95rem;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.form-control::placeholder { color: var(--ivds-faint); }
.form-control:focus, .form-select:focus {
  background: var(--ivds-surface);
  color: var(--ivds-text);
  border-color: var(--ivds-signal);
  box-shadow: 0 0 0 .2rem rgba(14, 165, 233, .16);
}
.form-control-lg { padding: .8rem 1rem; font-size: 1.05rem; border-radius: var(--ivds-r); }
.form-text { color: var(--ivds-faint); font-size: .82rem; }

.form-check-input:checked {
  background-color: var(--ivds-signal);
  border-color: var(--ivds-signal);
}

:focus-visible {
  outline: 2px solid var(--ivds-signal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ----------------------------------------------------------------- topbar */
.ivds-top {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--ivds-ink);
  color: #E8EEF6;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.ivds-top__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1rem;
  height: 62px;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.ivds-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: #fff;
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: 1.02rem;
  flex: 0 1 auto;
  min-width: 0;
}
.ivds-brand span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ivds-brand:hover { color: #fff; }
.ivds-brand svg { display: block; }

.ivds-nav {
  display: flex;
  align-items: center;
  gap: .15rem;
  margin-inline-start: 1.4rem;
}
.ivds-nav a {
  color: #A9B8C9;
  font-size: .92rem;
  font-weight: 700;
  padding: .45rem .78rem;
  border-radius: var(--ivds-r-xs);
  transition: color .14s ease, background-color .14s ease;
}
.ivds-nav a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.ivds-nav a.is-active { color: #fff; background: rgba(14, 165, 233, .18); }

.ivds-top__right {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.ivds-iconbtn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ivds-r-xs);
  border: 1px solid rgba(255, 255, 255, .12);
  background: transparent;
  color: #C8D5E3;
  font-size: 1rem;
  transition: background-color .14s ease, color .14s ease;
}
.ivds-iconbtn:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.ivds-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .85rem;
  color: #fff;
  background: linear-gradient(135deg, var(--ivds-signal), var(--ivds-signal-deep));
  flex: 0 0 32px;
}

.ivds-user {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: #E8EEF6;
  padding: .2rem .35rem;
  border-radius: var(--ivds-r-xs);
}
.ivds-user:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.ivds-user__meta { line-height: 1.35; text-align: start; }
.ivds-user__name { font-size: .86rem; font-weight: 700; }
.ivds-user__sub { font-size: .72rem; color: #93A4B8; }

.ivds-burger { display: none; }

/* mobile drawer */
.ivds-drawer {
  position: fixed;
  inset: 0;
  z-index: 1040;
  display: none;
}
.ivds-drawer.is-open { display: block; }
.ivds-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 13, .55);
  backdrop-filter: blur(2px);
}
.ivds-drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(84vw, 300px);
  background: var(--ivds-ink);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  animation: ivds-slide .22s ease-out;
}
@keyframes ivds-slide {
  from { transform: translateX(20px); opacity: .4; }
  to   { transform: none; opacity: 1; }
}
.ivds-drawer a {
  color: #C8D5E3;
  font-weight: 700;
  padding: .7rem .8rem;
  border-radius: var(--ivds-r-xs);
  display: flex;
  align-items: center;
  gap: .6rem;
}
.ivds-drawer a:hover, .ivds-drawer a.is-active { background: rgba(255, 255, 255, .08); color: #fff; }
.ivds-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: .8rem;
  margin-bottom: .4rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

/* ------------------------------------------------------------------ page */
.ivds-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem 1rem 3.5rem;
}

.ivds-pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}

.ivds-back {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--ivds-muted);
  font-size: .87rem;
  font-weight: 700;
  margin-bottom: .9rem;
}
.ivds-back:hover { color: var(--ivds-signal); }

/* ------------------------------------------------------------------ hero */
.ivds-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--ivds-r-lg);
  background:
    radial-gradient(120% 130% at 88% -10%, rgba(14, 165, 233, .30) 0%, transparent 55%),
    linear-gradient(150deg, #0A1017 0%, #101B29 58%, #0B1520 100%);
  color: #E8EEF6;
  padding: clamp(1.7rem, 1rem + 3vw, 3.4rem);
  border: 1px solid rgba(255, 255, 255, .07);
}

/* faint rack grid */
.ivds-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to left, rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(150deg, #000 10%, transparent 72%);
  -webkit-mask-image: linear-gradient(150deg, #000 10%, transparent 72%);
  pointer-events: none;
}

.ivds-hero__in { position: relative; }

.ivds-hero h1 { color: #fff; max-width: 18ch; }
.ivds-hero p { color: #A9B8C9; max-width: 46ch; }

.ivds-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.5rem;
}

.ivds-hero__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.2rem;
  margin-top: 2rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.ivds-hero__spec b {
  display: block;
  font-family: var(--ivds-mono);
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.ivds-hero__spec span { font-size: .8rem; color: #93A4B8; }

/* ------------------------------------------------------------ trust strip */
.ivds-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ivds-line);
  border: 1px solid var(--ivds-line);
  border-radius: var(--ivds-r);
  overflow: hidden;
  margin-top: 1rem;
}
.ivds-trust__cell {
  background: var(--ivds-surface);
  padding: 1.05rem 1.15rem;
  display: flex;
  gap: .8rem;
  align-items: flex-start;
}
.ivds-trust__cell i {
  font-size: 1.15rem;
  color: var(--ivds-signal);
  line-height: 1.5;
}
.ivds-trust__cell b { display: block; font-size: .93rem; }
.ivds-trust__cell span { font-size: .82rem; color: var(--ivds-muted); }

/* ------------------------------------------------------------- plan cards */
.ivds-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1rem;
}

/* one or two plans should not stretch into billboards */
.ivds-plans > .ivds-plan { max-width: 100%; }
@media (min-width: 992px) {
  .ivds-plans:has(> .ivds-plan:only-child) { grid-template-columns: minmax(255px, 420px); }
}

.ivds-plan {
  background: var(--ivds-surface);
  border: 1px solid var(--ivds-line);
  border-radius: var(--ivds-r);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  position: relative;
}
.ivds-plan:hover {
  border-color: var(--ivds-signal);
  box-shadow: var(--ivds-shadow-2);
  transform: translateY(-2px);
}

.ivds-plan__name {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: .15rem;
}
.ivds-plan__virt {
  font-size: .78rem;
  color: var(--ivds-faint);
  font-family: var(--ivds-mono);
  text-transform: uppercase;
  letter-spacing: .04em;
  direction: ltr;
  text-align: start;
}

.ivds-plan__price {
  margin: 1rem 0 1.1rem;
  display: flex;
  align-items: baseline;
  gap: .3rem;
  flex-wrap: wrap;
}
.ivds-plan__price b {
  font-family: var(--ivds-mono);
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--ivds-text);
  line-height: 1;
}
.ivds-plan__price span { font-size: .82rem; color: var(--ivds-muted); }

/* the four specs, laid out like a rack label */
.ivds-plan__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--ivds-line-soft);
  border: 1px solid var(--ivds-line-soft);
  border-radius: var(--ivds-r-sm);
  overflow: hidden;
  margin-bottom: 1rem;
}
.ivds-plan__specs > div {
  background: var(--ivds-surface);
  padding: .55rem .7rem;
}
.ivds-plan__specs b {
  display: block;
  font-family: var(--ivds-mono);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ivds-text);
}
.ivds-plan__specs span { font-size: .72rem; color: var(--ivds-faint); }

.ivds-plan__foot { margin-top: auto; }

.ivds-plan__traffic {
  font-size: .8rem;
  color: var(--ivds-muted);
  margin-bottom: .8rem;
  display: flex;
  align-items: center;
  gap: .35rem;
}

/* --------------------------------------------------------------- badges */
.ivds-badge {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  font-size: .76rem;
  font-weight: 700;
  padding: .22rem .6rem;
  border-radius: 999px;
  line-height: 1.6;
  white-space: nowrap;
}
.ivds-badge--good { background: var(--ivds-good-wash); color: var(--ivds-good); }
.ivds-badge--warn { background: var(--ivds-warn-wash); color: var(--ivds-warn); }
.ivds-badge--bad  { background: var(--ivds-bad-wash);  color: var(--ivds-bad); }
.ivds-badge--info { background: var(--ivds-signal-wash); color: var(--ivds-signal-deep); }
.ivds-badge--idle { background: var(--ivds-surface-2); color: var(--ivds-muted); }

[data-theme="dark"] .ivds-badge--info { color: #7DD3FC; }
[data-theme="dark"] .ivds-badge--good { color: #6EE7B7; }
[data-theme="dark"] .ivds-badge--warn { color: #FCD34D; }
[data-theme="dark"] .ivds-badge--bad  { color: #FCA5A5; }

.ivds-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 6px;
}
.ivds-dot--pulse { animation: ivds-pulse 1.8s ease-in-out infinite; }
@keyframes ivds-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

/* ------------------------------------------------------------ choice rows */
.ivds-choice {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem .9rem;
  border: 1px solid var(--ivds-line);
  border-radius: var(--ivds-r-sm);
  background: var(--ivds-surface);
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
  margin: 0;
  width: 100%;
}
.ivds-choice:hover { border-color: var(--ivds-signal); }
.ivds-choice.is-selected,
.ivds-choice:has(input:checked) {
  border-color: var(--ivds-signal);
  background: var(--ivds-signal-wash);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .14);
}
.ivds-choice input { flex: 0 0 auto; margin: 0; }
.ivds-choice__body { min-width: 0; flex: 1 1 auto; }
.ivds-choice__title {
  display: block;
  font-weight: 700;
  font-size: .93rem;
  line-height: 1.4;
}
.ivds-choice__sub {
  display: block;
  font-size: .78rem;
  color: var(--ivds-muted);
  line-height: 1.5;
}
.ivds-choice__flag { font-size: 1.35rem; line-height: 1; flex: 0 0 auto; }

/* ---------------------------------------------------------------- OS grid */
.ivds-osgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .5rem;
  max-height: 336px;
  overflow-y: auto;
  padding: .15rem;
  scrollbar-width: thin;
}

.ivds-os {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .6rem;
  border: 1px solid var(--ivds-line);
  border-radius: var(--ivds-r-sm);
  background: var(--ivds-surface);
  cursor: pointer;
  margin: 0;
  transition: border-color .14s ease, background-color .14s ease;
  min-width: 0;
}
.ivds-os:hover { border-color: var(--ivds-signal); }
.ivds-os.is-selected,
.ivds-os:has(input:checked) {
  border-color: var(--ivds-signal);
  background: var(--ivds-signal-wash);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .14);
}
.ivds-os input { position: absolute; opacity: 0; width: 0; height: 0; }

.ivds-os__icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
}
.ivds-os__icon img {
  width: 15px;
  height: 15px;
  filter: brightness(0) invert(1);
  opacity: .96;
}
.ivds-os__name {
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.ivds-search { position: relative; }
.ivds-search i {
  position: absolute;
  inset-inline-start: .8rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ivds-faint);
  font-size: .95rem;
  pointer-events: none;
}
.ivds-search .form-control { padding-inline-start: 2.3rem; }

/* ---------------------------------------------------------------- receipt */
.ivds-receipt {
  position: sticky;
  top: 80px;
  background: var(--ivds-surface);
  border: 1px solid var(--ivds-line);
  border-radius: var(--ivds-r-lg);
  overflow: hidden;
  box-shadow: var(--ivds-shadow-2);
}

.ivds-receipt__head {
  padding: 1rem 1.15rem .85rem;
  border-bottom: 1px dashed var(--ivds-line);
  background: var(--ivds-surface-2);
}
.ivds-receipt__head b { font-size: .95rem; }

.ivds-receipt__body { padding: .75rem 1.15rem 1rem; }

.ivds-receipt__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .9rem 1.15rem;
  border-top: 1px solid var(--ivds-line);
  background: var(--ivds-surface-2);
}
.ivds-receipt__total b {
  font-family: var(--ivds-mono);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.03em;
}

.ivds-receipt__foot { padding: 0 1.15rem 1.15rem; }

/* torn-paper notch, the one flourish */
.ivds-receipt__notch {
  position: relative;
  height: 12px;
  background: var(--ivds-surface-2);
}
.ivds-receipt__notch::before,
.ivds-receipt__notch::after {
  content: "";
  position: absolute;
  bottom: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ivds-paper);
}
.ivds-receipt__notch::before { inset-inline-start: -6px; }
.ivds-receipt__notch::after { inset-inline-end: -6px; }

/* ----------------------------------------------------------- step marker */
.ivds-step {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .9rem;
}
.ivds-step__n {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ivds-ink);
  color: #fff;
  font-family: var(--ivds-mono);
  font-size: .78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
}
.ivds-step__t { font-size: .98rem; font-weight: 700; }

/* ------------------------------------------------------------ server card */
.ivds-server {
  background: var(--ivds-surface);
  border: 1px solid var(--ivds-line);
  border-radius: var(--ivds-r);
  padding: 1.1rem 1.2rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.ivds-server:hover { border-color: var(--ivds-signal); box-shadow: var(--ivds-shadow-2); }
.ivds-server__name {
  font-weight: 700;
  font-size: 1.02rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}
.ivds-server__meta {
  font-size: .82rem;
  color: var(--ivds-muted);
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  margin-top: .3rem;
}
.ivds-server__meta b { color: var(--ivds-text); font-weight: 700; }

.ivds-meter {
  height: 6px;
  border-radius: 999px;
  background: var(--ivds-surface-2);
  overflow: hidden;
  margin-top: .55rem;
}
.ivds-meter__bar {
  height: 100%;
  border-radius: 999px;
  background: var(--ivds-signal);
  transition: width .4s ease;
}
.ivds-meter__bar--warn { background: var(--ivds-warn); }
.ivds-meter__bar--bad  { background: var(--ivds-bad); }

/* -------------------------------------------------------------- power bar */
.ivds-power {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.ivds-power form { margin: 0; }
.ivds-power .btn { min-width: 92px; }

/* --------------------------------------------------------------- console */
.ivds-console {
  background: #060A10;
  border: 1px solid #1B2634;
  border-radius: var(--ivds-r-sm);
  padding: .9rem 1rem;
  font-family: var(--ivds-mono);
  font-size: .82rem;
  color: #A7F3D0;
  direction: ltr;
  text-align: left;
  overflow-x: auto;
  line-height: 1.7;
}
.ivds-console .ivds-console__prompt { color: #38BDF8; }
.ivds-console .ivds-console__dim { color: #64748B; }

/* ---------------------------------------------------------------- wallet */
.ivds-balance {
  position: relative;
  overflow: hidden;
  border-radius: var(--ivds-r-lg);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(14, 165, 233, .35) 0%, transparent 58%),
    linear-gradient(145deg, #0A1017 0%, #101B29 100%);
  color: #fff;
  padding: 1.4rem 1.5rem 1.3rem;
  border: 1px solid rgba(255, 255, 255, .07);
}
.ivds-balance__label { font-size: .82rem; color: #93A4B8; }
.ivds-balance__value {
  font-family: var(--ivds-mono);
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.15;
  margin: .2rem 0 .1rem;
  direction: ltr;
  text-align: start;
}
.ivds-balance__unit { font-size: .85rem; color: #93A4B8; }

.ivds-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .5rem;
}
.ivds-amounts button {
  font-family: var(--ivds-mono);
  font-size: .82rem;
  font-weight: 700;
  padding: .32rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--ivds-line);
  background: var(--ivds-surface);
  color: var(--ivds-text);
  transition: border-color .14s ease, background-color .14s ease;
}
.ivds-amounts button:hover { border-color: var(--ivds-signal); background: var(--ivds-signal-wash); }

/* card-to-card block */
.ivds-cardbox {
  border: 1px solid var(--ivds-line);
  border-radius: var(--ivds-r);
  overflow: hidden;
}
.ivds-cardbox__top {
  background: var(--ivds-surface-2);
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--ivds-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
}
.ivds-cardbox__num {
  font-family: var(--ivds-mono);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .06em;
  direction: ltr;
  text-align: start;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.ivds-copy {
  border: 1px solid var(--ivds-line);
  background: var(--ivds-surface);
  border-radius: var(--ivds-r-xs);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ivds-muted);
  font-size: .82rem;
}
.ivds-copy:hover { color: var(--ivds-signal); border-color: var(--ivds-signal); }

/* The two values a customer has to copy out of the bank app: amount and code.
   They get their own cells because mis-typing either one delays the credit. */
.ivds-transfer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}
.ivds-transfer__cell {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .7rem .85rem;
  background: var(--ivds-surface-2);
  border: 1px solid var(--ivds-line);
  border-radius: var(--ivds-r-sm);
  min-width: 0;
}
.ivds-transfer__k { font-size: .74rem; color: var(--ivds-muted); }
.ivds-transfer__row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.ivds-transfer__v {
  font-family: var(--ivds-mono);
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  text-align: start;
  line-height: 1.3;
}
.ivds-transfer__u { font-size: .72rem; color: var(--ivds-faint); }

/* destination card strip */
.ivds-dest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .4rem 1rem;
  padding: .7rem .85rem;
  border: 1px dashed var(--ivds-line);
  border-radius: var(--ivds-r-sm);
}
.ivds-dest__num {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--ivds-mono);
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: .05em;
  direction: ltr;
}
.ivds-dest__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .9rem;
  font-size: .8rem;
  color: var(--ivds-muted);
}
.ivds-dest__meta b { color: var(--ivds-text); }

@media (max-width: 575.98px) {
  .ivds-transfer { grid-template-columns: 1fr; }
  .ivds-transfer__v { font-size: 1.05rem; }
  .ivds-dest__num { font-size: .88rem; }
}

/* ---------------------------------------------------------- ledger sheet
   Each transaction is a row of a statement, not a card: the amount sits in
   a fixed tabular column so the eye can run down the numbers. */
.ivds-ledger {
  list-style: none;
  margin: 0;
  padding: .25rem .25rem;
}
.ivds-ledger__row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--ivds-line-soft);
  border-radius: var(--ivds-r-xs);
}
.ivds-ledger__row:last-child { border-bottom: 0; }
.ivds-ledger__row:hover { background: var(--ivds-surface-2); }

.ivds-ledger__mark {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  flex: 0 0 30px;
}
.ivds-ledger__mark--in  { background: var(--ivds-good-wash); color: var(--ivds-good); }
.ivds-ledger__mark--out { background: var(--ivds-surface-2); color: var(--ivds-muted); }

.ivds-ledger__main { min-width: 0; display: flex; flex-direction: column; }
.ivds-ledger__reason {
  font-size: .9rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ivds-ledger__when {
  font-size: .74rem;
  color: var(--ivds-faint);
  margin-top: .1rem;
}

.ivds-ledger__nums {
  text-align: end;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.ivds-ledger__amount {
  font-family: var(--ivds-mono);
  font-size: .92rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ivds-ledger__amount.is-in  { color: var(--ivds-good); }
.ivds-ledger__amount.is-out { color: var(--ivds-text); }
/* the running balance is context, not the message — keep it quiet */
.ivds-ledger__after {
  font-family: var(--ivds-mono);
  font-size: .74rem;
  color: var(--ivds-faint);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
  .ivds-ledger__row { grid-template-columns: 30px 1fr auto; gap: .55rem; padding: .65rem .5rem; }
  .ivds-ledger__reason { font-size: .84rem; }
  .ivds-ledger__amount { font-size: .86rem; }
}

.ivds-code {
  font-family: var(--ivds-mono);
  background: var(--ivds-warn-wash);
  color: var(--ivds-warn);
  border: 1px dashed var(--ivds-warn);
  border-radius: var(--ivds-r-xs);
  padding: .18rem .55rem;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .08em;
  direction: ltr;
  display: inline-block;
}

/* ---------------------------------------------------------------- tables */
.ivds-table { width: 100%; border-collapse: collapse; font-size: .89rem; }
.ivds-table thead th {
  text-align: start;
  font-size: .76rem;
  font-weight: 700;
  color: var(--ivds-faint);
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--ivds-line);
  white-space: nowrap;
}
.ivds-table tbody td {
  padding: .7rem;
  border-bottom: 1px solid var(--ivds-line-soft);
  vertical-align: middle;
}
.ivds-table tbody tr:last-child td { border-bottom: 0; }
.ivds-table tbody tr:hover { background: var(--ivds-surface-2); }
.ivds-table .ivds-num { font-size: .87rem; }

/* ---------------------------------------------------------------- alerts */
.ivds-alert {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .85rem 1rem;
  border-radius: var(--ivds-r-sm);
  border: 1px solid;
  font-size: .9rem;
  margin-bottom: 1rem;
}
.ivds-alert i { font-size: 1.05rem; line-height: 1.5; flex: 0 0 auto; }
.ivds-alert--good { background: var(--ivds-good-wash); border-color: rgba(14, 159, 110, .3); color: #065F46; }
.ivds-alert--warn { background: var(--ivds-warn-wash); border-color: rgba(217, 119, 6, .3); color: #92400E; }
.ivds-alert--bad  { background: var(--ivds-bad-wash);  border-color: rgba(220, 38, 38, .3); color: #991B1B; }
.ivds-alert--info { background: var(--ivds-signal-wash); border-color: rgba(14, 165, 233, .3); color: #075985; }
[data-theme="dark"] .ivds-alert--good { color: #6EE7B7; }
[data-theme="dark"] .ivds-alert--warn { color: #FCD34D; }
[data-theme="dark"] .ivds-alert--bad  { color: #FCA5A5; }
[data-theme="dark"] .ivds-alert--info { color: #7DD3FC; }

/* ------------------------------------------------------------ empty state */
.ivds-empty {
  text-align: center;
  padding: 3rem 1.25rem;
}
.ivds-empty__icon {
  width: 54px;
  height: 54px;
  border-radius: var(--ivds-r);
  background: var(--ivds-surface-2);
  color: var(--ivds-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: .9rem;
}
.ivds-empty b { display: block; font-size: 1.02rem; margin-bottom: .25rem; }
.ivds-empty p { color: var(--ivds-muted); font-size: .9rem; margin: 0 auto .95rem; max-width: 40ch; }

/* ---------------------------------------------------------------- toasts */
.ivds-toasts {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline-start: 1rem;
  z-index: 1060;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: min(92vw, 380px);
}
.ivds-toast {
  background: var(--ivds-surface);
  border: 1px solid var(--ivds-line);
  border-inline-start: 3px solid var(--ivds-signal);
  border-radius: var(--ivds-r-sm);
  box-shadow: var(--ivds-shadow-3);
  padding: .75rem .9rem;
  font-size: .88rem;
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  animation: ivds-toast-in .24s ease-out;
}
.ivds-toast--good { border-inline-start-color: var(--ivds-good); }
.ivds-toast--bad  { border-inline-start-color: var(--ivds-bad); }
.ivds-toast--warn { border-inline-start-color: var(--ivds-warn); }
@keyframes ivds-toast-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ---------------------------------------------------------------- footer */
.ivds-foot {
  border-top: 1px solid var(--ivds-line);
  background: var(--ivds-surface);
  padding: 1.4rem 1rem;
  margin-top: auto;
}
.ivds-foot__in {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: .82rem;
  color: var(--ivds-muted);
}
.ivds-foot a { color: var(--ivds-muted); }
.ivds-foot a:hover { color: var(--ivds-signal); }

/* ------------------------------------------------------------ auth split */
.ivds-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 62px);
}
.ivds-auth__aside {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 130% at 90% -10%, rgba(14, 165, 233, .32) 0%, transparent 55%),
    linear-gradient(150deg, #0A1017 0%, #101B29 58%, #0B1520 100%);
  color: #E8EEF6;
  padding: clamp(2rem, 1rem + 4vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ivds-auth__aside::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to left, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(160deg, #000 10%, transparent 70%);
  -webkit-mask-image: linear-gradient(160deg, #000 10%, transparent 70%);
}
.ivds-auth__aside > * { position: relative; }
.ivds-auth__aside h2 { color: #fff; max-width: 16ch; }
.ivds-auth__aside p { color: #A9B8C9; max-width: 40ch; }

.ivds-auth__form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.ivds-auth__box { width: 100%; max-width: 400px; }

/* OTP input */
.ivds-otp {
  font-family: var(--ivds-mono);
  font-size: 1.7rem !important;
  letter-spacing: .55em !important;
  text-align: center;
  direction: ltr;
  padding-block: .85rem !important;
}

/* --------------------------------------------------------------- utility */
.ivds-stack-sm > * + * { margin-top: .5rem; }
.ivds-stack > * + * { margin-top: 1rem; }
.ivds-stack-lg > * + * { margin-top: 1.5rem; }
.ivds-nowrap { white-space: nowrap; }
.ivds-mono { font-family: var(--ivds-mono); }
.ivds-ltr { direction: ltr; text-align: start; }
.ivds-divider { border: 0; border-top: 1px solid var(--ivds-line); margin: 1.25rem 0; opacity: 1; }
.ivds-muted { color: var(--ivds-muted); }
.ivds-small { font-size: .84rem; }
.ivds-tiny { font-size: .76rem; }

.ivds-steps-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  font-size: .8rem;
  color: var(--ivds-faint);
}
.ivds-steps-nav b { color: var(--ivds-text); }
.ivds-steps-nav i { font-size: .65rem; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 991.98px) {
  .ivds-nav { display: none; }
  .ivds-burger { display: inline-flex; }
  .ivds-user__meta { display: none; }
  .ivds-auth { grid-template-columns: 1fr; min-height: auto; }
  .ivds-auth__aside { display: none; }
  .ivds-receipt { position: static; }
}

@media (max-width: 767.98px) {
  .ivds-trust { grid-template-columns: 1fr; }
  .ivds-main { padding-top: 1.4rem; }
  .ivds-hero__specs { gap: 1.1rem 1.5rem; }
  .ivds-server { grid-template-columns: 1fr; }
  .ivds-power .btn { flex: 1 1 calc(50% - .25rem); min-width: 0; }
  .ivds-pagehead { align-items: flex-start; }
}

@media (max-width: 575.98px) {
  body { font-size: 14.5px; }
  .ivds-plan__specs b { font-size: .95rem; }
  .ivds-osgrid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); max-height: 290px; }
  .ivds-hero { border-radius: var(--ivds-r); }
  .ivds-toasts { inset-inline: .75rem; max-width: none; }

  /* the bar has to fit 390px: shrink the wordmark, tighten the gaps */
  .ivds-top__inner { padding-inline: .6rem; gap: .3rem; height: 56px; }
  .ivds-brand { font-size: .95rem; gap: .45rem; }
  .ivds-brand svg { width: 22px; height: 22px; }
  .ivds-top__right { gap: .3rem; }
  .ivds-iconbtn { width: 32px; height: 32px; font-size: .92rem; }
  .ivds-avatar { width: 28px; height: 28px; flex-basis: 28px; font-size: .78rem; }
  .ivds-top__right .btn-sm { padding: .34rem .6rem; font-size: .8rem; }

  .ivds-hero h1 { font-size: 1.45rem; }
  .ivds-hero__specs { gap: .9rem 1.2rem; }
  .ivds-hero__spec b { font-size: 1.1rem; }
  .ivds-hero__spec span { font-size: .72rem; }
}

@media (max-width: 380px) {
  .ivds-brand span { display: none; }
}

/* ------------------------------------------------------------ a11y/motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

.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;
}

/* print: the receipt should be printable as an order slip */
@media print {
  .ivds-top, .ivds-foot, .ivds-power, .ivds-toasts, .ivds-back { display: none !important; }
  .ivds-main { padding: 0; }
  .ivds-card, .ivds-panel, .ivds-receipt { box-shadow: none !important; border-color: #ccc !important; }
}
/* ============================================================================
   ivds-wait — the waiting-for-deposit card
   ============================================================================

   The job of this component: make it obvious, at a glance from across a room,
   that money is expected and the system is watching for it. Then, when the SMS
   lands and the payment is approved, turn the whole card green in place.

   Two colours carry the whole idea, and nothing else competes with them:
   amber = waiting, green = done. The card's own surface, border, badge and
   hourglass all move together, so the change reads as one event rather than
   four small updates.

   Everything animates from a single class flip (`.is-paid`) so the JS never
   touches individual styles. That also means the paid state renders correctly
   on first paint for a payment that was already approved before the page
   loaded.
   ========================================================================= */

.ivds-wait {
  --wait-accent:  var(--ivds-warn);
  --wait-wash:    var(--ivds-warn-wash);
  --wait-ring:    rgba(217, 119, 6, .28);

  /* The accent is used for TEXT here (the label, the hourglass), not only for
     fills. --ivds-warn is tuned for fills and lands at 2.9:1 against its own
     wash — invisible in daylight on a phone. These deeper tones keep the same
     hue and reach 4.5:1+ on both the wash and the surface, so the colour still
     reads as amber/green, only legible. */
  --wait-ink:     #92400E;
  --wait-ink-good:#056B4A;

  position: relative;
  background: var(--ivds-surface);
  border: 1px solid var(--ivds-line);
  border-radius: var(--ivds-r);
  box-shadow: var(--ivds-shadow-2);
  overflow: hidden;
  transition: border-color .5s ease, box-shadow .5s ease, background .5s ease;
}

/* A hairline of colour along the top edge. It is the first thing that
   changes, so the eye is drawn to the card before the rest of it moves. */
.ivds-wait::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--wait-accent);
  transition: background .5s ease;
}

/* ── the status strip ──────────────────────────────────────────────────── */

.ivds-wait__bar {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .95rem 1.1rem;
  background: var(--wait-wash);
  border-block-end: 1px solid var(--ivds-line-soft);
  transition: background .5s ease, border-color .5s ease;
}

.ivds-wait__glyph {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--wait-ink);
  background: var(--ivds-surface);
  box-shadow: 0 0 0 1px var(--wait-ring), 0 6px 16px -10px var(--wait-accent);
  transition: color .5s ease, box-shadow .5s ease;
}

.ivds-wait__glass,
.ivds-wait__tick {
  position: absolute;
  width: 21px;
  height: 21px;
  transition: opacity .45s ease, transform .55s cubic-bezier(.2, .9, .25, 1.2);
}

.ivds-wait__tick { opacity: 0; transform: scale(.4) rotate(-18deg); }

/* The hourglass turns over, and its sand settles. A slow 2.6s cycle — this is
   a "we are still watching" pulse, not a countdown, because the wait ends when
   the bank SMS arrives and nobody can predict that. */
.ivds-wait__glass {
  animation: ivds-wait-turn 2.6s cubic-bezier(.45, 0, .55, 1) infinite;
  transform-origin: 50% 50%;
}

@keyframes ivds-wait-turn {
  0%, 42%   { transform: rotate(0deg); }
  50%, 92%  { transform: rotate(180deg); }
  100%      { transform: rotate(360deg); }
}

.ivds-wait__sand path:first-child { animation: ivds-wait-sand-a 2.6s ease-in-out infinite; }
.ivds-wait__sand path:last-child  { animation: ivds-wait-sand-b 2.6s ease-in-out infinite; }

@keyframes ivds-wait-sand-a {
  0%, 40% { opacity: 1; }
  55%, 90% { opacity: .18; }
  100% { opacity: 1; }
}
@keyframes ivds-wait-sand-b {
  0%, 40% { opacity: .18; }
  55%, 90% { opacity: .85; }
  100% { opacity: .18; }
}

.ivds-wait__head {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
  flex: 1 1 auto;
}

.ivds-wait__label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--wait-ink);
  transition: color .5s ease;
}

.ivds-wait__amount {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  color: var(--ivds-text);
}
.ivds-wait__amount b { font-size: 1.28rem; font-weight: 800; letter-spacing: -.01em; }
.ivds-wait__unit { font-size: .8rem; color: var(--ivds-muted); }

.ivds-wait__badge { flex: 0 0 auto; }

/* ── the body ──────────────────────────────────────────────────────────── */

.ivds-wait__body { padding: 1.05rem 1.1rem 1.2rem; }

.ivds-wait__lead {
  margin: 0 0 .35rem;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--ivds-text);
}
.ivds-wait__lead b { font-weight: 800; }

.ivds-wait__note {
  margin: 0 0 1rem;
  font-size: .86rem;
  line-height: 1.85;
  color: var(--ivds-muted);
}

.ivds-wait__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .7rem;
  margin-block-end: 1rem;
}

.ivds-wait__cell {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .8rem .9rem;
  background: var(--ivds-surface-2);
  border: 1px dashed var(--ivds-line);
  border-radius: var(--ivds-r-sm);
}

.ivds-wait__k {
  font-size: .74rem;
  font-weight: 600;
  color: var(--ivds-muted);
}

.ivds-wait__v {
  font-size: 1.16rem;
  font-weight: 800;
  color: var(--ivds-text);
  letter-spacing: .01em;
}

.ivds-wait__v--card {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.05rem;
}

.ivds-wait__hint {
  font-size: .74rem;
  line-height: 1.7;
  color: var(--ivds-faint);
}

/* ── the tracking form ─────────────────────────────────────────────────── */

.ivds-wait__form {
  padding-block-start: .95rem;
  border-block-start: 1px solid var(--ivds-line-soft);
}

.ivds-wait__tiny {
  margin: .6rem 0 0;
  font-size: .74rem;
  line-height: 1.8;
  color: var(--ivds-faint);
}

/* ── the paid state ────────────────────────────────────────────────────── */

.ivds-wait__done {
  display: none;
  align-items: flex-start;
  gap: .6rem;
  flex-direction: column;
  padding: .9rem 1rem;
  margin-block-start: .25rem;
  background: var(--ivds-good-wash);
  /* a plain colour rather than color-mix(): if a browser does not understand
     the function the whole border declaration is dropped and the panel loses
     its edge entirely. Not worth the risk for a 30% tint. */
  border: 1px solid var(--ivds-good);
  border-radius: var(--ivds-r-sm);
  font-size: .9rem;
  line-height: 1.8;
  color: var(--ivds-good);
}
.ivds-wait__done b { font-weight: 800; }
.ivds-wait__done span { color: var(--ivds-muted); font-size: .84rem; }

/* the hint line under each figure is 2.7:1 on the surface — too light to read
   on a phone in daylight, and it carries the one thing people get wrong
   (rounding the amount). It gets a legible tone. */
.ivds-wait__hint,
.ivds-wait__tiny { color: #556376; }

.ivds-wait.is-paid {
  --wait-accent: var(--ivds-good);
  --wait-wash:   var(--ivds-good-wash);
  --wait-ring:   rgba(14, 159, 110, .3);
  --wait-ink:    var(--wait-ink-good);
}

.ivds-wait.is-paid .ivds-wait__glass {
  animation: none;
  opacity: 0;
  transform: scale(.5) rotate(28deg);
}

.ivds-wait.is-paid .ivds-wait__tick {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.ivds-wait.is-paid .ivds-wait__done { display: flex; }

/* Once it is paid, the instruction and the card number have no job left: the
   customer is no longer being asked to send anything. Leaving them on screen
   under a green "paid" header reads as though the payment is still wanted. */
.ivds-wait.is-paid .ivds-wait__form,
.ivds-wait.is-paid .ivds-wait__note,
.ivds-wait.is-paid .ivds-wait__lead,
.ivds-wait.is-paid .ivds-wait__grid { display: none; }

/* one soft bloom outward the instant it flips — the only decorative motion */
.ivds-wait.is-paid::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, rgba(14, 159, 110, .16), transparent 60%);
  animation: ivds-wait-bloom .9s ease-out forwards;
}

@keyframes ivds-wait-bloom {
  from { opacity: 0; }
  35%  { opacity: 1; }
  to   { opacity: 0; }
}

/* ── dark mode ─────────────────────────────────────────────────────────── */

[data-theme="dark"] .ivds-wait {
  --wait-ink:      #FCD34D;
  --wait-ink-good: #6EE7B7;
}
[data-theme="dark"] .ivds-wait__cell { border-color: var(--ivds-line); }
[data-theme="dark"] .ivds-wait__glyph { background: #0B1119; }
[data-theme="dark"] .ivds-wait__hint,
[data-theme="dark"] .ivds-wait__tiny { color: #93A4B8; }
[data-theme="dark"] .ivds-wait__done { border-color: #1E6B53; }
[data-theme="dark"] .ivds-wait__done b { color: #6EE7B7; }

/* ── small screens ─────────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
  .ivds-wait__bar { padding: .8rem .85rem; gap: .65rem; }
  .ivds-wait__body { padding: .9rem .85rem 1rem; }
  .ivds-wait__amount b { font-size: 1.12rem; }
  .ivds-wait__grid { grid-template-columns: 1fr; }
  /* the badge would wrap awkwardly next to a long amount */
  .ivds-wait__bar { flex-wrap: wrap; }
  .ivds-wait__badge { order: 3; margin-inline-start: auto; }
}

/* ── reduced motion ────────────────────────────────────────────────────── */

/* The global rule already collapses durations, but the hourglass is
   decorative and repeating — better to stop it outright and let the static
   drawing carry the meaning. */
@media (prefers-reduced-motion: reduce) {
  .ivds-wait__glass,
  .ivds-wait__sand path { animation: none !important; }
  .ivds-wait.is-paid::after { animation: none !important; opacity: 0 !important; }
}

/* print: a paid receipt should not print the "waiting" styling */
@media print {
  .ivds-wait { box-shadow: none !important; border-color: #ccc !important; }
  .ivds-wait__glyph { box-shadow: none !important; }
}
/* Login split: full-bleed on desktop, normal flow on mobile */
.ivds-auth--page { margin: -2rem -1rem -3.5rem; }
@media (max-width: 991.98px) {
  .ivds-auth--page { margin: 0; }
}