/* ------------------------------------------------------------------
   Guided demo — non-blocking: no backdrop, every mark ignores the pointer
   except the guide card itself.
------------------------------------------------------------------- */
.gt-svg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 590; pointer-events: none; opacity: 0; transition: opacity .3s; overflow: visible; }
.gt-svg.show { opacity: 1; }
.gt-path { fill: none; stroke: url(#gtGrad); stroke: #a3e635; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 9 8; animation: gtFlow .9s linear infinite; filter: drop-shadow(0 0 6px rgba(163,230,53,.6)); }
.gt-path-glow { fill: none; stroke: rgba(25,211,197,.22); stroke-width: 9; stroke-linecap: round; }
.gt-comet { fill: #fff; filter: drop-shadow(0 0 6px #a3e635) drop-shadow(0 0 12px #19d3c5); }
@keyframes gtFlow { to { stroke-dashoffset: -17; } }

.gt-ring { position: fixed; z-index: 589; pointer-events: none; border-radius: 16px; opacity: 0; transition: left .5s cubic-bezier(.2,.9,.25,1), top .5s cubic-bezier(.2,.9,.25,1), width .5s cubic-bezier(.2,.9,.25,1), height .5s cubic-bezier(.2,.9,.25,1), opacity .3s;
  box-shadow: 0 0 0 2px #a3e635, 0 0 0 6px rgba(163,230,53,.18), 0 0 34px rgba(25,211,197,.45), inset 0 0 26px rgba(25,211,197,.14); }
.gt-ring.show { opacity: 1; }
.gt-ring i { position: absolute; inset: -2px; border-radius: inherit; border: 2px solid #19d3c5; animation: gtPing 1.8s ease-out infinite; }
@keyframes gtPing { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.04); } }
.gt-ring.small i { animation-name: gtPingS; }
@keyframes gtPingS { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
.gt-ring-l { position: absolute; left: 10px; top: -28px; white-space: nowrap; font-size: 11px; font-weight: 800; letter-spacing: .3px; color: #06121a; background: linear-gradient(90deg, #a3e635, #19d3c5); padding: 4px 10px; border-radius: 999px; box-shadow: 0 6px 16px rgba(0,0,0,.35); max-width: 70vw; overflow: hidden; text-overflow: ellipsis; }
.gt-ring.lbl-below .gt-ring-l { top: auto; bottom: -28px; }
.gt-ring.small .gt-ring-l { display: none; }

.gt-card { position: fixed; z-index: 600; width: 372px; max-width: calc(100vw - 24px); color: #e8f1f7; border-radius: 18px; padding: 12px 16px 14px;
  background: linear-gradient(160deg, rgba(14,40,44,.97), rgba(8,16,22,.97)); border: 1px solid rgba(25,211,197,.45);
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(163,230,53,.06), 0 0 40px rgba(25,211,197,.18); backdrop-filter: blur(14px);
  opacity: 0; pointer-events: none; transform: translateY(10px) scale(.98); transition: opacity .3s, transform .3s, left .45s cubic-bezier(.2,.9,.25,1), top .45s cubic-bezier(.2,.9,.25,1); }
.gt-card.show { opacity: 1; pointer-events: auto; transform: none; }
.gt-card.drag { transition: opacity .3s, transform .3s; cursor: grabbing; }
.gt-card.swap h3, .gt-card.swap p, .gt-card.swap .gt-tip { animation: gtSwap .4s ease both; }
@keyframes gtSwap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.gt-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px 120px at 0% 0%, rgba(25,211,197,.16), transparent 70%); }
.gt-top { display: flex; align-items: center; gap: 8px; cursor: grab; user-select: none; margin: 0 -4px 8px; padding: 2px 4px; touch-action: none; }
.gt-ch { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: #06121a; background: linear-gradient(90deg, #19d3c5, #a3e635); padding: 3px 9px; border-radius: 999px; }
.gt-n { font-size: 11px; color: #8aa1b1; font-family: var(--mono, monospace); }
.gt-sp { flex: 1; }
.gt-ib { appearance: none; width: 26px; height: 26px; border-radius: 8px; border: 1px solid rgba(120,190,220,.28); background: transparent; color: #a9bdcb; cursor: pointer; font-size: 14px; line-height: 1; display: grid; place-items: center; }
.gt-ib:hover { background: rgba(25,211,197,.14); color: #19d3c5; }
#gtX:hover { background: rgba(255,77,94,.16); color: #ff4d5e; }
.gt-prog { display: flex; gap: 3px; margin-bottom: 10px; }
.gt-prog button { flex: 1; height: 5px; padding: 0; border: 0; border-radius: 3px; background: rgba(120,170,200,.18); cursor: pointer; overflow: hidden; position: relative; }
.gt-prog button span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #19d3c5, #a3e635); border-radius: 3px; transition: width .4s; }
.gt-prog button.cur { box-shadow: 0 0 0 1px rgba(163,230,53,.5); }
.gt-prog button:hover { background: rgba(120,170,200,.32); }
.gt-card h3 { margin: 0 0 6px; font-size: 17px; letter-spacing: -.2px; color: #fff; }
.gt-card p { margin: 0; font-size: 13.4px; line-height: 1.55; color: #cfe0ea; }
.gt-tip { margin-top: 9px; font-size: 12.3px; line-height: 1.5; color: #d9f99d; background: rgba(163,230,53,.08); border: 1px solid rgba(163,230,53,.22); border-radius: 10px; padding: 7px 10px; }
.gt-tip::before { content: "💡 "; }
.gt-tip[hidden] { display: none; }
.gt-btns { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.gt-hint { flex: 1; text-align: center; font-size: 10.5px; color: #6f8797; }
.gt-b { appearance: none; border: 0; border-radius: 11px; padding: 9px 16px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; color: #06121a; background: linear-gradient(135deg, #19d3c5, #a3e635); box-shadow: 0 8px 20px rgba(25,211,197,.28); transition: transform .15s, box-shadow .15s; }
.gt-b:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(25,211,197,.36); }
.gt-b.ghost { background: transparent; color: #cfe0ea; border: 1px solid rgba(120,190,220,.3); box-shadow: none; }
.gt-b.ghost:disabled { opacity: .35; cursor: default; transform: none; }
.gt-b.wait { background: rgba(25,211,197,.14); color: #9ef0e6; box-shadow: none; border: 1px dashed rgba(25,211,197,.5); }
.gt-card.final { width: 420px; text-align: center; }
.gt-card.final .gt-btns { justify-content: center; }

.gt-pill, .gt-invite { position: fixed; left: 20px; bottom: 20px; z-index: 600; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; cursor: pointer; font: inherit; color: #e8f1f7;
  background: linear-gradient(135deg, rgba(14,40,44,.97), rgba(8,16,22,.97)); border: 1px solid rgba(25,211,197,.5); box-shadow: 0 14px 34px rgba(0,0,0,.45); animation: kmIn .35s both; }
.gt-pill[hidden], .gt-invite[hidden] { display: none; }
.gt-pill i, .gt-invite i { font-style: normal; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #06121a; background: linear-gradient(135deg, #19d3c5, #a3e635); font-size: 13px; box-shadow: 0 0 0 0 rgba(163,230,53,.5); animation: kmPulse 2.2s infinite; }
.gt-pill span, .gt-invite span { display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
.gt-pill b, .gt-invite b { font-size: 13px; }
.gt-pill small, .gt-invite small { font-size: 11px; color: #9fe9df; }
.gt-pill:hover, .gt-invite:hover { border-color: #a3e635; }
@keyframes kmIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes kmPulse { 0% { box-shadow: 0 0 0 0 rgba(25,211,197,.5); } 70% { box-shadow: 0 0 0 14px rgba(25,211,197,0); } 100% { box-shadow: 0 0 0 0 rgba(25,211,197,0); } }

/* login form nudge when "Next" is pressed before signing in */
.login-card.gt-nudge { animation: gtNudge .9s ease; }
@keyframes gtNudge { 0%, 100% { box-shadow: inherit; } 30% { box-shadow: 0 0 0 4px rgba(163,230,53,.6), 0 0 40px rgba(25,211,197,.5); } }

/* light theme */
:root[data-theme="light"] .gt-card, :root[data-theme="light"] .gt-pill, :root[data-theme="light"] .gt-invite { background: linear-gradient(160deg, rgba(255,255,255,.98), rgba(238,246,243,.98)); color: #0f2235; border-color: rgba(18,85,76,.4); box-shadow: 0 24px 60px rgba(15,34,53,.22), 0 0 30px rgba(18,85,76,.12); }
:root[data-theme="light"] .gt-card h3 { color: #0f2235; }
:root[data-theme="light"] .gt-card p { color: #33495a; }
:root[data-theme="light"] .gt-tip { color: #3f6212; background: rgba(102,143,69,.1); border-color: rgba(102,143,69,.3); }
:root[data-theme="light"] .gt-b.ghost { color: #33495a; border-color: rgba(15,34,53,.2); }
:root[data-theme="light"] .gt-pill small, :root[data-theme="light"] .gt-invite small { color: #12554C; }
:root[data-theme="light"] .gt-ib { color: #536576; border-color: rgba(15,34,53,.2); }
:root[data-theme="light"] .gt-path { stroke: #12a150; filter: drop-shadow(0 0 4px rgba(18,161,80,.45)); }
:root[data-theme="light"] .gt-ring { box-shadow: 0 0 0 2px #12a150, 0 0 0 6px rgba(18,161,80,.16), 0 0 30px rgba(18,85,76,.3); }
:root[data-theme="light"] .gt-ring i { border-color: #12554C; }

/* header button */
.tour-btn { width: auto !important; padding: 0 12px 0 10px !important; gap: 6px; display: inline-flex !important; align-items: center; font-weight: 700; font-size: 12.5px; color: #06121a !important; background: linear-gradient(135deg, #19d3c5, #a3e635) !important; border: 0 !important; }
.tour-btn:hover { filter: brightness(1.06); }
.lg-tour { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; padding: 10px; border-radius: 12px; border: 1px dashed rgba(25,211,197,.55); background: rgba(25,211,197,.07); color: #9ef0e6; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; transition: all .15s; }
.lg-tour:hover { background: rgba(25,211,197,.15); border-style: solid; }
@media (max-width: 1850px) { .tour-btn .t { display: none; } .tour-btn { padding: 0 10px !important; } }
@media (max-width: 760px) {
  .gt-card { left: 10px !important; right: 10px; width: auto; top: auto !important; bottom: 10px; padding: 10px 13px 12px; }
  .gt-card.m-top { top: 10px !important; bottom: auto; }
  .gt-card h3 { font-size: 15.5px; } .gt-card p { font-size: 12.8px; } .gt-tip { font-size: 11.6px; }
  .gt-hint { display: none; }
  .gt-svg { display: none; }
}
@media print { .gt-card, .gt-ring, .gt-svg, .gt-pill, .gt-invite { display: none !important; } }
/* keep the header from overlapping when the nav is wide */
.topbar .nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.topbar .nav::-webkit-scrollbar { display: none; }
.topbar .nav { justify-content: flex-start; }
.topbar .nav > :first-child { margin-left: auto; }
.topbar .nav > :last-child { margin-right: auto; }
.topbar .nav > button { flex: none; }