/* ===== Tutorial window: structure (see index.html's #tutorial-overlay) =====
   Grouped sidebar (Start / Trading / Safety / More), an icon per topic, a
   "key point" box at the top of each topic, and a readable line length. */
.tutorial-nav-group {
    margin: 0.9em 0.7em 0.25em;
    color: #6f7686;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tutorial-nav-group:first-child {
    margin-top: 0.2em;
}

.tutorial-nav-item {
    display: flex;
    align-items: center;
    gap: 0.55em;
}

.tutorial-nav-icon {
    flex-shrink: 0;
    width: 1.3em;
    text-align: center;
}

.tutorial-content > .tutorial-topic {
    max-width: 820px;
}

.tutorial-content h3 {
    font-size: clamp(16px, 2vw, 20px);
}

.tutorial-content .tutorial-key {
    margin: 0 0 1.1em;
    padding: 0.75em 1em;
    border-left: 3px solid #2962ff;
    border-radius: 0 8px 8px 0;
    background: rgba(41, 98, 255, 0.1);
    color: #e3e7f0;
    font-weight: 600;
}

.tutorial-subhead {
    margin: 1.3em 0 0.6em;
    color: #8b93a5;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.quick-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.7em;
    margin: 0;
    padding: 0;
    list-style: none;
}

.quick-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    padding: 0.9em 1em 0.9em 3.1em;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    font-size: clamp(13px, 1.5vw, 14px);
    line-height: 1.45;
}

.quick-step-num {
    position: absolute;
    top: 0.85em;
    left: 0.9em;
    display: grid;
    place-items: center;
    width: 1.6em;
    height: 1.6em;
    border-radius: 50%;
    background: #2962ff;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.quick-step-icon {
    position: absolute;
    top: 0.8em;
    right: 0.9em;
    font-size: 1.2em;
}

.quick-step strong {
    color: #fff;
}

.quick-step-text {
    color: #aab1c0;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    align-items: start;
    gap: 0.7em;
}

.feature-card {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    padding: 0.85em 1em;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    color: #aab1c0;
    font-size: clamp(12.5px, 1.4vw, 13.5px);
    line-height: 1.45;
}

.feature-card strong {
    color: #fff;
    font-size: 1.05em;
}

.feature-card-icon {
    font-size: 1.35em;
}

/* Collapsed to icon + heading; tapping the summary unfolds the one-line
   text below it (native <details>). */
.feature-card > summary {
    display: flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
    list-style: none;
}

.feature-card > summary::-webkit-details-marker {
    display: none;
}

.feature-card > summary::after {
    content: '▸';
    margin-left: auto;
    color: #6b7385;
    transition: transform 0.15s ease;
}

.feature-card[open] > summary::after {
    transform: rotate(90deg);
}

.feature-card[open] {
    background: rgba(255, 255, 255, 0.05);
}

.gesture-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: clamp(13px, 1.5vw, 14.5px);
    line-height: 1.5;
}

.gesture-list li {
    display: flex;
    align-items: baseline;
    gap: 0.7em;
    padding: 0.45em 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.gesture-icon {
    flex-shrink: 0;
    width: 3em;
    text-align: center;
    white-space: nowrap;
}

/* ===== Radial menu demo (radialMenuDemo.js) =====
   A 560x340 stage scaled to the available width; the wheel copies the
   real one's look (.radial-wheel above). */
.radial-demo {
    margin: 0 0 0.5em;
    padding: 0.8em;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
}

.rd-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    margin-bottom: 0.7em;
}

.rd-controls button {
    padding: 0.4em 0.8em;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: #b8bcc4;
    font-size: 13px;
    cursor: pointer;
}

.rd-controls button:hover {
    color: #fff;
}

.rd-controls .rd-play {
    min-width: 2.6em;
    background: #2962ff;
    border-color: #2962ff;
    color: #fff;
}

.rd-controls .rd-scene-btn.active {
    border-color: rgba(41, 98, 255, 0.7);
    background: rgba(41, 98, 255, 0.2);
    color: #90caf9;
    font-weight: 600;
}

.rd-stage-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    background: #131722;
}

.rd-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 560px;
    height: 340px;
    overflow: hidden;
    transform-origin: 0 0;
    user-select: none;
    pointer-events: none;
}

.rd-candles,
.rd-lines,
.rd-effects,
.rd-tint {
    position: absolute;
    inset: 0;
}

.rd-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px solid var(--c);
}

.rd-line.dashed {
    border-top-style: dashed;
}

.rd-ref {
    border-top-width: 1px;
}

.rd-line-tag {
    position: absolute;
    right: 4px;
    bottom: 1px;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--c);
    color: #0f131c;
    font: 700 10px/1.4 system-ui, sans-serif;
    white-space: nowrap;
}

