/* =====================================================================
   Quantum Coin - Documentation styles
   "Rainbow Glass" theme: full-page quantumscan gradient wash, heavy
   glassmorphism, colorful accent borders (cyan / coral / magenta) and an
   animated gradient title. Shared by every documentation page.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;0,6..12,900&display=swap");

:root {
    --font: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --accent: #6236ff;
    --accent-2: #421096;
    --cyan: #2fb6d8;
    --coral: #ec6b7c;
    --magenta: #b1468d;
    --link: #523ba5;
    --link-hover: #3700ff;
    --text: #372339;
    --text-muted: #6b6478;
    --line: #3723391a;
    --line-strong: #42109633;
    --card: #ffffffcc;
    --success: #1dcc70;
    --warn-icon: #e8912e;
    --warn-title: #9a5b12;
    --radius: 18px;
    --radius-sm: 12px;
    --radius-xs: 9px;
    --shadow: 0 8px 24px rgba(66, 16, 150, 0.12);
    --shadow-glow: 0 6px 18px rgba(98, 54, 255, 0.35);
    --topbar-h: 60px;
    --sidebar-w: 284px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Themed main page scrollbar (matches the sidebar accent). */
html { scrollbar-width: thin; scrollbar-color: #6236ff40 transparent; }
html::-webkit-scrollbar { width: 12px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb {
    background: #6236ff33;
    background-clip: content-box;
    border: 3px solid transparent;
    border-radius: 999px;
}
html::-webkit-scrollbar-thumb:hover { background: #6236ff59; background-clip: content-box; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    background:
        radial-gradient(1200px 700px at 85% -5%, rgba(89, 214, 242, 0.28), transparent 55%),
        radial-gradient(1100px 800px at 5% 10%, rgba(236, 107, 124, 0.22), transparent 55%),
        radial-gradient(1000px 900px at 60% 100%, rgba(181, 73, 140, 0.18), transparent 55%),
        linear-gradient(180deg, #f3eefc 0%, #f7f9fb 40%, #f7f9fb 100%);
    background-attachment: fixed;
}

.hero-band { display: none; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

@keyframes textclip { to { background-position: 200% center; } }

/* ---------------------------------------------------------------- TOP BAR */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    color: var(--text);
    border-bottom: 1px solid;
    border-image: linear-gradient(90deg, var(--accent), var(--cyan), var(--coral), var(--magenta)) 1;
    background:
        radial-gradient(900px 300px at 80% 100%, rgba(89, 214, 242, 0.14), transparent 60%),
        radial-gradient(900px 300px at 10% 100%, rgba(236, 107, 124, 0.12), transparent 60%),
        linear-gradient(180deg, #ffffffc2, rgba(98, 54, 255, 0.08));
    box-shadow: var(--shadow);
    backdrop-filter: blur(40px) brightness(105%);
    -webkit-backdrop-filter: blur(40px) brightness(105%);
}

.icon-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-2);
    background: transparent;
    border: 0;
    cursor: pointer;
    flex: 0 0 auto;
}

.icon-btn:hover { background: #6236ff14; }
.icon-btn svg { width: 20px; height: 20px; fill: currentColor; }

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    font-size: 20px;
    padding: 4px 8px;
    border-radius: var(--radius-xs);
}

.brand:hover { text-decoration: none; background: #6236ff0f; }
.brand img { width: 32px; height: 32px; display: block; }
.brand .name-text {
    text-transform: uppercase;
    background-image: linear-gradient(-225deg, #231557 2%, #44107a 29%, #ff1361 47%, #5f00ff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 3s linear infinite;
}

.search { flex: 1 1 auto; max-width: 520px; margin: 0 auto; position: relative; }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: var(--accent-2); }

.search input {
    width: 100%;
    height: 40px;
    border-radius: 9px;
    border: 1px solid var(--line-strong);
    background: #ffffffe6;
    padding: 0 40px 0 42px;
    font-family: var(--font);
    /* 16px minimum so iOS Safari does not auto-zoom (and clip the viewport) on focus */
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    outline: none;
}

.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #6236ff33; }

/* loading spinner on the right of the search box */
.search .search-spin {
    display: none;
    position: absolute;
    right: 12px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border: 2px solid var(--line-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: search-spin .6s linear infinite;
}

.search.searching .search-spin { display: block; }

@keyframes search-spin { to { transform: rotate(360deg); } }

.right { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; }

.social-link {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    background: var(--card);
    box-shadow: var(--shadow);
    transition: transform .12s ease, border-color .12s ease;
}

.social-link:hover { transform: translateY(-2px); border-color: var(--accent); }
.social-link img { width: 22px; height: 22px; display: block; object-fit: contain; }
.social-link .x-icon { width: 18px; height: 18px; fill: var(--accent-2); }

/* ---------------------------------------------------------------- LAYOUT */
.layout { display: flex; align-items: stretch; min-height: calc(100vh - var(--topbar-h)); }

/* ---------------------------------------------------------------- SIDEBAR */
.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: #ffffff8c;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h));
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
}

.nav-tree { list-style: none; margin: 0; padding: 12px 10px 16px; overflow-y: auto; flex: 1 1 auto; }
.nav-tree ul { list-style: none; margin: 0; padding: 0; }
.nav-tree .children { display: none; }
.nav-tree .node.open > .children { display: block; }

.nav-row { display: flex; align-items: center; gap: 2px; border-radius: var(--radius-xs); padding-right: 8px; color: var(--text); margin: 2px 0; }
.nav-row:hover { background: #6236ff0f; }
.node.active > .nav-row { background: linear-gradient(90deg, #6236ff26, #ec6b7c1a); }
.node.active > .nav-row .nav-link { color: var(--accent); font-weight: 700; }

.twisty { width: 24px; height: 30px; flex: 0 0 24px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; color: var(--text-muted); border-radius: var(--radius-xs); }
.twisty:hover { background: #6236ff14; }
.twisty svg { width: 14px; height: 14px; fill: currentColor; transition: transform .15s ease; }
.node.open > .nav-row .twisty svg { transform: rotate(90deg); }
.twisty.leaf { visibility: hidden; cursor: default; }

.nav-link { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; padding: 7px 6px; font-size: 15px; font-weight: 600; color: inherit; border-radius: var(--radius-xs); min-width: 0; }
.nav-link:hover { text-decoration: none; }
.nav-link .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.children .nav-row { margin-left: 24px; }
.children .children .nav-row { margin-left: 44px; }

/* Themed scrollbar for the sidebar nav (subtle, matches the page accent). */
.nav-tree { scrollbar-width: thin; scrollbar-color: #6236ff40 transparent; }
.nav-tree::-webkit-scrollbar { width: 8px; }
.nav-tree::-webkit-scrollbar-track { background: transparent; margin: 4px 0; }
.nav-tree::-webkit-scrollbar-thumb {
    background: #6236ff33;
    background-clip: content-box;
    border: 3px solid transparent;
    border-radius: 999px;
}
.nav-tree::-webkit-scrollbar-thumb:hover { background: #6236ff59; background-clip: content-box; }

/* Social icons mirrored into the burger menu (mobile only). */
.sidebar-social {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 12px;
    border-bottom: 1px solid var(--line);
}

/* ---------------------------------------------------------------- CONTENT */
.content-wrap { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; padding: 28px 40px 80px; }
.content { width: 100%; max-width: 1120px; }

.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; }
.breadcrumb .sep { color: var(--accent-2); opacity: .5; }

h1.page-title {
    font-size: 32px;
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: -.02em;
    margin: 12px 0 8px;
    text-transform: uppercase;
    background-image: linear-gradient(-225deg, #231557 2%, #44107a 29%, #ff1361 47%, #5f00ff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 3s linear infinite;
}

.content h2 {
    font-size: 24px;
    font-weight: 800;
    margin: 40px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid;
    border-image: linear-gradient(90deg, var(--accent), var(--cyan), var(--coral)) 1;
    scroll-margin-top: 80px;
    color: var(--accent-2);
}

.content h3 { font-size: 19px; font-weight: 700; margin: 28px 0 8px; scroll-margin-top: 80px; color: var(--text); }
.content h4 { font-size: 16px; font-weight: 800; margin: 22px 0 6px; scroll-margin-top: 80px; color: var(--accent-2); }
.content p { margin: 0 0 14px; text-align: justify; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 6 3 3; }
.content ul, .content ol { margin: 0 0 16px; padding-left: 26px; }
.content li { margin: 5px 0; }
.content ul ul, .content ol ol, .content ul ol, .content ol ul { margin: 4px 0; }
.content ul { list-style: disc; }
.content ul ul { list-style: circle; }
.content ol { list-style: decimal; }
.content ol ol { list-style: lower-alpha; }

/* ---------------------------------------------------------------- PANELS */
.panel {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--radius);
    margin: 0 0 22px;
    border: 1px solid var(--line-strong);
    border-left: 4px solid var(--cyan);
    background: var(--card);
    box-shadow: var(--shadow);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
    position: relative;
}

.panel:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-glow); }
.panel .p-icon { flex: 0 0 26px; width: 26px; height: 26px; }
.panel .p-icon svg { width: 26px; height: 26px; fill: var(--cyan); }
.panel .p-body { flex: 1 1 auto; }
.panel .p-body > :last-child { margin-bottom: 0; }
.panel .p-title { font-weight: 800; margin: 0 0 4px; font-size: 15px; color: var(--accent-2); }

.panel.info .p-icon svg { fill: var(--accent); }
.panel.info { border-left-color: var(--accent); }

.panel.warning { border-left-color: var(--warn-icon); }
.panel.warning .p-icon svg { fill: var(--warn-icon); }
.panel.warning .p-title { color: var(--warn-title); }

.panel .close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-xs);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: .6;
}

.panel .close:hover { opacity: 1; background: #6236ff14; }
.panel .close svg { width: 14px; height: 14px; fill: currentColor; }
.panel.dismissed { display: none; }

/* ---------------------------------------------------------------- TOC MACRO */
.toc-macro {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    padding: 18px 22px;
    margin: 0 0 26px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.toc-macro:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-glow); }
.toc-macro .toc-head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; margin-bottom: 10px; color: var(--accent-2); }
.toc-macro .toc-head svg { width: 18px; height: 18px; fill: var(--accent); }
.toc-macro ol { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 28px; counter-reset: toc; }
.toc-macro li { counter-increment: toc; margin: 5px 0; break-inside: avoid; }
.toc-macro a::before { content: counter(toc) ". "; color: var(--coral); font-weight: 700; }

@media (max-width: 720px) { .toc-macro ol { columns: 1; } }

/* ---------------------------------------------------------------- TOGGLE GROUPS (OS / FAQ / API) */
.os-toggles { margin: 8px 0 16px; }

.toggle-btn {
    display: block;
    width: 100%;
    text-align: left;
    margin-top: 8px;
    padding: 11px 16px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--accent-2);
    font-family: var(--font);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    box-shadow: var(--shadow);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transition: border-color .12s ease, box-shadow .12s ease;
}

.toggle-btn:hover { border-color: var(--accent); box-shadow: var(--shadow-glow); }
.toggle-btn::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .15s ease;
}

.toggle-btn.open { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.toggle-btn.open::after { transform: translateY(-30%) rotate(-135deg); }

.toggle-body {
    display: none;
    border: 1px solid var(--line-strong);
    border-top: 0;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    padding: 16px;
    background: #ffffffea;
    margin-top: -1px;
}

.toggle-body.open { display: block; }
.toggle-body .cap { display: block; font-weight: 700; font-size: 13.5px; color: var(--accent-2); margin: 4px 0; }

/* ---------------------------------------------------------------- CODE BLOCKS */
pre {
    background: linear-gradient(180deg, #f5f1ff, #eef4fb);
    color: #2c2150;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    overflow-x: auto;
    margin: 8px 0;
    font-size: 13px;
    line-height: 1.5;
    box-shadow: var(--shadow);
}

code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }

/* inline code inside prose gets a soft accent pill */
p code, li code {
    background: #6236ff14;
    color: var(--accent-2);
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 12.5px;
}

/* code inside a command block always inherits the block's readable colour,
   never the inline pill style (which is invisible on the dark/tinted box) */
pre code {
    background: none;
    color: inherit;
    padding: 0;
    font-size: inherit;
    border-radius: 0;
    font-weight: 600;
}

.code-block { margin: 8px 0; display: flex; flex-direction: column; align-items: stretch; }
.code-block pre { margin: 0; }

.code-block .copy-btn {
    order: -1;
    align-self: flex-end;
    margin: 0 0 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: rgba(98, 54, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: var(--radius-xs);
    cursor: pointer;
    opacity: .9;
    transition: opacity .12s ease, background .12s ease;
}

.code-block:hover .copy-btn,
.code-block .copy-btn:focus { opacity: 1; }
.code-block .copy-btn:hover { background: var(--accent); opacity: 1; }
.code-block .copy-btn svg { width: 13px; height: 13px; fill: currentColor; }
.code-block .copy-btn.copied { color: #0a7a45; background: #dffae9; border-color: #9fe6c0; }

/* ---------------------------------------------------------------- TABLE */
.table-wrapper, .table-responsive { overflow-x: auto; margin: 0 0 20px; }

.content table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 0 20px;
    font-size: 14px;
    background: var(--card);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.table-wrapper table, .table-responsive table { margin: 0; }

.content th, .content td {
    border: 1px solid var(--line);
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
}

.content th { background: linear-gradient(180deg, #6236ff14, #ec6b7c0f); font-weight: 800; color: var(--accent-2); }

/* ---------------------------------------------------------------- HIGHLIGHTED LINK CALLOUT */
/* Green callout with a checkmark bullet so key links stand out. */
.content .link {
    background: #eafaf0;
    border: 1px solid #bfead0;
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin: 0 0 16px;
}

.content .link p { position: relative; margin: 0; padding-left: 32px; }
.content .link p::before {
    content: "\2714";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    line-height: 1;
    color: var(--success);
}

/* ---------------------------------------------------------------- DOWNLOAD BLOCKS */
.dl-block {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--card);
    padding: 16px 20px;
    margin: 0 0 14px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.dl-block h4 { margin: 0 0 4px; font-size: 17px; color: var(--accent-2); }
.dl-block p { margin: 6px 0 0; font-size: 14px; }
.dl-block img { display: inline-block; }

/* ---------------------------------------------------------------- POPUP / MODAL */
.popup-buttons { margin: 8px 0 16px; }

.btn-yes {
    display: inline-block;
    min-width: 180px;
    text-align: center;
    padding: 12px 16px;
    margin: 6px 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 15px;
    font-weight: 800;
    color: #000;
    background: linear-gradient(90deg, #6236ff, #b1468d);
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.btn-yes:hover { transform: translateY(-3px); box-shadow: var(--shadow-glow); border-color: var(--accent); }

#popup-toggle { display: none; }

.popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(66, 16, 150, .45);
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

#popup-toggle:checked ~ .popup-overlay { display: flex; }

.popup-content {
    background: #ffffffef;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    max-width: 460px;
    width: 100%;
    position: relative;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.popup-content > :last-child { margin-bottom: 0; }

.popup-close {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 24px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: none;
}

.popup-close:hover { color: var(--accent); text-decoration: none; }

/* ---------------------------------------------------------------- LEGACY BUTTONS */
.legacy-btns { margin: 14px 0 28px; }

.legacy-btn {
    display: inline-block;
    width: 240px;
    text-align: center;
    padding: 12px;
    margin-top: 12px;
    color: #000;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    font-weight: 800;
    font-size: 15px;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.legacy-btn:hover { color: #000; text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-glow); }
.legacy-btn.get { background: linear-gradient(90deg, #6236ff, #b1468d); box-shadow: var(--shadow); }
.legacy-btn.wallet { background: var(--success); box-shadow: var(--shadow); }
.legacy-btn.get:hover, .legacy-btn.wallet:hover { box-shadow: var(--shadow-glow); border-color: var(--accent); }

/* ---------------------------------------------------------------- CONTENT CARDS */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
    margin: 12px 0 30px;
}

.doc-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card);
    color: var(--text);
    box-shadow: var(--shadow);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
    position: relative;
    overflow: hidden;
}

.doc-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--accent), var(--cyan), var(--coral));
    opacity: 0;
    transition: opacity .14s ease;
}

.doc-card:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-glow); }
.doc-card:hover::before { opacity: 1; }
.doc-card .ic { flex: 0 0 44px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.doc-card .ic img { max-width: 44px; max-height: 44px; object-fit: contain; }
.doc-card .tx { min-width: 0; }
.doc-card .tx h3 { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: var(--accent-2); }
.doc-card .tx p { margin: 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.45; }

/* ---------------------------------------------------------------- LINK LIST */
.link-list { list-style: none; margin: 0 0 24px; padding: 0; }
.link-list li { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line); }
.link-list li:last-child { border-bottom: 0; }
.link-list a { font-weight: 700; }

/* ---------------------------------------------------------------- BOTTOM BAR */
.site-footer {
    border-top: 3px solid;
    border-image: linear-gradient(90deg, var(--accent), var(--cyan), var(--coral), var(--magenta)) 1;
    background:
        radial-gradient(900px 300px at 80% 0%, rgba(89, 214, 242, 0.14), transparent 60%),
        radial-gradient(900px 300px at 10% 0%, rgba(236, 107, 124, 0.12), transparent 60%),
        linear-gradient(180deg, rgba(98, 54, 255, 0.08), #ffffffc2);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
}

.site-footer-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.site-footer .footer-link { margin: 0; font-size: 15px; }
.site-footer .footer-link a {
    font-weight: 900;
    background-image: linear-gradient(-225deg, #231557 2%, #44107a 29%, #ff1361 47%, #5f00ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.site-footer .footer-link a:hover { text-decoration: none; opacity: .85; }

.footer-social { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 12px; }
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--line);
    background: var(--card);
    box-shadow: var(--shadow);
    transition: transform .12s ease, border-color .12s ease;
}

.footer-social a:hover { transform: translateY(-2px); border-color: var(--accent); }
.footer-social img { width: 22px; height: 22px; display: block; object-fit: contain; }
.footer-social .x-icon { width: 19px; height: 19px; fill: var(--accent-2); }

/* ---------------------------------------------------------------- SEARCH RESULTS DROPDOWN */
.search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #ffffffef;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-height: 70vh;
    overflow-y: auto;
    padding: 6px;
    z-index: 95;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.search-results[hidden] { display: none; }
.search-empty { padding: 14px 12px; font-size: 14px; color: var(--text-muted); }

/* Close button for the full-screen mobile results panel (hidden on desktop). */
.search-close {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xs);
    background: #ffffffe6;
    color: var(--accent-2);
    cursor: pointer;
    z-index: 1;
}

.search-close:hover { background: #6236ff14; border-color: var(--accent); }
/* Reset the generic ".search svg" magnifier positioning, which otherwise
   absolutely-positions this icon and shoves it off-center inside the button. */
.search-close svg { position: static; left: auto; top: auto; transform: none; width: 16px; height: 16px; fill: currentColor; }
.search-list { list-style: none; margin: 0; padding: 0; }
.search-result { margin: 0; }

.search-result-link {
    display: block;
    padding: 9px 12px;
    border-radius: var(--radius-xs);
    color: var(--text);
    text-decoration: none;
}

.search-result-link:hover,
.search-result-link.active { background: #6236ff14; text-decoration: none; }

.search-result-title { display: block; font-size: 14px; font-weight: 800; color: var(--accent-2); margin-bottom: 2px; }
.search-result-excerpt { display: block; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.search-results mark { background: #ffe08a; color: inherit; padding: 0 1px; border-radius: 2px; }

.search-subs { list-style: none; margin: 2px 0 4px; padding: 0; }
.search-sub-link {
    display: block;
    margin-left: 10px;
    padding: 6px 10px;
    font-size: 12.5px;
    border-left: 2px solid var(--line-strong);
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    color: var(--text-muted);
    text-decoration: none;
}

.search-sub-link:hover,
.search-sub-link.active { background: #6236ff14; color: var(--accent-2); text-decoration: none; }

/* ---------------------------------------------------------------- MOBILE */
.menu-toggle { display: none; }
.scrim { display: none; }

@media (max-width: 860px) {
    .menu-toggle { display: inline-flex; }
    /* socials move from the top bar into the burger menu; search gets the room */
    .right.social { display: none; }
    .sidebar-social { display: flex; }
    .search { max-width: none; }
    .sidebar {
        position: fixed;
        top: var(--topbar-h);
        bottom: 0;
        left: 0;
        z-index: 90;
        height: auto;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: var(--shadow);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar .nav-tree {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        overscroll-behavior: contain;
    }
    .scrim.show {
        display: block;
        position: fixed;
        inset: var(--topbar-h) 0 0 0;
        background: rgba(66, 16, 150, .35);
        z-index: 80;
    }
    .content-wrap { padding: 20px 18px 70px; }
    .site-footer-inner { padding: 16px 18px; }
}

@media (max-width: 540px) {
    .brand .name-text { display: none; }
    h1.page-title { font-size: 32px; }
    /* full-width dropdown anchored under the top bar on small screens */
    .search-results {
        position: fixed;
        top: var(--topbar-h);
        left: 0;
        right: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        max-height: calc(100vh - var(--topbar-h));
        padding-top: 50px;
    }
    .search-close { display: inline-flex; }
}

/* ---------------------------------------------------------------- QUICK START JOURNEY */
/* Numbered vertical "journey" steps with chevron gradient bullets. Reusable
   across pages that need a step-by-step quick-start layout. */
.qs-journey { list-style: none; margin: 14px 0 30px; padding: 0; position: relative; }
.qs-journey::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, var(--accent), var(--cyan), var(--coral), var(--magenta));
    opacity: .35;
}
.qs-step { position: relative; display: flex; gap: 18px; padding: 6px 0 22px; }
.qs-step:last-child { padding-bottom: 0; }
.qs-num {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--magenta));
    box-shadow: var(--shadow-glow);
    z-index: 1;
}
.qs-num svg { width: 26px; height: 26px; fill: #fff; }
.qs-body {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
    padding: 14px 18px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.qs-body:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-glow); }
.qs-body h3 { margin: 0 0 4px; font-size: 18px; font-weight: 800; color: var(--accent-2); }
.qs-body p { margin: 0 0 10px; font-size: 14px; color: var(--text-muted); }
.qs-body p:last-child { margin-bottom: 0; }
.qs-cta {
    display: inline-block;
    padding: 9px 18px;
    border-radius: var(--radius-sm);
    font-weight: 800;
    color: #fff;
    background: linear-gradient(90deg, var(--accent), var(--magenta));
    box-shadow: var(--shadow);
}
.qs-cta.green { background: var(--success); }
.qs-cta:hover { text-decoration: none; color: #fff; box-shadow: var(--shadow-glow); }
.qs-cta.link-underline:hover { text-decoration: underline; }
.qs-links { display: flex; flex-wrap: wrap; gap: 8px; }
.qs-chip {
    display: inline-block;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-2);
    background: #6236ff12;
    border: 1px solid var(--line-strong);
    transition: border-color .12s ease, background .12s ease;
}
.qs-chip:hover { text-decoration: none; border-color: var(--accent); background: #6236ff20; }

/* Inline wallet download tiles (responsive, wrap to next row). */
.qs-dls { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 2px; }
.qs-dl {
    flex: 1 1 120px;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 10px 8px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: #ffffffcc;
    box-shadow: var(--shadow);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.qs-dl:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-glow); }
.qs-dl .qs-dl-plat { font-weight: 800; font-size: 14px; color: var(--accent-2); }
.qs-dl-badge { display: inline-flex; align-items: center; justify-content: center; height: 46px; }
.qs-dl-badge img { max-height: 46px; max-width: 150px; width: auto; height: auto; object-fit: contain; }
.qs-dl-badge img.qs-dl-glyph { max-height: 48px; max-width: 48px; }
/* The Google Play badge art is tightly trimmed (no padding), so it reads larger
   than the padded App Store badge at the same height. Shrink it so its visible
   logo area matches the iOS badge. */
.qs-dl-badge img.qs-badge-play { max-height: 36px; max-width: 130px; }
.qs-dl-links { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; font-size: 13px; font-weight: 700; }
.qs-dl-links a:hover { text-decoration: underline; }