.mixt-page-referral main{width:min(100% - 32px,1180px);margin:0 auto;padding:22px 0 56px}
.mixt-page-referral .sale-public-card{box-sizing:border-box;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(11,16,36,.82);box-shadow:none;color:#aeb8d6;padding:18px}
.mixt-page-referral .sale-public-card h2{margin:0 0 10px;color:#f4f6ff;font:700 18px/1.35 inherit;letter-spacing:0}
.mixt-page-referral button,.mixt-page-referral input,.mixt-page-referral textarea{font-family:inherit}
.mixt-page-referral button{min-height:38px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#3949b8;color:#fff;padding:9px 14px;font-size:13px;font-weight:700;cursor:pointer}
.mixt-page-referral button:hover{background:#4557ca}.mixt-page-referral button:disabled{opacity:.55;cursor:wait}
.mixt-page-referral input,.mixt-page-referral textarea{box-sizing:border-box;width:100%;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#070a18;color:#fff;padding:9px 11px;outline:none;font-size:13px;line-height:1.4}
.mixt-page-referral input:focus,.mixt-page-referral textarea:focus{border-color:#5263d9;box-shadow:0 0 0 2px rgba(82,99,217,.18)}
.mixt-page-referral code{font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;overflow-wrap:anywhere}

.ref-page-head{margin:0 0 16px;padding:0 0 16px;border-bottom:1px solid rgba(255,255,255,.10)}
.ref-page-kicker{display:block;margin-bottom:5px;color:#8f9abc;font-size:12px;font-weight:600}.ref-page-head h1{margin:0 0 6px;color:#fff;font-size:28px;line-height:1.25;font-weight:700;letter-spacing:-.015em}.ref-page-head p{max-width:900px;margin:0;color:#aeb8d6;font-size:14px;line-height:1.5}

.ref-top-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(250px,1fr);gap:14px;margin-bottom:14px;align-items:start}
.ref-control-card,.ref-stats-card{margin:0}.ref-wallet-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}.ref-wallet-search button{grid-column:1/-1;justify-self:center;min-width:180px}
.ref-identity{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;align-items:center;padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.09)}
.ref-identity>div{display:grid;gap:5px;min-width:0}.ref-identity span,.ref-identity small{color:#8f9abc;font-size:12px}.ref-identity strong{display:inline-flex;width:max-content;padding:5px 8px;border-radius:6px;background:rgba(73,210,145,.10);color:#8ff0c0;font-size:13px}.ref-identity p{grid-column:1/-1;margin:0;color:#d8deef}.ref-identity>small{grid-column:1/-1}
.ref-parent-control{padding-top:15px}.ref-parent-control form{display:grid;gap:10px}.ref-parent-control label,.ref-code-form label{display:grid;gap:6px}.ref-parent-control label>span,.ref-code-form label>span{color:#eef2ff;font-size:13px;font-weight:600}.ref-parent-control label small,.ref-code-form label small{color:#8f9abc;font-size:12px;line-height:1.45}.ref-parent-control form>div{display:flex;flex-wrap:wrap;gap:8px}.ref-secondary-btn{background:#173e36!important;border-color:rgba(73,210,145,.34)!important}.ref-secondary-btn:hover{background:#1d4b41!important}
.ref-alert{margin:12px 0 0;padding:10px 12px;border:1px solid rgba(255,104,104,.34);border-radius:8px;background:rgba(255,104,104,.08);color:#ffc0c0;font-size:13px;line-height:1.45}

.ref-stats-card dl{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0}.ref-stats-card dl div{padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:9px;background:rgba(0,0,0,.14)}.ref-stats-card dt{color:#8f9abc;font-size:12px}.ref-stats-card dd{margin:5px 0 0;color:#fff;font-size:22px;font-weight:700}
.ref-parent-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;padding:11px 12px;border:1px solid rgba(73,210,145,.18);border-radius:9px;background:rgba(73,210,145,.055)}.ref-parent-summary>div{display:grid;gap:4px;min-width:0}.ref-parent-summary span,.ref-parent-current span{color:#8f9abc;font-size:12px}.ref-parent-summary a,.ref-parent-current a,.ref-reward-list a{color:#8ff0c0;font-weight:700;text-decoration:none}.ref-parent-summary a:hover,.ref-parent-current a:hover,.ref-reward-list a:hover{text-decoration:underline}.ref-parent-summary button{min-height:32px;padding:6px 10px;background:#202846}.ref-parent-current{display:flex;align-items:center;gap:10px;margin-bottom:13px;padding:10px 11px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(0,0,0,.14)}

.ref-payment-panel{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}.ref-payment-panel>h3{margin:0 0 6px;color:#fff;font-size:16px}.ref-payment-panel>p{margin:0 0 12px;font-size:12px;line-height:1.5}.ref-code-target{display:flex;align-items:center;gap:10px;margin:0 0 10px}.ref-code-target span{color:#8f9abc;font-size:12px}.ref-code-target strong{padding:5px 8px;border-radius:6px;background:rgba(73,210,145,.10);color:#8ff0c0}
.ref-request-expiry{margin:0 0 12px!important;padding:9px 10px;border-left:3px solid rgba(255,209,102,.52);border-radius:7px;background:rgba(255,209,102,.055);color:#d8cfae!important;font-size:12px!important}
.ref-payment-layout{display:grid;grid-template-columns:minmax(0,1fr) 205px;gap:14px}.ref-payment-fields{display:grid;gap:9px}.ref-payment-fields label{display:grid;gap:5px}.ref-payment-fields label>span{color:#8f9abc;font-size:11px}.ref-payment-fields label>div{position:relative}.ref-payment-fields textarea{padding-right:42px;resize:none;font:12px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace}.ref-payment-fields label button{position:absolute;right:5px;top:5px;min-width:30px;min-height:30px;padding:4px;background:#202846}.ref-security-note{margin:0!important;color:#8f9abc!important;font-size:11px!important}
.ref-payment-tools{display:grid;gap:8px;align-content:start}.ref-payment-tools>button,.ref-payment-tools>a{min-height:34px;padding:8px 10px;text-align:center;font-size:12px}.ref-payment-tools>a{box-sizing:border-box;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#202846;color:#fff;text-decoration:none}.ref-payment-tools textarea{resize:none;font:10px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace}.ref-qr{display:grid;place-items:center;min-height:180px;border-radius:9px;background:#fff;overflow:hidden}.ref-qr canvas,.ref-qr img{display:block;max-width:100%}.sale-public-xdr-state{font-size:11px;line-height:1.4;color:#8f9abc}.sale-public-xdr-state.is-ready{color:#8ff0c0}.sale-public-xdr-state.is-error{color:#ffc0c0}
.ref-check-result{padding:9px 10px;border-radius:8px;background:rgba(255,255,255,.055);color:#cbd5ee;font-size:12px;line-height:1.45}.ref-check-result.is-success{border:1px solid rgba(73,210,145,.3);background:rgba(73,210,145,.08);color:#9af0c5}.ref-check-result.is-warning{border:1px solid rgba(255,209,102,.3);background:rgba(255,209,102,.07);color:#ffe29a}.ref-check-result.is-error{border:1px solid rgba(255,104,104,.34);background:rgba(255,104,104,.08);color:#ffc0c0}

.ref-graph-card{margin:0 0 14px}.ref-graph-card>header{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:12px}.ref-graph-card>header h2{margin-bottom:4px!important}.ref-graph-card>header p{max-width:760px;margin:0;color:#8f9abc;font-size:12px;line-height:1.45}.ref-graph-modes{display:flex;gap:5px;padding:4px;border:1px solid rgba(255,255,255,.08);border-radius:9px;background:#080d1b}.ref-graph-modes button{min-height:31px;padding:6px 11px;border:0;background:transparent;color:#8f9abc;font-size:12px;cursor:pointer}.ref-graph-modes button.is-active{background:#2d3a60;color:#fff;box-shadow:inset 0 0 0 1px rgba(143,240,192,.45)}.ref-graph-stage{position:relative;min-height:420px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:radial-gradient(circle at 50% 45%,rgba(32,65,108,.22),rgba(3,8,18,.96) 64%);overflow:hidden}.ref-graph-stage svg{display:block;width:100%;height:auto;min-height:420px}.ref-graph-stage>p{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:#8f9abc}.ref-graph-edges line{stroke:rgba(73,210,145,.28);stroke-width:1.5}.ref-graph-node circle{fill:#223354;stroke:#6c87b7;stroke-width:2;filter:url(#refNodeGlow)}.ref-graph-node.is-selected circle{fill:#276d9d;stroke:#4fd7ff;stroke-width:3}.ref-graph-node text{fill:#eef4ff;font-size:12px;font-weight:700;paint-order:stroke;stroke:#06101e;stroke-width:3px;stroke-linejoin:round}.ref-graph-node-link{cursor:pointer;pointer-events:all}.ref-graph-node-link .ref-graph-node{pointer-events:all}.ref-graph-node-link:hover circle{stroke:#8ff0c0;stroke-width:3}.ref-graph-node-link:hover text{fill:#8ff0c0;text-decoration:underline}.ref-graph-node-link:focus{outline:none}.ref-graph-node-link:focus circle{stroke:#fff;stroke-width:3}.ref-graph-node-link:focus text{fill:#fff;text-decoration:underline}

.ref-rewards-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ref-rewards-grid>.sale-public-card{margin:0}.ref-rewards-grid h2 small{font-size:11px;color:#78849f;font-weight:600}.ref-reward-list{display:grid;gap:8px}.ref-reward-list article{padding:11px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(0,0,0,.13)}.ref-reward-list article>strong{color:#fff}.ref-reward-list dl{display:grid;gap:5px;margin:9px 0 0}.ref-reward-list dl div{display:flex;justify-content:space-between;gap:12px}.ref-reward-list dt{color:#7f8ba7}.ref-reward-list dd{margin:0;text-align:right}

.ref-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:flex-start;justify-content:center;padding:5vh 16px}.ref-modal.is-open{display:flex}.ref-modal-backdrop{position:absolute;inset:0;background:rgba(1,4,13,.78);backdrop-filter:blur(4px)}.ref-modal-dialog{position:relative;z-index:1;box-sizing:border-box;width:min(760px,100%);max-height:90vh;overflow:auto;border:1px solid rgba(255,255,255,.13);border-radius:12px;background:#0b1024;padding:18px;color:#aeb8d6}.ref-modal-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.ref-modal-dialog>header h2{margin:0;color:#fff;font-size:19px}.ref-modal-dialog>header button{min-width:34px;min-height:34px;padding:4px;background:#202846;font-size:20px}.ref-code-form{display:grid;gap:10px}.ref-code-form>button{justify-self:start}.ref-modal-lock{overflow:hidden}

@media(max-width:900px){.ref-top-grid{grid-template-columns:1fr}.ref-payment-layout{grid-template-columns:1fr}.ref-payment-tools{grid-template-columns:1fr 1fr}.ref-qr{grid-row:span 4}.ref-rewards-grid{grid-template-columns:1fr}.ref-graph-card>header{display:grid}.ref-graph-modes{width:max-content}.ref-graph-stage{min-height:360px}.ref-graph-stage svg{min-height:360px}}
@media(max-width:560px){.mixt-page-referral main{width:min(100% - 20px,1180px);padding:16px 0 36px}.ref-page-head h1{font-size:24px}.ref-wallet-search{grid-template-columns:1fr}.ref-identity{grid-template-columns:1fr}.ref-identity>button{justify-self:start}.ref-parent-control>div button{width:100%}.ref-parent-summary{align-items:flex-end}.ref-stats-card dl{grid-template-columns:1fr 1fr}.ref-payment-tools{grid-template-columns:1fr}.ref-qr{grid-row:auto}.ref-graph-card>header{gap:9px}.ref-graph-modes{width:100%;box-sizing:border-box}.ref-graph-modes button{flex:1}.ref-graph-stage,.ref-graph-stage svg{min-height:320px}.ref-reward-list dl div{display:grid;gap:2px}.ref-reward-list dd{text-align:left}.ref-modal{padding:12px}.ref-modal-dialog{max-height:calc(100vh - 24px);padding:14px}}

/* Package 144: the entire SVG node remains an interactive link on desktop and touch. */
.ref-graph-nodes,.ref-graph-nodes a,.ref-graph-node{pointer-events:all}.ref-graph-nodes a{touch-action:manipulation}.ref-graph-node.is-link{cursor:pointer}.ref-graph-node .ref-graph-node-hit{fill:transparent;stroke:none;pointer-events:all;filter:none}

/* Package 151: prevent the hidden empty-state from covering the SVG. */
.ref-graph-stage>p{pointer-events:none}
.ref-graph-stage>p[hidden]{display:none!important}

/* Package 155: per-node planets with a clipped land layer and atmosphere. */
.ref-graph-node .ref-planet-ocean{filter:url(#refNodeGlow);stroke-width:1.65}
.ref-graph-node .ref-planet-atmosphere{filter:url(#refNodeGlow);stroke-width:1.2;opacity:.72}
.ref-graph-node .ref-planet-land{opacity:.96;pointer-events:none}
.ref-graph-node .ref-planet-land path{stroke:rgba(255,255,255,.12);stroke-width:.7;vector-effect:non-scaling-stroke}
.ref-graph-node .ref-planet-shine{opacity:.24;pointer-events:none;filter:none;stroke:none}
.ref-graph-node.is-selected .ref-planet-atmosphere{stroke-width:2.8;opacity:1}
.ref-graph-node.is-selected .ref-planet-ocean{stroke-width:2.4}
.ref-graph-node-link:hover .ref-planet-atmosphere{stroke-width:3;opacity:1}
.ref-graph-node-link:hover .ref-planet-ocean{stroke-width:2.4}
.ref-graph-node-link:focus .ref-planet-atmosphere{stroke:#fff;stroke-width:3}

/* Package 152: spacious premium graph composition. */
.ref-graph-card{border-color:rgba(122,155,224,.18)!important;background:linear-gradient(145deg,rgba(13,20,43,.94),rgba(8,13,29,.96))!important}
.ref-graph-stage{min-height:520px;border-color:rgba(116,150,214,.16);background:radial-gradient(circle at 50% 46%,rgba(35,73,122,.16),transparent 34%),linear-gradient(180deg,#050b19 0%,#030815 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 18px 48px rgba(0,0,0,.18)}
.ref-graph-stage svg{min-height:520px}
.ref-graph-edges line{stroke:rgba(65,215,178,.20);stroke-width:1.15}
.ref-graph-node circle{fill:url(#refNodeFill);stroke:#7693c6;stroke-width:1.55;filter:url(#refNodeGlow)}
.ref-graph-node.is-selected circle{fill:url(#refSelectedFill);stroke:#55dcff;stroke-width:2.6}
.ref-graph-node text{fill:#f3f7ff;font-size:10.5px;font-weight:720;letter-spacing:.12px;stroke:#050a16;stroke-width:2.4px}
.ref-graph-node-link:hover circle{stroke:#a8f5dc;stroke-width:2.4}
.ref-graph-node-link:hover text{fill:#baffea;text-decoration:none}
.ref-graph-modes{border-color:rgba(118,151,215,.14);background:rgba(4,9,21,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.ref-graph-modes button.is-active{background:linear-gradient(180deg,#37577b,#29415f);color:#fff;box-shadow:inset 0 0 0 1px rgba(142,218,255,.45),0 5px 14px rgba(0,0,0,.22)}
@media(max-width:900px){.ref-graph-stage,.ref-graph-stage svg{min-height:430px}}
@media(max-width:560px){.ref-graph-stage,.ref-graph-stage svg{min-height:390px}.ref-graph-node text{font-size:10px}}

/* Package 153: framed safe-zone around the complete graph. */
.ref-graph-stage{box-sizing:border-box;padding:18px 22px 22px;overflow:hidden}
.ref-graph-stage svg{box-sizing:border-box;width:100%;max-width:100%;overflow:visible}
@media(max-width:900px){.ref-graph-stage{padding:14px 16px 18px}}
@media(max-width:560px){.ref-graph-stage{padding:10px 10px 14px}}

/* Package 154: the mathematical SVG safe-area owns the composition. */
.ref-graph-stage{padding:14px 16px;display:flex;align-items:center;justify-content:center}
.ref-graph-stage svg{flex:0 1 auto;display:block}
@media(max-width:900px){.ref-graph-stage{padding:12px 14px}}
@media(max-width:560px){.ref-graph-stage{padding:9px 9px}}

/* Package 157: visible parent road from MIXTROOT to the selected node. */
.ref-graph-edges line.is-root-path{stroke:rgba(105,224,197,.58);stroke-width:1.8;stroke-dasharray:4 5}
.ref-graph-node.is-ancestor text{fill:#dcecff}
.ref-graph-node.is-ancestor .ref-planet-atmosphere{opacity:.9}

/* Package 155 final cascade: dynamic planet palette overrides legacy circles. */
.ref-graph-node .ref-planet-atmosphere{fill:none;stroke:var(--planet-glow);filter:url(#refNodeGlow);stroke-width:1.2;opacity:.72}
.ref-graph-node .ref-planet-ocean{fill:var(--planet-fill);stroke:var(--planet-glow);filter:url(#refNodeGlow);stroke-width:1.65}
.ref-graph-node .ref-planet-land{fill:var(--planet-land);opacity:.96;pointer-events:none}
.ref-graph-node.is-selected .ref-planet-atmosphere{fill:none;stroke:var(--planet-glow);stroke-width:2.8;opacity:1}
.ref-graph-node.is-selected .ref-planet-ocean{fill:var(--planet-fill);stroke:var(--planet-glow);stroke-width:2.4}
.ref-graph-node-link:hover .ref-planet-atmosphere{fill:none;stroke:var(--planet-glow);stroke-width:3;opacity:1}
.ref-graph-node-link:hover .ref-planet-ocean{stroke:var(--planet-glow);stroke-width:2.4}

/* Package 158: quiet star field below the functional SVG layer. */
.ref-graph-stage{isolation:isolate}
.ref-graph-stage::before,.ref-graph-stage::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;background-repeat:repeat;will-change:opacity}
.ref-graph-stage::before{background-image:radial-gradient(circle,rgba(205,225,255,.72) 0 1px,transparent 1.4px),radial-gradient(circle,rgba(131,181,255,.48) 0 .8px,transparent 1.3px);background-size:83px 79px,127px 113px;background-position:17px 23px,61px 47px;opacity:.18;animation:refStarTwinkleA 9s ease-in-out infinite alternate}
.ref-graph-stage::after{background-image:radial-gradient(circle,rgba(255,255,255,.78) 0 .7px,transparent 1.2px),radial-gradient(circle,rgba(127,239,211,.42) 0 .65px,transparent 1.15px);background-size:149px 137px,191px 173px;background-position:91px 19px,33px 101px;opacity:.10;animation:refStarTwinkleB 13s ease-in-out infinite alternate}
.ref-graph-stage>[data-ref-graph-svg]{position:relative;z-index:1}
.ref-graph-stage>[data-ref-graph-empty]{z-index:2}
@keyframes refStarTwinkleA{0%,100%{opacity:.13}45%{opacity:.23}72%{opacity:.17}}
@keyframes refStarTwinkleB{0%,100%{opacity:.08}38%{opacity:.15}79%{opacity:.11}}
@media(prefers-reduced-motion:reduce){.ref-graph-stage::before,.ref-graph-stage::after{animation:none}.ref-graph-stage::before{opacity:.17}.ref-graph-stage::after{opacity:.10}}

/* Package 163: independent composition selector below the graph. */
/* Package 166: native-styled selector for referral-code payment assets. */
.ref-code-form select{width:100%;min-height:42px;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:#080d1b;color:#eef2ff;padding:9px 12px;font:inherit}.ref-code-form select:focus{outline:2px solid rgba(79,215,255,.28);border-color:#4fd7ff}
.ref-graph-layout-bar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:10px;padding:7px;border:1px solid rgba(118,151,215,.14);border-radius:10px;background:rgba(4,9,21,.72)}
.ref-graph-layout-bar>span{margin:0 5px;color:#7f8ba7;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ref-graph-layout-bar button{min-height:32px;padding:6px 13px;border:0;border-radius:8px;background:transparent;color:#9aa7c7;font-size:12px;font-weight:700}
.ref-graph-layout-bar button:hover{background:rgba(92,132,189,.15);color:#eef5ff}
.ref-graph-layout-bar button.is-active{background:linear-gradient(180deg,#37577b,#29415f);color:#fff;box-shadow:inset 0 0 0 1px rgba(142,218,255,.45),0 5px 14px rgba(0,0,0,.22)}
.ref-graph-edges path{fill:none;stroke:rgba(65,215,178,.25);stroke-width:1.25;transition:opacity .16s ease,stroke .16s ease,stroke-width .16s ease}
.ref-graph-edges path.is-root-path{stroke:rgba(105,224,197,.64);stroke-width:1.9;stroke-dasharray:4 5}
.ref-graph-stage svg.has-node-focus .ref-graph-node{opacity:.28;transition:opacity .16s ease}
.ref-graph-stage svg.has-node-focus .ref-graph-edges path{opacity:.12}
.ref-graph-stage svg.has-node-focus .ref-graph-node.is-branch-focus,.ref-graph-stage svg.has-node-focus .ref-graph-node.is-branch-neighbor{opacity:1}
.ref-graph-stage svg.has-node-focus .ref-graph-edges path.is-branch-focus{opacity:1;stroke:#67e2c2;stroke-width:2.5}
.ref-graph-stage svg.has-node-focus .ref-graph-edges path.is-branch-neighbor{opacity:.82;stroke:#8bb8ff;stroke-width:2}
@media(max-width:560px){.ref-graph-layout-bar{display:grid;grid-template-columns:repeat(3,1fr)}.ref-graph-layout-bar>span{grid-column:1/-1;text-align:center}.ref-graph-layout-bar button{padding:6px 7px}}

/* Package 164: minimal proportional frame gap; JS bounds include labels/glow. */
.ref-graph-stage{padding:5px 7px}
@media(max-width:900px){.ref-graph-stage{padding:4px 6px}}
@media(max-width:560px){.ref-graph-stage{padding:3px 4px}}

/* Package 167: localized referral guide immediately above the public footer. */
.ref-guide-card{margin:14px 0 0!important;padding:20px!important;border-color:rgba(79,215,255,.18)!important;background:linear-gradient(145deg,rgba(12,20,43,.96),rgba(7,14,31,.96))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 18px 44px rgba(0,0,0,.16)!important}
.ref-guide-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid rgba(124,164,226,.14)}
.ref-guide-head>span{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(79,215,255,.28);border-radius:9px;background:rgba(79,215,255,.07);color:#72e1ff;font-size:15px}
.ref-guide-head h2{margin:0!important;font-size:19px!important}
.ref-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;counter-reset:ref-guide}
.ref-guide-grid article{position:relative;padding:11px 0 12px 18px;border-bottom:1px solid rgba(120,151,210,.10);counter-increment:ref-guide}
.ref-guide-grid article::before{content:counter(ref-guide);position:absolute;inset-inline-start:0;top:13px;color:#5edfc0;font-size:10px;font-weight:800}
.ref-guide-grid h3{margin:0 0 5px;color:#eef5ff;font-size:14px;line-height:1.35}
.ref-guide-grid p{margin:0;color:#9eabc9;font-size:12px;line-height:1.55}
@media(max-width:760px){.ref-guide-grid{grid-template-columns:1fr}.ref-guide-card{padding:16px!important}}
html[dir="rtl"] .ref-guide-grid article{padding-right:18px;padding-left:0}