.gt-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  pointer-events: none;
}

.gt-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 0;
  pointer-events: none;
}

.gt-hole {
  position: absolute;
  border: 2px solid var(--cyan, #08b6d5);
  border-radius: 16px;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, .48), 0 12px 30px rgba(8, 182, 213, .24);
  transition: top .16s ease, left .16s ease, width .16s ease, height .16s ease;
  z-index: 1;
  pointer-events: none;
}

.gt-card {
  position: absolute;
  width: min(340px, calc(100vw - 24px));
  border: 1px solid #dce8f1;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .22);
  color: var(--tx, #17212f);
  pointer-events: auto;
  overflow: hidden;
  z-index: 2;
}

.gt-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px 8px;
}

.gt-mark {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #e9fbff;
  color: #078ba6;
  font: 900 12px/1 "Roboto Condensed", Arial, sans-serif;
  flex: 0 0 auto;
}

.gt-title {
  min-width: 0;
  flex: 1;
}

.gt-title b {
  display: block;
  color: #17212f;
  font: 900 16px/1.08 "Roboto Condensed", Arial, sans-serif;
}

.gt-title span {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font: 700 10.5px/1 Roboto, Arial, sans-serif;
}

.gt-body {
  padding: 0 13px 12px;
  color: #334155;
  font: 500 13px/1.42 Roboto, Arial, sans-serif;
}

.gt-actions {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid #edf3f7;
  background: #fbfdff;
}

.gt-step {
  color: #94a3b8;
  font: 800 11px/1 "Roboto Condensed", Arial, sans-serif;
  white-space: nowrap;
}

.gt-btn {
  min-height: 34px;
  border: 1px solid #dce8f1;
  border-radius: 13px;
  background: #fff;
  color: #64748b;
  padding: 0 11px;
  font: 850 12px/1 "Roboto Condensed", Arial, sans-serif;
  cursor: pointer;
}

.gt-btn.primary {
  border-color: var(--cyan, #08b6d5);
  background: var(--cyan, #08b6d5);
  color: #fff;
}

.gt-btn.ghost {
  background: transparent;
}

[data-theme="dark"] .gt-card {
  background: var(--surface, #17212f);
  border-color: var(--bd, #334155);
  color: var(--tx, #e5edf5);
}

[data-theme="dark"] .gt-actions {
  background: var(--bg2, #111827);
  border-top-color: var(--bd, #334155);
}

[data-theme="dark"] .gt-title b {
  color: var(--tx, #e5edf5);
}

[data-theme="dark"] .gt-title span,
[data-theme="dark"] .gt-body,
[data-theme="dark"] .gt-step {
  color: var(--tx2, #a8b3c2);
}

[data-theme="dark"] .gt-btn {
  background: var(--surface, #17212f);
  border-color: var(--bd, #334155);
  color: var(--tx2, #a8b3c2);
}

[data-theme="dark"] .gt-btn.primary {
  background: var(--cyan, #08b6d5);
  border-color: var(--cyan, #08b6d5);
  color: #fff;
}

[data-theme="dark"] .gt-mark {
  background: rgba(8, 182, 213, .16);
  color: var(--cyan, #08b6d5);
}

.gt-target {
  position: relative;
  z-index: 1299;
}

@media (max-width: 430px) {
  .gt-card {
    border-radius: 16px;
  }
  .gt-actions {
    grid-template-columns: 1fr 1fr;
  }
  .gt-step {
    grid-column: 1 / -1;
    order: -1;
  }
}