/* =============================================================
   states.css — cosmic "state page" template (404 / error / empty…)
   Premium, smooth; inherits tokens from styles.css
   ============================================================= */

.state-page {
  min-height: calc(100vh - 190px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 16px 20px 48px; gap: 2px;
  animation: stateFade .5s ease;
}
@keyframes stateFade { from { transform: translateY(10px); } to { transform: none; } }

/* hero */
.state-hero {
  position: relative; width: min(540px, 84vw); height: 250px;
  display: grid; place-items: center; margin-bottom: 2px;
}
.state-constellation { position: absolute; inset: 0; width: 100%; height: 100%; }
.state-star { transform-box: fill-box; transform-origin: center; animation: stateTwinkle 3.4s ease-in-out infinite; }
@keyframes stateTwinkle { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

.state-404 {
  position: relative; z-index: 2;
  font-family: var(--font-mono, "Space Grotesk", monospace);
  font-size: clamp(96px, 16vw, 168px); font-weight: 800; letter-spacing: 6px; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(192,132,255,0.92);
  text-shadow: 0 0 28px rgba(138,92,255,0.55), 0 0 64px rgba(138,92,255,0.30);
  animation: stateFloat 6s ease-in-out infinite;
}
@keyframes stateFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* probe that orbits the numerals along a motion path */
.state-probe {
  position: absolute; z-index: 1; width: 10px; height: 10px; border-radius: 999px;
  background: radial-gradient(circle, #fff 0%, #62DDFF 60%, rgba(98,221,255,0) 100%);
  box-shadow: 0 0 14px 3px rgba(98,221,255,0.7);
  offset-path: path("M 28 150 a 232 120 0 1 0 464 0 a 232 120 0 1 0 -464 0");
  offset-rotate: 0deg; animation: stateOrbit 16s linear infinite;
}
@keyframes stateOrbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* copy */
.state-title { margin: 18px 0 0; font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; color: #fff; white-space: nowrap; }
.state-sub { margin: 14px auto 0; max-width: 500px; font-size: 15px; line-height: 1.9; color: var(--text-soft, #c7cce0); text-wrap: pretty; }

/* actions */
.state-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; }
.state-btn {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-soft, #dfe4f2); font-size: 14px; font-weight: 600;
  padding: 13px 22px; border-radius: 14px; transition: all .18s ease;
}
.state-btn:hover { background: rgba(98,221,255,0.10); border-color: rgba(98,221,255,0.4); color: #fff; transform: translateY(-2px); }
.state-btn-arrow { font-size: 16px; opacity: .8; }
.state-btn.primary {
  background: linear-gradient(135deg, rgba(138,92,255,0.92), rgba(109,59,255,0.92));
  border-color: rgba(160,120,255,0.6); color: #fff;
  box-shadow: 0 10px 30px rgba(109,59,255,0.34), inset 0 1px 0 rgba(255,255,255,0.18);
}
.state-btn.primary:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 14px 38px rgba(109,59,255,0.46); }

/* support link */
.state-support {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: none; border: none; margin-top: 22px;
  color: var(--cyan, #62DDFF); font-size: 13px; font-weight: 600; opacity: .85; transition: all .16s ease;
}
.state-support:hover { opacity: 1; text-shadow: 0 0 12px rgba(98,221,255,0.5); }

@media (prefers-reduced-motion: reduce) {
  .state-404, .state-probe, .state-star, .state-page { animation: none; }
}

/* =============================================================
   empty "no chart" state
   ============================================================= */
.empty-state {
  display: grid; grid-template-columns: 1fr 440px; gap: 28px; align-items: center;
  min-height: calc(100vh - 200px); padding: 8px 6px 40px;
  animation: stateFade .5s ease;
}

.empty-ghost { position: relative; height: 460px; display: grid; place-items: center; }
.ghost-bg { height: 100%; width: 100%; }
.empty-ghost-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(138,92,255,0.16), transparent 62%);
}

.empty-panel {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: linear-gradient(180deg, rgba(18,22,42,0.6), rgba(11,14,28,0.55));
  border: 1px solid rgba(255,255,255,0.08); border-radius: 24px;
  padding: 36px 30px; backdrop-filter: blur(8px);
  box-shadow: 0 18px 60px rgba(0,0,0,0.34);
}
.empty-icon {
  width: 60px; height: 60px; border-radius: 999px; display: grid; place-items: center;
  color: #C9B6FF; background: rgba(138,92,255,0.14); border: 1px solid rgba(138,92,255,0.4);
  box-shadow: 0 0 24px rgba(138,92,255,0.3); margin-bottom: 18px;
}
.empty-title { margin: 0; font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; color: #fff; line-height: 1.35; }
.empty-sub { margin: 14px 0 24px; font-size: 14px; line-height: 1.9; color: var(--text-soft, #c7cce0); text-wrap: pretty; }

.empty-btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer; font-size: 14.5px; font-weight: 700; padding: 15px 20px; border-radius: 14px;
  margin-bottom: 12px; transition: all .18s ease;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color: var(--text-soft, #dfe4f2);
}
.empty-btn:hover { border-color: rgba(98,221,255,0.4); color: #fff; transform: translateY(-2px); }
.empty-btn.primary {
  background: linear-gradient(135deg, rgba(138,92,255,0.95), rgba(109,59,255,0.95));
  border-color: rgba(160,120,255,0.6); color: #fff;
  box-shadow: 0 12px 32px rgba(109,59,255,0.36), inset 0 1px 0 rgba(255,255,255,0.18);
}
.empty-btn.primary:hover { filter: brightness(1.1); box-shadow: 0 16px 40px rgba(109,59,255,0.48); }
.empty-btn-ic { font-size: 20px; line-height: 1; opacity: .9; }
.empty-btn.ghost { background: transparent; border-style: dashed; }

.empty-or { width: 100%; display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; color: var(--text-muted, #8b91a8); font-size: 12.5px; }
.empty-or::before, .empty-or::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.10); }

.empty-privacy { display: inline-flex; align-items: center; gap: 7px; margin: 16px 0 0; color: var(--gold-2, #f8c648); font-size: 12px; opacity: .8; }

/* responsive: stack to a single, panel-only column on narrow widths
   (placed last so it overrides the base .empty-ghost display) */
@media (max-width: 1040px) {
  .empty-state { grid-template-columns: 1fr; gap: 0; justify-items: center; }
  .empty-ghost { display: none; }
  .empty-panel { max-width: 460px; }
}

/* =============================================================
   chart-generation loading state
   ============================================================= */
.ld-state {
  display: grid; grid-template-columns: 1fr minmax(420px, 1.4fr) 1fr; gap: 22px;
  align-items: start; padding: 6px 4px 40px; animation: stateFade .5s ease;
}

.ld-side { display: flex; flex-direction: column; gap: 18px; padding-top: 30px; }

/* skeleton cards */
.ld-skel {
  background: linear-gradient(180deg, rgba(18,22,42,0.6), rgba(11,14,28,0.55));
  border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 16px;
}
.ld-skel-head { margin-bottom: 14px; }
.ld-skel-pill, .ld-skel-row {
  display: block; border-radius: 7px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.10) 37%, rgba(255,255,255,0.04) 63%);
  background-size: 360px 100%; animation: ldShimmer 1.4s linear infinite;
}
.ld-skel-pill { width: 44%; height: 13px; }
.ld-skel-rows { display: flex; flex-direction: column; gap: 11px; }
.ld-skel-row { height: 10px; }
@keyframes ldShimmer { from { background-position: -180px 0; } to { background-position: 360px 0; } }

/* center hero */
.ld-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 6px; }
.ld-title { margin: 0; font-size: clamp(22px, 3vw, 32px); font-weight: 800; color: #fff; line-height: 1.3; white-space: nowrap; }
.ld-sub { margin: 12px 0 0; font-size: 14.5px; color: var(--text-soft, #c7cce0); }

.ld-ring-wrap { position: relative; width: 320px; height: 320px; margin: 18px 0 6px; display: grid; place-items: center; }
.ld-ghost { position: absolute; width: 60%; height: 78%; display: grid; place-items: center; opacity: .9; }
.ld-ghost .ghost-bg { height: 100%; }
.ld-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
/* a glowing spark that rides the ring head */
.ld-spark {
  position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 999px;
  background: radial-gradient(circle, #fff, #C084FF 60%, transparent 100%);
  box-shadow: 0 0 14px 3px rgba(192,132,255,0.8);
  transform: rotate(var(--ang)) translateY(-138px);
  transition: transform .2s linear;
}

.ld-pct {
  font-family: var(--font-mono, monospace); font-size: 34px; font-weight: 800;
  color: transparent; background: linear-gradient(135deg, #8fe6ff, #C084FF); -webkit-background-clip: text; background-clip: text;
  margin-top: 2px;
}
.ld-pct small { font-size: 18px; opacity: .8; margin-inline-start: 2px; }

/* steps card */
.ld-card {
  width: min(440px, 92%); margin-top: 18px; text-align: start;
  background: linear-gradient(180deg, rgba(20,24,46,0.82), rgba(12,15,30,0.82));
  border: 1px solid rgba(138,92,255,0.26); border-radius: 18px; padding: 16px 18px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.34);
}
.ld-card-h { display: flex; align-items: center; gap: 8px; color: #C9B6FF; }
.ld-card-h strong { font-size: 14px; font-weight: 700; }
.ld-card-sub { margin: 8px 0 14px; font-size: 12.5px; line-height: 1.8; color: var(--text-muted, #8b91a8); }
.ld-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ld-step { display: flex; align-items: center; gap: 11px; font-size: 13.5px; transition: color .3s; }
.ld-step-ic {
  width: 20px; height: 20px; border-radius: 999px; flex-shrink: 0; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; border: 1.5px solid rgba(150,160,210,0.3); color: #06121f;
}
.ld-step.wait { color: var(--text-muted, #8b91a8); opacity: .55; }
.ld-step.wait .ld-step-ic { background: transparent; }
.ld-step.active { color: #fff; }
.ld-step.active .ld-step-ic { border-color: rgba(98,221,255,0.6); }
.ld-step.done { color: #cfe8d8; }
.ld-step.done .ld-step-ic { background: linear-gradient(135deg, #6ee0a4, #3fb87a); border-color: transparent; box-shadow: 0 0 10px rgba(99,207,134,0.4); }
.ld-spin { width: 11px; height: 11px; border-radius: 999px; border: 2px solid rgba(98,221,255,0.3); border-top-color: #62DDFF; animation: ldSpin .8s linear infinite; }
@keyframes ldSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ld-skel-pill, .ld-skel-row, .ld-spin, .ld-spark, .ld-state { animation: none; }
}

/* responsive: hero-only single column on narrow widths (placed last to win the cascade) */
@media (max-width: 1100px) {
  .ld-state { grid-template-columns: 1fr; justify-items: center; }
  .ld-side { display: none; }
}

/* =============================================================
   error / offline glyph illustration
   ============================================================= */
.state-glyph {
  position: relative; z-index: 2; width: 120px; height: 120px; border-radius: 999px;
  display: grid; place-items: center; color: #9BEBFF;
  background: radial-gradient(circle at 50% 40%, rgba(98,221,255,0.14), rgba(20,26,48,0.5));
  border: 1.5px solid rgba(98,221,255,0.4);
  box-shadow: 0 0 36px rgba(98,221,255,0.28), inset 0 0 24px rgba(98,221,255,0.12);
  animation: stateFloat 6s ease-in-out infinite;
}
.state-glyph.danger {
  color: #ff9ba6; background: radial-gradient(circle at 50% 40%, rgba(244,95,95,0.16), rgba(40,18,28,0.5));
  border-color: rgba(244,95,95,0.45); box-shadow: 0 0 36px rgba(244,95,95,0.3), inset 0 0 24px rgba(244,95,95,0.12);
}
.state-glyph-ring {
  position: absolute; inset: -10px; border-radius: 999px; border: 1px solid currentColor; opacity: .35;
  animation: stateGlyphPulse 2.6s ease-out infinite;
}
@keyframes stateGlyphPulse { 0% { transform: scale(.92); opacity: .5; } 100% { transform: scale(1.28); opacity: 0; } }
.state-glyph-mark { font-family: var(--font-mono, monospace); font-size: 52px; font-weight: 800; line-height: 1; }
.state-glyph-svg { color: #9BEBFF; }
.state-btn-rot { font-size: 17px; display: inline-block; }

/* =============================================================
   toasts
   ============================================================= */
.hd-toasts {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 9999; display: flex; flex-direction: column; gap: 10px; align-items: center;
  pointer-events: none; width: min(420px, 92vw);
}
.hd-toast {
  pointer-events: auto; width: 100%;
  display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(18,22,40,0.98), rgba(10,13,26,0.98));
  border: 1px solid rgba(98,221,255,0.28); backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
  opacity: 1; transform: none; animation: hdToastIn .32s cubic-bezier(.3,1.2,.5,1);
}
@keyframes hdToastIn { from { transform: translateY(-12px) scale(.97); } to { transform: none; } }
.hd-toast.out { opacity: 0; transform: translateY(-10px) scale(.97); transition: opacity .3s ease, transform .3s ease; }
.hd-toast-ic {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center;
  font-family: var(--font-mono, monospace); font-weight: 800; font-size: 14px; color: #06121f;
}
.hd-toast.success { border-color: rgba(99,207,134,0.4); }
.hd-toast.success .hd-toast-ic { background: linear-gradient(135deg, #6ee0a4, #3fb87a); box-shadow: 0 0 12px rgba(99,207,134,0.5); }
.hd-toast.error { border-color: rgba(244,95,95,0.4); }
.hd-toast.error .hd-toast-ic { background: linear-gradient(135deg, #ff9ba6, #f45f5f); box-shadow: 0 0 12px rgba(244,95,95,0.5); }
.hd-toast.info .hd-toast-ic { background: linear-gradient(135deg, #8fe6ff, #62DDFF); box-shadow: 0 0 12px rgba(98,221,255,0.5); }
.hd-toast.warning .hd-toast-ic { background: linear-gradient(135deg, #ffd98a, #f8c648); box-shadow: 0 0 12px rgba(248,198,72,0.5); }
.hd-toast-body { flex: 1; min-width: 0; }
.hd-toast-body strong { display: block; color: #fff; font-size: 13.5px; font-weight: 700; }
.hd-toast-body p { margin: 3px 0 0; color: var(--text-soft, #c7cce0); font-size: 12.5px; line-height: 1.6; }
.hd-toast-x { flex-shrink: 0; background: none; border: none; color: var(--text-muted, #8b91a8); font-size: 18px; cursor: pointer; line-height: 1; padding: 0 2px; transition: color .15s; }
.hd-toast-x:hover { color: #fff; }

/* =============================================================
   confirmation modal
   ============================================================= */
.hd-modal-ov {
  position: fixed; inset: 0; z-index: 9998; display: grid; place-items: center; padding: 20px;
  background: rgba(4,6,16,0.7); backdrop-filter: blur(6px); opacity: 1;
}
.hd-modal {
  width: min(400px, 94vw); text-align: center; padding: 28px 26px 22px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(20,24,44,0.99), rgba(12,15,30,0.99));
  border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 24px 70px rgba(0,0,0,0.6);
  transform: none; animation: hdModalIn .26s cubic-bezier(.3,1.2,.5,1);
}
@keyframes hdModalIn { from { transform: scale(.92); } to { transform: none; } }
.hd-modal-ic {
  width: 56px; height: 56px; border-radius: 999px; margin: 0 auto 16px; display: grid; place-items: center;
  font-family: var(--font-mono, monospace); font-size: 28px; font-weight: 800;
  color: #C9B6FF; background: rgba(138,92,255,0.16); border: 1px solid rgba(138,92,255,0.4);
}
.hd-modal-ic.danger { color: #ff9ba6; background: rgba(244,95,95,0.14); border-color: rgba(244,95,95,0.45); box-shadow: 0 0 26px rgba(244,95,95,0.28); }
.hd-modal h3 { margin: 0; font-size: 19px; font-weight: 800; color: #fff; }
.hd-modal p { margin: 10px 0 22px; font-size: 13.5px; line-height: 1.85; color: var(--text-soft, #c7cce0); }
.hd-modal-actions { display: flex; gap: 10px; }
.hd-modal-btn { flex: 1; cursor: pointer; font-size: 14px; font-weight: 700; padding: 12px; border-radius: 12px; transition: all .16s ease; }
.hd-modal-btn.cancel { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); color: var(--text-soft, #dfe4f2); }
.hd-modal-btn.cancel:hover { background: rgba(255,255,255,0.10); color: #fff; }
.hd-modal-btn.confirm { background: linear-gradient(135deg, rgba(138,92,255,0.95), rgba(109,59,255,0.95)); border: 1px solid rgba(160,120,255,0.6); color: #fff; }
.hd-modal-btn.confirm.danger { background: linear-gradient(135deg, #f4677a, #e23b54); border-color: rgba(244,95,95,0.6); box-shadow: 0 10px 28px rgba(226,59,84,0.4); }
.hd-modal-btn.confirm:hover { filter: brightness(1.1); }

/* =============================================================
   feedback gallery (demo)
   ============================================================= */
.fb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 8px; }
@media (max-width: 760px) { .fb-grid { grid-template-columns: 1fr; } }
.fb-card { padding: 22px; border-radius: 18px; background: linear-gradient(180deg, rgba(18,22,42,0.6), rgba(11,14,28,0.55)); border: 1px solid rgba(255,255,255,0.08); }
.fb-card-h { margin: 0 0 16px; font-size: 15px; font-weight: 700; color: #fff; }
.fb-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.fb-btn { cursor: pointer; font-size: 13.5px; font-weight: 700; padding: 11px 18px; border-radius: 12px; border: 1px solid; transition: all .16s ease; }
.fb-btn:hover { transform: translateY(-2px); }
.fb-btn.ok { color: #7be0a4; border-color: rgba(99,207,134,0.4); background: rgba(99,207,134,0.08); }
.fb-btn.err { color: #ff9ba6; border-color: rgba(244,95,95,0.4); background: rgba(244,95,95,0.08); }
.fb-btn.info { color: #8fe6ff; border-color: rgba(98,221,255,0.4); background: rgba(98,221,255,0.08); }
.fb-btn.danger { color: #ff9ba6; border-color: rgba(244,95,95,0.5); background: rgba(244,95,95,0.10); }

@media (prefers-reduced-motion: reduce) {
  .state-glyph, .state-glyph-ring, .hd-toast, .hd-modal, .hd-modal-ov { animation: none; transition: none; }
}

/* =============================================================
   "How to read this screen?" help modal (PageHeader)
   ============================================================= */
.help-modal-ov {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 24px;
  background: rgba(3,5,14,0.66); backdrop-filter: blur(8px);
  animation: helpOvIn .22s ease both;
}
@keyframes helpOvIn { from { opacity: 0; } to { opacity: 1; } }
.help-modal {
  position: relative; width: min(560px, 95vw); max-height: 86vh; overflow-y: auto;
  border-radius: 26px; padding: 30px 30px 26px;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(138,92,255,0.18), transparent 60%),
    linear-gradient(180deg, rgba(20,18,42,0.97), rgba(10,11,26,0.98));
  border: 1px solid rgba(138,92,255,0.4);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.07);
  animation: helpModalIn .34s cubic-bezier(.16,1,.3,1) both;
}
@keyframes helpModalIn { from { transform: translateY(14px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.app-shell.rtl .help-modal, .flow-root.rtl .help-modal { text-align: right; }
.app-shell.ltr .help-modal { text-align: left; }
.help-modal-x {
  position: absolute; top: 16px; inset-inline-end: 16px;
  width: 32px; height: 32px; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center; color: var(--text-muted, #aaa);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  transition: all .16s ease;
}
.help-modal-x:hover { color: #fff; background: rgba(255,255,255,0.12); transform: rotate(90deg); }
.help-modal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-inline-end: 36px; }
.help-modal-badge {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  color: var(--cyan, #62DDFF); background: rgba(98,221,255,0.12); border: 1px solid rgba(98,221,255,0.4);
  box-shadow: 0 0 22px rgba(98,221,255,0.22);
}
.help-modal h3 { margin: 0; font-size: 21px; font-weight: 800; color: #fff; line-height: 1.3; }
.help-modal-intro { margin: 0 0 18px; font-size: 14px; line-height: 1.9; color: var(--text-soft, #d5d7f2); }
.help-modal-sections { display: flex; flex-direction: column; gap: 14px; }
.help-modal-block {
  border-radius: 14px; padding: 13px 16px;
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08);
  border-inline-start: 2px solid rgba(138,92,255,0.55);
}
.help-modal-block-h { display: block; font-size: 13.5px; font-weight: 800; color: var(--violet, #C084FF); margin-bottom: 5px; }
.help-modal-block p { margin: 0; font-size: 13px; line-height: 1.85; color: var(--text-soft, #cdd0ea); }
.help-modal-tip {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 18px;
  border-radius: 14px; padding: 13px 16px;
  background: rgba(98,221,255,0.07); border: 1px solid rgba(98,221,255,0.28);
}
.help-modal-tip-ic { flex-shrink: 0; color: var(--cyan, #62DDFF); margin-top: 1px; }
.help-modal-tip span:last-child { font-size: 12.5px; line-height: 1.8; color: var(--text-soft, #cdd0ea); }
.help-modal-done {
  margin-top: 20px; width: 100%; cursor: pointer;
  padding: 13px; border-radius: 13px; font-family: inherit; font-size: 14px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, rgba(138,92,255,0.95), rgba(109,59,255,0.95));
  border: 1px solid rgba(160,120,255,0.6); transition: filter .16s ease, transform .16s ease;
}
.help-modal-done:hover { filter: brightness(1.1); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .help-modal-ov, .help-modal { animation: none; }
  .help-modal-x:hover { transform: none; }
}