.rd-wheel {
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0;
    transition: transform 0.18s ease-out, opacity 0.18s ease-out;
    background:
        conic-gradient(from 0deg,
            rgba(255, 255, 255, 0.3) 0deg 1.5deg, transparent 1.5deg 60deg,
            rgba(255, 255, 255, 0.3) 60deg 61.5deg, transparent 61.5deg 120deg,
            rgba(255, 255, 255, 0.3) 120deg 121.5deg, transparent 121.5deg 180deg,
            rgba(255, 255, 255, 0.3) 180deg 181.5deg, transparent 181.5deg 225deg,
            rgba(255, 255, 255, 0.3) 225deg 226.5deg, transparent 226.5deg 315deg,
            rgba(255, 255, 255, 0.3) 315deg 316.5deg, transparent 316.5deg 360deg),
        rgba(19, 23, 34, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
}

.rd-wheel.open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.rd-wheel-hole {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38%;
    height: 38%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(19, 23, 34, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* 🎡 - like the real one (.radial-wheel-hole): a tap opens the settings */
    display: grid;
    place-items: center;
    font-size: 19px;
    line-height: 1;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.rd-wheel-hole.hot {
    border-color: #2962ff;
    box-shadow: 0 0 0 3px rgba(41, 98, 255, 0.45);
}

.rd-wheel-label {
    position: absolute;
    transform: translate(-50%, -50%);
    color: #b9c0d4;
    font: 700 11px/1 system-ui, sans-serif;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.rd-wheel-label.hot {
    color: #fff;
    text-shadow: 0 0 8px #2962ff, 0 0 16px #2962ff;
}

.rd-chips {
    position: absolute;
    inset: 0;
}

.rd-chip {
    position: absolute;
    transform: translate(-50%, -50%);
    padding: 0.45em 0.8em;
    border: 1px solid rgba(41, 98, 255, 0.5);
    border-radius: 999px;
    background: rgba(19, 23, 34, 0.95);
    color: #d1d4dc;
    font: 700 11px/1 system-ui, sans-serif;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    animation: rd-pop 0.18s ease-out;
}

.rd-chip.hot {
    border-color: #2962ff;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(41, 98, 255, 0.5), 0 6px 18px rgba(0, 0, 0, 0.5);
}

@keyframes rd-pop {
    from { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
}

.rd-ghost,
.rd-emoji {
    position: absolute;
    transform: translate(-50%, -50%);
}

.rd-emoji {
    font-size: 26px;
    line-height: 1;
}

.rd-finger {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6));
    transform-origin: 14px 3px;
}

.rd-ripple {
    position: absolute;
    z-index: 2;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 50%;
    background: rgba(144, 202, 249, 0.35);
    border: 2px solid rgba(144, 202, 249, 0.8);
    opacity: 0;
    transform: scale(0.5);
}

.rd-ripple.held {
    opacity: 1;
    transform: scale(0.8);
}

.rd-ripple.pulse {
    animation: rd-pulse 0.3s ease-out;
}

@keyframes rd-pulse {
    0% { opacity: 1; transform: scale(0.4); }
    100% { opacity: 0; transform: scale(1.4); }
}

.rd-hole {
    position: absolute;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: radial-gradient(circle, #05070b 0 35%, #2b2f3a 45%, transparent 70%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.rd-tint {
    transition: background-color 3s ease-out;
}

.rd-tint.flash {
    background-color: #000;
    transition: none;
}

.rd-tint.green {
    background-color: rgba(38, 166, 154, 0.22);
    transition: background-color 0.4s ease-out;
}

.tutorial-content .rd-caption {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
    min-height: 3em;
    margin: 0.7em 0 0;
    color: #e3e7f0;
    font-size: clamp(13px, 1.5vw, 14.5px);
}

.rd-step {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 1.6em;
    height: 1.6em;
    border-radius: 50%;
    background: #2962ff;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.rd-wheel-label.emoji {
    font-size: 16px;
}

.rd-bubble {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border: 1px solid rgba(41, 98, 255, 0.6);
    border-radius: 50%;
    background: rgba(19, 23, 34, 0.95);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    font-size: 24px;
    line-height: 1;
    opacity: 0;
}

.rd-bubble.pop {
    animation: rd-bubble 0.9s ease-out;
}

@keyframes rd-bubble {
    0% { opacity: 0; transform: scale(0.4); }
    20% { opacity: 1; transform: scale(1.1); }
    35% { transform: scale(1); }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

/* Scene 4 (radialMenuDemo.js's sceneInfo): a ring filling up around the
   resting finger, then the info text - same look as the real wheel's
   .radial-info (components/radial-menu-gags.css). Parked bottom right in
   the stage, clear of the wheel and its tool chips. */
.rd-hold {
    position: absolute;
    z-index: 2;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border-radius: 50%;
    opacity: 0;
    --p: 0;
    background: conic-gradient(#9C27B0 calc(var(--p) * 1turn), transparent 0);
    -webkit-mask: radial-gradient(circle, transparent 17px, #000 18px);
    mask: radial-gradient(circle, transparent 17px, #000 18px);
}

@property --p {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

.rd-hold.filling {
    opacity: 1;
    animation: rd-hold-fill 0.7s linear forwards;
}

@keyframes rd-hold-fill {
    from { --p: 0; }
    to   { --p: 1; }
}

.rd-info {
    position: absolute;
    z-index: 2;
    left: 345px;
    top: 245px;
    width: 200px;
    padding: 8px 10px;
    background: #1b1530;
    border: 1px solid rgba(156, 39, 176, 0.7);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    color: #e6e1f0;
    font-size: 12.5px;
    line-height: 1.35;
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
    pointer-events: none;
}

.rd-info.show {
    opacity: 1;
    transform: none;
}

/* Scenes 5-7 (radialMenuDemo.js's SFP / Failed Auction scenes): the
   stage's own "Place Order", a toast for what the order did, and dots on
   the fib's anchors. */
.rd-order {
    position: absolute;
    z-index: 1;
    transform: translate(-50%, -50%);
    padding: 5px 12px;
    border-radius: 6px;
    background: #2962ff;
    color: #fff;
    font: 700 11px/1.3 system-ui, sans-serif;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.rd-order.show {
    opacity: 1;
}

.rd-order.pressed {
    animation: rd-order-press 0.5s ease-out;
}

@keyframes rd-order-press {
    0% { box-shadow: 0 0 0 0 rgba(41, 98, 255, 0.9); transform: translate(-50%, -50%) scale(0.92); }
    100% { box-shadow: 0 0 0 14px rgba(41, 98, 255, 0); transform: translate(-50%, -50%) scale(1); }
}

.rd-toast {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 12px;
    padding: 6px 12px;
    border: 1px solid rgba(38, 166, 154, 0.6);
    border-radius: 8px;
    background: #102420;
    color: #b2f0e6;
    font: 700 12px/1.3 system-ui, sans-serif;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translate(-50%, -8px);
}

.rd-toast.show {
    animation: rd-toast 2.6s ease-out forwards;
}

@keyframes rd-toast {
    0% { opacity: 0; transform: translate(-50%, -8px); }
    10%, 80% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, 0); }
}

.rd-dot {
    position: absolute;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 0 3px rgba(201, 206, 212, 0.25);
    animation: rd-dot-in 0.3s ease-out;
}

@keyframes rd-dot-in {
    from { transform: scale(2.4); opacity: 0; }
}

.rd-line {
    animation: rd-line-in 0.25s ease-out;
}

/* The SFP level hidden by Market + now (sceneSfpMarket). */
.rd-line.gone {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

/* Scene 6 (sceneSfpMarket): the SFP's dropdowns on its level and its SL's
   side button - the real ones' look (.sfp-level-tools / .sfp-sl-tools,
   components/line-popups.css), and the order type's opened list. */
.rd-selects {
    position: absolute;
    display: flex;
    gap: 4px;
    transform: translateY(-50%);
    transition: top 0.5s ease-out;
}

.rd-select {
    height: 18px;
    padding: 0 7px;
    box-sizing: border-box;
    border: 1px solid #2962ff;
    border-radius: 9px;
    background: rgba(19, 23, 34, 0.92);
    color: #5b8cff;
    font: 700 10px/16px system-ui, sans-serif;
    white-space: nowrap;
}

.rd-select.sl {
    border-color: #ef5350;
    color: #ef5350;
}

.rd-select-list {
    position: absolute;
    z-index: 2;
    padding: 3px 0;
    border: 1px solid #2962ff;
    border-radius: 6px;
    background: #131722;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    animation: rd-line-in 0.15s ease-out;
}

.rd-select-option {
    padding: 3px 10px;
    color: #d1d4dc;
    font: 700 10px/1.3 system-ui, sans-serif;
    white-space: nowrap;
}

.rd-select-option.hot {
    background: #2962ff;
    color: #fff;
}

@keyframes rd-line-in {
    from { opacity: 0; }
}

/* Last scene (sceneSettings): a stage-sized copy of the tool settings
   window (ui/toolSettings.js - the tutorial's shell, .tutorial-box/-nav-item). */
.rd-settings {
    position: absolute;
    inset: 14px 22px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: #131722;
    color: #d1d4dc;
    font: 11px/1.3 system-ui, sans-serif;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    animation: rd-settings-in 0.2s ease-out;
}

.rd-settings.closing {
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

@keyframes rd-settings-in {
    from { opacity: 0; transform: scale(0.94); }
}

.rd-set-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
}

.rd-set-close {
    color: #b8bcc4;
}

.rd-set-body {
    flex: 1;
    display: flex;
    min-height: 0;
}

.rd-set-nav {
    flex: 0 0 118px;
    padding: 6px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.02);
}

.rd-set-nav-item {
    padding: 4px 6px;
    border-radius: 4px;
    color: #b8bcc4;
    white-space: nowrap;
}

.rd-set-nav-item.active {
    background: rgba(41, 98, 255, 0.2);
    color: #90caf9;
    font-weight: 600;
}

.rd-set-content {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    animation: rd-line-in 0.2s ease-out;
}

.rd-set-content h5 {
    margin: 0 0 4px;
    color: #fff;
    font-size: 12.5px;
}

.rd-set-content p {
    margin: 0 0 4px;
    color: #b8bcc4;
    font-size: 10.5px;
}

.rd-set-heading {
    margin: 4px 0 2px;
    color: #8a93a6;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rd-set-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    margin-bottom: 2px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
}

.rd-set-row.in-lane {
    opacity: 0.6;
}

.rd-set-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
}

.rd-set-circle {
    display: grid;
    place-items: center;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #2962ff;
    color: #fff;
    font-size: 8.5px;
    font-weight: 700;
}

.rd-set-back {
    color: #90caf9;
    font-size: 10px;
}

.rd-set-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
    font-size: 10px;
}

.rd-set-value {
    flex-shrink: 0;
    padding: 1px 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}

.rd-set-reset {
    display: inline-block;
    margin-top: 3px;
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    font-size: 10px;
}

/* ===== Features topic: "every button explains itself" (helpPopupDemo.js)
   Reuses the radial demo's frame/controls/caption/finger (.radial-demo,
   .rd-*); only its own stage content lives here. The popup copies the real
   one's look (.help-popover, components/tools.css). */
.help-demo {
    margin-top: 0.4em;
}

.hd-stage {
    height: 240px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 100% 48px,
        #131722;
}

.hd-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 158px;
    bottom: 0;
    background: rgba(30, 34, 45, 0.9);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hd-btn {
    position: absolute;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: #2a2e39;
    color: #d1d4dc;
    font: 600 13px/1 system-ui, sans-serif;
    white-space: nowrap;
    transition: box-shadow 0.15s ease;
}

.hd-btn.target {
    box-shadow: 0 0 0 2px #9C27B0, 0 0 10px rgba(156, 39, 176, 0.6);
}

.hd-btn.drop {
    box-shadow: 0 0 0 2px #d9a6e6, 0 0 14px rgba(217, 166, 230, 0.7);
}

.hd-question {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    color: var(--color-text-dim, #868993); /* like the real ❓ */
}

/* The ❓ button's glyph (helpPopupDemo.js's QUESTION_SVG), its size there. */
.hd-question svg,
.hd-ghost.question svg {
    display: block;
    width: 28px;
    height: 28px;
}

/* ... and inline in a caption's text. */
.hd-question-inline {
    color: var(--color-text-dim, #868993);
}

.hd-question-inline svg {
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.28em;
}

.hd-popup {
    position: absolute;
    z-index: 2;
    --arrow-x: 50%;
    padding: 8px 10px 7px;
    background: #1b1530;
    border: 1px solid rgba(156, 39, 176, 0.7);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    color: #e6e1f0;
    font: 12.5px/1.35 system-ui, sans-serif;
    opacity: 0;
    transition: opacity 0.15s ease-out, left 0.2s ease, top 0.2s ease;
}

.hd-popup.show {
    opacity: 1;
}

.hd-popup-arrow {
    position: absolute;
    left: var(--arrow-x);
    bottom: -8px;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    background: #9C27B0;
    border-radius: 2px;
    transform: rotate(45deg);
    transition: left 0.2s ease;
}

.hd-popup.dragging-arrow .hd-popup-arrow {
    opacity: 0.35;
}

.hd-popup-name {
    margin-bottom: 2px;
    color: #d9a6e6;
    font-weight: 700;
}

.hd-popup-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
}

.hd-popup-nav .hd-prev,
.hd-popup-nav .hd-next {
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    font-weight: 700;
}

.hd-count {
    opacity: 0.6;
    font-size: 11px;
}

.hd-ghost {
    position: absolute;
    z-index: 3;
    display: none;
}

.hd-ghost.tip {
    display: block;
    width: 13px;
    height: 13px;
    background: #9C27B0;
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 10px rgba(156, 39, 176, 0.8);
}

.hd-ghost.question {
    display: block;
    color: #d1d4dc;
    transform: translate(-50%, -125%);
}