/* ── Official brand marks (Simple Icons, CC0) rendered via CSS masks ── */


.gg-si { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; }
html .fa-instagram, html .fa-instagram-square, html [data-smm-platform="instagram"] > i:first-child, html .fa-tiktok, html .fa-youtube, html .fa-youtube-square, html .fa-facebook, html .fa-facebook-f, html .fa-facebook-square, html .fa-twitter, html .fa-twitter-square, html .fa-x-twitter, html .fa-telegram, html .fa-telegram-plane, html .fa-spotify, html .fa-discord, html .fa-twitch, html .gg-si-onlyfans, html .gg-si-kick, html .fa-snapchat, html .fa-snapchat-ghost, html .fa-snapchat-square, html .fa-linkedin, html .fa-linkedin-in, html .fa-whatsapp, html .fa-whatsapp-square, html .fa-reddit, html .fa-reddit-alien, html .fa-reddit-square, html .fa-pinterest, html .fa-pinterest-p, html .fa-pinterest-square, html .gg-si-threads, html .fa-soundcloud, html [data-smm-platform="apple music"] > i:first-child, html .gg-si-applemusic, html [data-smm-platform="apple app store"] > i:first-child, html .gg-si-appstore, html [data-smm-platform="trustpilot"] > i:first-child, html .gg-si-trustpilot, html [data-smm-platform="bluesky"] > i:first-child, html .gg-si-bluesky, html .fa-github, html .fa-github-alt, html .fa-medium, html .fa-medium-m, html .fa-tumblr, html .fa-tumblr-square, html .gg-si-roblox, html .gg-si-coinmarketcap { display: inline-block !important; width: 1em !important; height: 1em !important; font-size: inherit; line-height: 1 !important; vertical-align: -.125em; color: transparent !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; }
html .fa-instagram::before, html .fa-instagram-square::before, html [data-smm-platform="instagram"] > i:first-child::before, html .fa-tiktok::before, html .fa-youtube::before, html .fa-youtube-square::before, html .fa-facebook::before, html .fa-facebook-f::before, html .fa-facebook-square::before, html .fa-twitter::before, html .fa-twitter-square::before, html .fa-x-twitter::before, html .fa-telegram::before, html .fa-telegram-plane::before, html .fa-spotify::before, html .fa-discord::before, html .fa-twitch::before, html .gg-si-onlyfans, html .gg-si-kick::before, html .fa-snapchat::before, html .fa-snapchat-ghost::before, html .fa-snapchat-square::before, html .fa-linkedin::before, html .fa-linkedin-in::before, html .fa-whatsapp::before, html .fa-whatsapp-square::before, html .fa-reddit::before, html .fa-reddit-alien::before, html .fa-reddit-square::before, html .fa-pinterest::before, html .fa-pinterest-p::before, html .fa-pinterest-square::before, html .gg-si-threads::before, html .fa-soundcloud::before, html [data-smm-platform="apple music"] > i:first-child::before, html .gg-si-applemusic::before, html [data-smm-platform="apple app store"] > i:first-child::before, html .gg-si-appstore::before, html [data-smm-platform="trustpilot"] > i:first-child::before, html .gg-si-trustpilot::before, html [data-smm-platform="bluesky"] > i:first-child::before, html .gg-si-bluesky::before, html .fa-github::before, html .fa-github-alt::before, html .fa-medium::before, html .fa-medium-m::before, html .fa-tumblr::before, html .fa-tumblr-square::before, html .gg-si-roblox::before, html .gg-si-coinmarketcap::before { content: "" !important; }
html .fa-instagram, html .fa-instagram-square, html [data-smm-platform="instagram"] > i:first-child { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/%3E%3C/svg%3E") center / contain no-repeat; background: radial-gradient(130% 130% at 25% 105%, #FFD776 0%, #FD8D32 22%, #E1306C 48%, #C13584 68%, #833AB4 86%, #5B51D8 100%) !important;  }
html .fa-tiktok { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E") center / contain no-repeat; background: var(--mono-ink) !important; filter: drop-shadow(-.06em -.04em 0 #25F4EE) drop-shadow(.06em .04em 0 #FE2C55); }
html .fa-youtube, html .fa-youtube-square { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E") center / contain no-repeat; background: #FF0000 !important;  }
html .fa-facebook, html .fa-facebook-f, html .fa-facebook-square { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/%3E%3C/svg%3E") center / contain no-repeat; background: #0866FF !important;  }
html .fa-twitter, html .smm-x-mark, html .fa-twitter-square, html .fa-x-twitter { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E") center / contain no-repeat; background: var(--mono-ink) !important;  }
html .fa-telegram, html .fa-telegram-plane { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z'/%3E%3C/svg%3E") center / contain no-repeat; background: #26A5E4 !important;  }
html .fa-spotify { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z'/%3E%3C/svg%3E") center / contain no-repeat; background: #1ED760 !important;  }
html .fa-discord { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z'/%3E%3C/svg%3E") center / contain no-repeat; background: #5865F2 !important;  }
html .fa-twitch { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z'/%3E%3C/svg%3E") center / contain no-repeat; background: #9146FF !important;  }
html .gg-si-kick, html .platform-kick-mark { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1.333 0h8v5.333H12V2.667h2.667V0h8v8H20v2.667h-2.667v2.666H20V16h2.667v8h-8v-2.667H12v-2.666H9.333V24h-8Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1.333 0h8v5.333H12V2.667h2.667V0h8v8H20v2.667h-2.667v2.666H20V16h2.667v8h-8v-2.667H12v-2.666H9.333V24h-8Z'/%3E%3C/svg%3E") center / contain no-repeat; background: #53FC19 !important;  }
html .gg-si-onlyfans { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 4.003h-4.015c-3.45 0-5.3.197-6.748 1.957a7.996 7.996 0 1 0 2.103 9.211c3.182-.231 5.39-2.134 6.085-5.173 0 0-2.399.585-4.43 0 4.018-.777 6.333-3.037 7.005-5.995zM5.61 11.999A2.391 2.391 0 0 1 9.28 9.97a2.966 2.966 0 0 1 2.998-2.528h.008c-.92 1.778-1.407 3.352-1.998 5.263A2.392 2.392 0 0 1 5.61 12Zm2.386-7.996a7.996 7.996 0 1 0 7.996 7.996 7.996 7.996 0 0 0-7.996-7.996Zm0 10.394A2.399 2.399 0 1 1 10.395 12a2.396 2.396 0 0 1-2.399 2.398Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 4.003h-4.015c-3.45 0-5.3.197-6.748 1.957a7.996 7.996 0 1 0 2.103 9.211c3.182-.231 5.39-2.134 6.085-5.173 0 0-2.399.585-4.43 0 4.018-.777 6.333-3.037 7.005-5.995zM5.61 11.999A2.391 2.391 0 0 1 9.28 9.97a2.966 2.966 0 0 1 2.998-2.528h.008c-.92 1.778-1.407 3.352-1.998 5.263A2.392 2.392 0 0 1 5.61 12Zm2.386-7.996a7.996 7.996 0 1 0 7.996 7.996 7.996 7.996 0 0 0-7.996-7.996Zm0 10.394A2.399 2.399 0 1 1 10.395 12a2.396 2.396 0 0 1-2.399 2.398Z'/%3E%3C/svg%3E") center / contain no-repeat; background: #00AFF0 !important; }
html .fa-snapchat, html .fa-snapchat-ghost, html .fa-snapchat-square { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.206.793c.99 0 4.347.276 5.93 3.821.529 1.193.403 3.219.299 4.847l-.003.06c-.012.18-.022.345-.03.51.075.045.203.09.401.09.3-.016.659-.12 1.033-.301.165-.088.344-.104.464-.104.182 0 .359.029.509.09.45.149.734.479.734.838.015.449-.39.839-1.213 1.168-.089.029-.209.075-.344.119-.45.135-1.139.36-1.333.81-.09.224-.061.524.12.868l.015.015c.06.136 1.526 3.475 4.791 4.014.255.044.435.27.42.509 0 .075-.015.149-.045.225-.24.569-1.273.988-3.146 1.271-.059.091-.12.375-.164.57-.029.179-.074.36-.134.553-.076.271-.27.405-.555.405h-.03c-.135 0-.313-.031-.538-.074-.36-.075-.765-.135-1.273-.135-.3 0-.599.015-.913.074-.6.104-1.123.464-1.723.884-.853.599-1.826 1.288-3.294 1.288-.06 0-.119-.015-.18-.015h-.149c-1.468 0-2.427-.675-3.279-1.288-.599-.42-1.107-.779-1.707-.884-.314-.045-.629-.074-.928-.074-.54 0-.958.089-1.272.149-.211.043-.391.074-.54.074-.374 0-.523-.224-.583-.42-.061-.192-.09-.389-.135-.567-.046-.181-.105-.494-.166-.57-1.918-.222-2.95-.642-3.189-1.226-.031-.063-.052-.15-.055-.225-.015-.243.165-.465.42-.509 3.264-.54 4.73-3.879 4.791-4.02l.016-.029c.18-.345.224-.645.119-.869-.195-.434-.884-.658-1.332-.809-.121-.029-.24-.074-.346-.119-1.107-.435-1.257-.93-1.197-1.273.09-.479.674-.793 1.168-.793.146 0 .27.029.383.074.42.194.789.3 1.104.3.234 0 .384-.06.465-.105l-.046-.569c-.098-1.626-.225-3.651.307-4.837C7.392 1.077 10.739.807 11.727.807l.419-.015h.06z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.206.793c.99 0 4.347.276 5.93 3.821.529 1.193.403 3.219.299 4.847l-.003.06c-.012.18-.022.345-.03.51.075.045.203.09.401.09.3-.016.659-.12 1.033-.301.165-.088.344-.104.464-.104.182 0 .359.029.509.09.45.149.734.479.734.838.015.449-.39.839-1.213 1.168-.089.029-.209.075-.344.119-.45.135-1.139.36-1.333.81-.09.224-.061.524.12.868l.015.015c.06.136 1.526 3.475 4.791 4.014.255.044.435.27.42.509 0 .075-.015.149-.045.225-.24.569-1.273.988-3.146 1.271-.059.091-.12.375-.164.57-.029.179-.074.36-.134.553-.076.271-.27.405-.555.405h-.03c-.135 0-.313-.031-.538-.074-.36-.075-.765-.135-1.273-.135-.3 0-.599.015-.913.074-.6.104-1.123.464-1.723.884-.853.599-1.826 1.288-3.294 1.288-.06 0-.119-.015-.18-.015h-.149c-1.468 0-2.427-.675-3.279-1.288-.599-.42-1.107-.779-1.707-.884-.314-.045-.629-.074-.928-.074-.54 0-.958.089-1.272.149-.211.043-.391.074-.54.074-.374 0-.523-.224-.583-.42-.061-.192-.09-.389-.135-.567-.046-.181-.105-.494-.166-.57-1.918-.222-2.95-.642-3.189-1.226-.031-.063-.052-.15-.055-.225-.015-.243.165-.465.42-.509 3.264-.54 4.73-3.879 4.791-4.02l.016-.029c.18-.345.224-.645.119-.869-.195-.434-.884-.658-1.332-.809-.121-.029-.24-.074-.346-.119-1.107-.435-1.257-.93-1.197-1.273.09-.479.674-.793 1.168-.793.146 0 .27.029.383.074.42.194.789.3 1.104.3.234 0 .384-.06.465-.105l-.046-.569c-.098-1.626-.225-3.651.307-4.837C7.392 1.077 10.739.807 11.727.807l.419-.015h.06z'/%3E%3C/svg%3E") center / contain no-repeat; background: #FFFC00 !important; filter: drop-shadow(0 0 .5px rgba(0,0,0,.6)); }
html .fa-linkedin, html .fa-linkedin-in { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E") center / contain no-repeat; background: #0A66C2 !important;  }
html .fa-whatsapp, html .fa-whatsapp-square { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E") center / contain no-repeat; background: #25D366 !important;  }
html .fa-reddit, html .fa-reddit-alien, html .fa-reddit-square { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z'/%3E%3C/svg%3E") center / contain no-repeat; background: #FF4500 !important;  }
html .fa-pinterest, html .fa-pinterest-p, html .fa-pinterest-square { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z'/%3E%3C/svg%3E") center / contain no-repeat; background: #E60023 !important;  }
html .gg-si-threads, html .smm-threads-mark { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 0 1 3.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844 0-1.992.232-2.721 1.32L7.734 7.847c.98-1.454 2.568-2.256 4.478-2.256h.044c3.194.02 5.097 1.975 5.287 5.388.108.046.216.094.321.142 1.49.7 2.58 1.761 3.154 3.07.797 1.82.871 4.79-1.548 7.158-1.85 1.81-4.094 2.628-7.277 2.65Zm1.003-11.69c-.242 0-.487.007-.739.021-1.836.103-2.98.946-2.916 2.143.067 1.256 1.452 1.839 2.784 1.767 1.224-.065 2.818-.543 3.086-3.71a10.5 10.5 0 0 0-2.215-.221z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 0 1 3.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844 0-1.992.232-2.721 1.32L7.734 7.847c.98-1.454 2.568-2.256 4.478-2.256h.044c3.194.02 5.097 1.975 5.287 5.388.108.046.216.094.321.142 1.49.7 2.58 1.761 3.154 3.07.797 1.82.871 4.79-1.548 7.158-1.85 1.81-4.094 2.628-7.277 2.65Zm1.003-11.69c-.242 0-.487.007-.739.021-1.836.103-2.98.946-2.916 2.143.067 1.256 1.452 1.839 2.784 1.767 1.224-.065 2.818-.543 3.086-3.71a10.5 10.5 0 0 0-2.215-.221z'/%3E%3C/svg%3E") center / contain no-repeat; background: var(--mono-ink) !important;  }
html .fa-soundcloud { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.999 14.165c-.052 1.796-1.612 3.169-3.4 3.169h-8.18a.68.68 0 0 1-.675-.683V7.862a.747.747 0 0 1 .452-.724s.75-.513 2.333-.513a5.364 5.364 0 0 1 2.763.755 5.433 5.433 0 0 1 2.57 3.54c.282-.08.574-.121.868-.12.884 0 1.73.358 2.347.992s.948 1.49.922 2.373ZM10.721 8.421c.247 2.98.427 5.697 0 8.672a.264.264 0 0 1-.53 0c-.395-2.946-.22-5.718 0-8.672a.264.264 0 0 1 .53 0ZM9.072 9.448c.285 2.659.37 4.986-.006 7.655a.277.277 0 0 1-.55 0c-.331-2.63-.256-5.02 0-7.655a.277.277 0 0 1 .556 0Zm-1.663-.257c.27 2.726.39 5.171 0 7.904a.266.266 0 0 1-.532 0c-.38-2.69-.257-5.21 0-7.904a.266.266 0 0 1 .532 0Zm-1.647.77a26.108 26.108 0 0 1-.008 7.147.272.272 0 0 1-.542 0 27.955 27.955 0 0 1 0-7.147.275.275 0 0 1 .55 0Zm-1.67 1.769c.421 1.865.228 3.5-.029 5.388a.257.257 0 0 1-.514 0c-.21-1.858-.398-3.549 0-5.389a.272.272 0 0 1 .543 0Zm-1.655-.273c.388 1.897.26 3.508-.01 5.412-.026.28-.514.283-.54 0-.244-1.878-.347-3.54-.01-5.412a.283.283 0 0 1 .56 0Zm-1.668.911c.4 1.268.257 2.292-.026 3.572a.257.257 0 0 1-.514 0c-.241-1.262-.354-2.312-.023-3.572a.283.283 0 0 1 .563 0Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.999 14.165c-.052 1.796-1.612 3.169-3.4 3.169h-8.18a.68.68 0 0 1-.675-.683V7.862a.747.747 0 0 1 .452-.724s.75-.513 2.333-.513a5.364 5.364 0 0 1 2.763.755 5.433 5.433 0 0 1 2.57 3.54c.282-.08.574-.121.868-.12.884 0 1.73.358 2.347.992s.948 1.49.922 2.373ZM10.721 8.421c.247 2.98.427 5.697 0 8.672a.264.264 0 0 1-.53 0c-.395-2.946-.22-5.718 0-8.672a.264.264 0 0 1 .53 0ZM9.072 9.448c.285 2.659.37 4.986-.006 7.655a.277.277 0 0 1-.55 0c-.331-2.63-.256-5.02 0-7.655a.277.277 0 0 1 .556 0Zm-1.663-.257c.27 2.726.39 5.171 0 7.904a.266.266 0 0 1-.532 0c-.38-2.69-.257-5.21 0-7.904a.266.266 0 0 1 .532 0Zm-1.647.77a26.108 26.108 0 0 1-.008 7.147.272.272 0 0 1-.542 0 27.955 27.955 0 0 1 0-7.147.275.275 0 0 1 .55 0Zm-1.67 1.769c.421 1.865.228 3.5-.029 5.388a.257.257 0 0 1-.514 0c-.21-1.858-.398-3.549 0-5.389a.272.272 0 0 1 .543 0Zm-1.655-.273c.388 1.897.26 3.508-.01 5.412-.026.28-.514.283-.54 0-.244-1.878-.347-3.54-.01-5.412a.283.283 0 0 1 .56 0Zm-1.668.911c.4 1.268.257 2.292-.026 3.572a.257.257 0 0 1-.514 0c-.241-1.262-.354-2.312-.023-3.572a.283.283 0 0 1 .563 0Z'/%3E%3C/svg%3E") center / contain no-repeat; background: #FF5500 !important;  }
html [data-smm-platform="apple music"] > i:first-child, html .gg-si-applemusic { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.994 6.124a9.23 9.23 0 00-.24-2.19c-.317-1.31-1.062-2.31-2.18-3.043a5.022 5.022 0 00-1.877-.726 10.496 10.496 0 00-1.564-.15c-.04-.003-.083-.01-.124-.013H5.986c-.152.01-.303.017-.455.026-.747.043-1.49.123-2.193.4-1.336.53-2.3 1.452-2.865 2.78-.192.448-.292.925-.363 1.408-.056.392-.088.785-.1 1.18 0 .032-.007.062-.01.093v12.223c.01.14.017.283.027.424.05.815.154 1.624.497 2.373.65 1.42 1.738 2.353 3.234 2.801.42.127.856.187 1.293.228.555.053 1.11.06 1.667.06h11.03a12.5 12.5 0 001.57-.1c.822-.106 1.596-.35 2.295-.81a5.046 5.046 0 001.88-2.207c.186-.42.293-.87.37-1.324.113-.675.138-1.358.137-2.04-.002-3.8 0-7.595-.003-11.393zm-6.423 3.99v5.712c0 .417-.058.827-.244 1.206-.29.59-.76.962-1.388 1.14-.35.1-.706.157-1.07.173-.95.045-1.773-.6-1.943-1.536a1.88 1.88 0 011.038-2.022c.323-.16.67-.25 1.018-.324.378-.082.758-.153 1.134-.24.274-.063.457-.23.51-.516a.904.904 0 00.02-.193c0-1.815 0-3.63-.002-5.443a.725.725 0 00-.026-.185c-.04-.15-.15-.243-.304-.234-.16.01-.318.035-.475.066-.76.15-1.52.303-2.28.456l-2.325.47-1.374.278c-.016.003-.032.01-.048.013-.277.077-.377.203-.39.49-.002.042 0 .086 0 .13-.002 2.602 0 5.204-.003 7.805 0 .42-.047.836-.215 1.227-.278.64-.77 1.04-1.434 1.233-.35.1-.71.16-1.075.172-.96.036-1.755-.6-1.92-1.544-.14-.812.23-1.685 1.154-2.075.357-.15.73-.232 1.108-.31.287-.06.575-.116.86-.177.383-.083.583-.323.6-.714v-.15c0-2.96 0-5.922.002-8.882 0-.123.013-.25.042-.37.07-.285.273-.448.546-.518.255-.066.515-.112.774-.165.733-.15 1.466-.296 2.2-.444l2.27-.46c.67-.134 1.34-.27 2.01-.403.22-.043.442-.088.663-.106.31-.025.523.17.554.482.008.073.012.148.012.223.002 1.91.002 3.822 0 5.732z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.994 6.124a9.23 9.23 0 00-.24-2.19c-.317-1.31-1.062-2.31-2.18-3.043a5.022 5.022 0 00-1.877-.726 10.496 10.496 0 00-1.564-.15c-.04-.003-.083-.01-.124-.013H5.986c-.152.01-.303.017-.455.026-.747.043-1.49.123-2.193.4-1.336.53-2.3 1.452-2.865 2.78-.192.448-.292.925-.363 1.408-.056.392-.088.785-.1 1.18 0 .032-.007.062-.01.093v12.223c.01.14.017.283.027.424.05.815.154 1.624.497 2.373.65 1.42 1.738 2.353 3.234 2.801.42.127.856.187 1.293.228.555.053 1.11.06 1.667.06h11.03a12.5 12.5 0 001.57-.1c.822-.106 1.596-.35 2.295-.81a5.046 5.046 0 001.88-2.207c.186-.42.293-.87.37-1.324.113-.675.138-1.358.137-2.04-.002-3.8 0-7.595-.003-11.393zm-6.423 3.99v5.712c0 .417-.058.827-.244 1.206-.29.59-.76.962-1.388 1.14-.35.1-.706.157-1.07.173-.95.045-1.773-.6-1.943-1.536a1.88 1.88 0 011.038-2.022c.323-.16.67-.25 1.018-.324.378-.082.758-.153 1.134-.24.274-.063.457-.23.51-.516a.904.904 0 00.02-.193c0-1.815 0-3.63-.002-5.443a.725.725 0 00-.026-.185c-.04-.15-.15-.243-.304-.234-.16.01-.318.035-.475.066-.76.15-1.52.303-2.28.456l-2.325.47-1.374.278c-.016.003-.032.01-.048.013-.277.077-.377.203-.39.49-.002.042 0 .086 0 .13-.002 2.602 0 5.204-.003 7.805 0 .42-.047.836-.215 1.227-.278.64-.77 1.04-1.434 1.233-.35.1-.71.16-1.075.172-.96.036-1.755-.6-1.92-1.544-.14-.812.23-1.685 1.154-2.075.357-.15.73-.232 1.108-.31.287-.06.575-.116.86-.177.383-.083.583-.323.6-.714v-.15c0-2.96 0-5.922.002-8.882 0-.123.013-.25.042-.37.07-.285.273-.448.546-.518.255-.066.515-.112.774-.165.733-.15 1.466-.296 2.2-.444l2.27-.46c.67-.134 1.34-.27 2.01-.403.22-.043.442-.088.663-.106.31-.025.523.17.554.482.008.073.012.148.012.223.002 1.91.002 3.822 0 5.732z'/%3E%3C/svg%3E") center / contain no-repeat; background: #FA243C !important;  }
html [data-smm-platform="apple app store"] > i:first-child, html .gg-si-appstore { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.8086 14.9194l6.1107-11.0368c.0837-.1513.1682-.302.2437-.4584.0685-.142.1267-.2854.1646-.4403.0803-.3259.0588-.6656-.066-.9767-.1238-.3095-.3417-.5678-.6201-.7355a1.4175 1.4175 0 0 0-.921-.1924c-.3207.043-.6135.1935-.8443.4288-.1094.1118-.1996.2361-.2832.369-.092.1463-.175.2979-.259.4492l-.3864.6979-.3865-.6979c-.0837-.1515-.1667-.303-.2587-.4492-.0837-.1329-.1739-.2572-.2835-.369-.2305-.2353-.5233-.3857-.844-.429a1.4181 1.4181 0 0 0-.921.1926c-.2784.1677-.4964.426-.6203.7355-.1246.311-.1461.6508-.066.9767.038.155.0962.2984.1648.4403.0753.1564.1598.307.2437.4584l1.248 2.2543-4.8625 8.7825H2.0295c-.1676 0-.3351-.0007-.5026.0092-.1522.009-.3004.0284-.448.0714-.3108.0906-.5822.2798-.7783.548-.195.2665-.3006.5929-.3006.9279 0 .3352.1057.6612.3006.9277.196.2683.4675.4575.7782.548.1477.043.296.0623.4481.0715.1675.01.335.009.5026.009h13.0974c.0171-.0357.059-.1294.1-.2697.415-1.4151-.6156-2.843-2.0347-2.843zM3.113 18.5418l-.7922 1.5008c-.0818.1553-.1644.31-.2384.4705-.067.1458-.124.293-.1611.452-.0785.3346-.0576.6834.0645 1.0029.1212.3175.3346.583.607.7549.2727.172.5891.2416.9013.1975.3139-.044.6005-.1986.8263-.4402.1072-.1148.1954-.2424.2772-.3787.0902-.1503.1714-.3059.2535-.4612L6 19.4636c-.0896-.149-.9473-1.4704-2.887-.9218m20.5861-3.0056a1.4707 1.4707 0 0 0-.779-.5407c-.1476-.0425-.2961-.0616-.4483-.0705-.1678-.0099-.3352-.0091-.503-.0091H18.648l-4.3891-7.817c-.6655.7005-.9632 1.485-1.0773 2.1976-.1655 1.0333.0367 2.0934.546 3.0004l5.2741 9.3933c.084.1494.167.299.2591.4435.0837.131.1739.2537.2836.364.231.2323.5238.3809.8449.4232.3192.0424.643-.0244.9217-.1899.2784-.1653.4968-.4204.621-.7257.1246-.3072.146-.6425.0658-.9641-.0381-.1529-.0962-.2945-.165-.4346-.0753-.1543-.1598-.303-.2438-.4524l-1.216-2.1662h1.596c.1677 0 .3351.0009.5029-.009.1522-.009.3007-.028.4483-.0705a1.4707 1.4707 0 0 0 .779-.5407A1.5386 1.5386 0 0 0 24 16.452a1.539 1.539 0 0 0-.3009-.9158Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.8086 14.9194l6.1107-11.0368c.0837-.1513.1682-.302.2437-.4584.0685-.142.1267-.2854.1646-.4403.0803-.3259.0588-.6656-.066-.9767-.1238-.3095-.3417-.5678-.6201-.7355a1.4175 1.4175 0 0 0-.921-.1924c-.3207.043-.6135.1935-.8443.4288-.1094.1118-.1996.2361-.2832.369-.092.1463-.175.2979-.259.4492l-.3864.6979-.3865-.6979c-.0837-.1515-.1667-.303-.2587-.4492-.0837-.1329-.1739-.2572-.2835-.369-.2305-.2353-.5233-.3857-.844-.429a1.4181 1.4181 0 0 0-.921.1926c-.2784.1677-.4964.426-.6203.7355-.1246.311-.1461.6508-.066.9767.038.155.0962.2984.1648.4403.0753.1564.1598.307.2437.4584l1.248 2.2543-4.8625 8.7825H2.0295c-.1676 0-.3351-.0007-.5026.0092-.1522.009-.3004.0284-.448.0714-.3108.0906-.5822.2798-.7783.548-.195.2665-.3006.5929-.3006.9279 0 .3352.1057.6612.3006.9277.196.2683.4675.4575.7782.548.1477.043.296.0623.4481.0715.1675.01.335.009.5026.009h13.0974c.0171-.0357.059-.1294.1-.2697.415-1.4151-.6156-2.843-2.0347-2.843zM3.113 18.5418l-.7922 1.5008c-.0818.1553-.1644.31-.2384.4705-.067.1458-.124.293-.1611.452-.0785.3346-.0576.6834.0645 1.0029.1212.3175.3346.583.607.7549.2727.172.5891.2416.9013.1975.3139-.044.6005-.1986.8263-.4402.1072-.1148.1954-.2424.2772-.3787.0902-.1503.1714-.3059.2535-.4612L6 19.4636c-.0896-.149-.9473-1.4704-2.887-.9218m20.5861-3.0056a1.4707 1.4707 0 0 0-.779-.5407c-.1476-.0425-.2961-.0616-.4483-.0705-.1678-.0099-.3352-.0091-.503-.0091H18.648l-4.3891-7.817c-.6655.7005-.9632 1.485-1.0773 2.1976-.1655 1.0333.0367 2.0934.546 3.0004l5.2741 9.3933c.084.1494.167.299.2591.4435.0837.131.1739.2537.2836.364.231.2323.5238.3809.8449.4232.3192.0424.643-.0244.9217-.1899.2784-.1653.4968-.4204.621-.7257.1246-.3072.146-.6425.0658-.9641-.0381-.1529-.0962-.2945-.165-.4346-.0753-.1543-.1598-.303-.2438-.4524l-1.216-2.1662h1.596c.1677 0 .3351.0009.5029-.009.1522-.009.3007-.028.4483-.0705a1.4707 1.4707 0 0 0 .779-.5407A1.5386 1.5386 0 0 0 24 16.452a1.539 1.539 0 0 0-.3009-.9158Z'/%3E%3C/svg%3E") center / contain no-repeat; background: #0D96F6 !important;  }
html [data-smm-platform="trustpilot"] > i:first-child, html .gg-si-trustpilot { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.227 16.67l2.19 6.742-7.413-5.388 5.223-1.354zM24 9.31h-9.165L12.005.589l-2.84 8.723L0 9.3l7.422 5.397-2.84 8.714 7.422-5.388 4.583-3.326L24 9.311z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.227 16.67l2.19 6.742-7.413-5.388 5.223-1.354zM24 9.31h-9.165L12.005.589l-2.84 8.723L0 9.3l7.422 5.397-2.84 8.714 7.422-5.388 4.583-3.326L24 9.311z'/%3E%3C/svg%3E") center / contain no-repeat; background: #00B67A !important;  }
html [data-smm-platform="bluesky"] > i:first-child, html .gg-si-bluesky { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z'/%3E%3C/svg%3E") center / contain no-repeat; background: #0285FF !important;  }
html .fa-github, html .fa-github-alt { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") center / contain no-repeat; background: var(--mono-ink) !important;  }
html .fa-medium, html .fa-medium-m { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.21 0A4.201 4.201 0 0 0 0 4.21v15.58A4.201 4.201 0 0 0 4.21 24h15.58A4.201 4.201 0 0 0 24 19.79v-1.093c-.137.013-.278.02-.422.02-2.577 0-4.027-2.146-4.09-4.832a7.592 7.592 0 0 1 .022-.708c.093-1.186.475-2.241 1.105-3.022a3.885 3.885 0 0 1 1.395-1.1c.468-.237 1.127-.367 1.664-.367h.023c.101 0 .202.004.303.01V4.211A4.201 4.201 0 0 0 19.79 0Zm.198 5.583h4.165l3.588 8.435 3.59-8.435h3.864v.146l-.019.004c-.705.16-1.063.397-1.063 1.254h-.003l.003 10.274c.06.676.424.885 1.063 1.03l.02.004v.145h-4.923v-.145l.019-.005c.639-.144.994-.353 1.054-1.03V7.267l-4.745 11.15h-.261L6.15 7.569v9.445c0 .857.358 1.094 1.063 1.253l.02.004v.147H4.405v-.147l.019-.004c.705-.16 1.065-.397 1.065-1.253V6.987c0-.857-.358-1.094-1.064-1.254l-.018-.004zm19.25 3.668c-1.086.023-1.733 1.323-1.813 3.124H24V9.298a1.378 1.378 0 0 0-.342-.047Zm-1.862 3.632c-.1 1.756.86 3.239 2.204 3.634v-3.634z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.21 0A4.201 4.201 0 0 0 0 4.21v15.58A4.201 4.201 0 0 0 4.21 24h15.58A4.201 4.201 0 0 0 24 19.79v-1.093c-.137.013-.278.02-.422.02-2.577 0-4.027-2.146-4.09-4.832a7.592 7.592 0 0 1 .022-.708c.093-1.186.475-2.241 1.105-3.022a3.885 3.885 0 0 1 1.395-1.1c.468-.237 1.127-.367 1.664-.367h.023c.101 0 .202.004.303.01V4.211A4.201 4.201 0 0 0 19.79 0Zm.198 5.583h4.165l3.588 8.435 3.59-8.435h3.864v.146l-.019.004c-.705.16-1.063.397-1.063 1.254h-.003l.003 10.274c.06.676.424.885 1.063 1.03l.02.004v.145h-4.923v-.145l.019-.005c.639-.144.994-.353 1.054-1.03V7.267l-4.745 11.15h-.261L6.15 7.569v9.445c0 .857.358 1.094 1.063 1.253l.02.004v.147H4.405v-.147l.019-.004c.705-.16 1.065-.397 1.065-1.253V6.987c0-.857-.358-1.094-1.064-1.254l-.018-.004zm19.25 3.668c-1.086.023-1.733 1.323-1.813 3.124H24V9.298a1.378 1.378 0 0 0-.342-.047Zm-1.862 3.632c-.1 1.756.86 3.239 2.204 3.634v-3.634z'/%3E%3C/svg%3E") center / contain no-repeat; background: var(--mono-ink) !important;  }
html .fa-tumblr, html .fa-tumblr-square { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.563 24c-5.093 0-7.031-3.756-7.031-6.411V9.747H5.116V6.648c3.63-1.313 4.512-4.596 4.71-6.469C9.84.051 9.941 0 9.999 0h3.517v6.114h4.801v3.633h-4.82v7.47c.016 1.001.375 2.371 2.207 2.371h.09c.631-.02 1.486-.205 1.936-.419l1.156 3.425c-.436.636-2.4 1.374-4.156 1.404h-.178l.011.002z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.563 24c-5.093 0-7.031-3.756-7.031-6.411V9.747H5.116V6.648c3.63-1.313 4.512-4.596 4.71-6.469C9.84.051 9.941 0 9.999 0h3.517v6.114h4.801v3.633h-4.82v7.47c.016 1.001.375 2.371 2.207 2.371h.09c.631-.02 1.486-.205 1.936-.419l1.156 3.425c-.436.636-2.4 1.374-4.156 1.404h-.178l.011.002z'/%3E%3C/svg%3E") center / contain no-repeat; background: #5A7299 !important;  }
html .gg-si-roblox, html .platform-roblox-mark { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.926 23.998 0 18.892 5.075.002 24 5.108ZM15.348 10.09l-5.282-1.453-1.414 5.273 5.282 1.453z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.926 23.998 0 18.892 5.075.002 24 5.108ZM15.348 10.09l-5.282-1.453-1.414 5.273 5.282 1.453z'/%3E%3C/svg%3E") center / contain no-repeat; background: var(--mono-ink) !important;  }
html .gg-si-coinmarketcap, html .platform-cmc-mark { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.738 14.341c-.419.265-.912.298-1.286.087-.476-.27-.738-.898-.738-1.774v-2.618c0-1.264-.5-2.164-1.336-2.407-1.416-.413-2.482 1.32-2.882 1.972l-2.498 4.05v-4.95c-.028-1.14-.398-1.821-1.1-2.027-.466-.135-1.161-.081-1.837.953l-5.597 8.987A9.875 9.875 0 0 1 2.326 12c0-5.414 4.339-9.818 9.672-9.818 5.332 0 9.67 4.404 9.67 9.818.004.018.002.034.003.053.05 1.049-.29 1.883-.933 2.29zm3.08-2.34-.001-.055C23.787 5.353 18.497 0 11.997 0 5.48 0 .177 5.383.177 12c0 6.616 5.303 12 11.82 12 2.991 0 5.846-1.137 8.037-3.2.435-.41.46-1.1.057-1.541a1.064 1.064 0 0 0-1.519-.059 9.56 9.56 0 0 1-6.574 2.618c-2.856 0-5.425-1.263-7.197-3.268l5.048-8.105v3.737c0 1.794.696 2.374 1.28 2.544.584.17 1.476.054 2.413-1.468.998-1.614 2.025-3.297 3.023-4.88v2.276c0 1.678.672 3.02 1.843 3.68 1.056.597 2.384.543 3.465-.14 1.312-.828 2.018-2.354 1.944-4.193z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.738 14.341c-.419.265-.912.298-1.286.087-.476-.27-.738-.898-.738-1.774v-2.618c0-1.264-.5-2.164-1.336-2.407-1.416-.413-2.482 1.32-2.882 1.972l-2.498 4.05v-4.95c-.028-1.14-.398-1.821-1.1-2.027-.466-.135-1.161-.081-1.837.953l-5.597 8.987A9.875 9.875 0 0 1 2.326 12c0-5.414 4.339-9.818 9.672-9.818 5.332 0 9.67 4.404 9.67 9.818.004.018.002.034.003.053.05 1.049-.29 1.883-.933 2.29zm3.08-2.34-.001-.055C23.787 5.353 18.497 0 11.997 0 5.48 0 .177 5.383.177 12c0 6.616 5.303 12 11.82 12 2.991 0 5.846-1.137 8.037-3.2.435-.41.46-1.1.057-1.541a1.064 1.064 0 0 0-1.519-.059 9.56 9.56 0 0 1-6.574 2.618c-2.856 0-5.425-1.263-7.197-3.268l5.048-8.105v3.737c0 1.794.696 2.374 1.28 2.544.584.17 1.476.054 2.413-1.468.998-1.614 2.025-3.297 3.023-4.88v2.276c0 1.678.672 3.02 1.843 3.68 1.056.597 2.384.543 3.465-.14 1.312-.828 2.018-2.354 1.944-4.193z'/%3E%3C/svg%3E") center / contain no-repeat; background: #3861FB !important;  }

html .platform-kick-mark, html .smm-threads-mark, html .platform-cmc-mark, html .platform-roblox-mark, html .smm-x-mark { display: inline-block !important; width: 1em !important; height: 1em !important; line-height: 1 !important; vertical-align: -.125em; color: transparent !important; font-size: inherit; overflow: hidden; }
html .platform-kick-mark > *, html .smm-threads-mark > *, html .platform-cmc-mark > *, html .platform-roblox-mark > *, html .smm-x-mark > * { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   SMM.GG 2026 — "Nightfall": deep blue-black, soft floating surfaces,
   white primary actions, brand red only for the mark and highlights.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bg: #090a10;
  --bg-2: #0d0f17;
  --panel: #12141d;
  --panel-2: #181b26;
  --panel-3: #202432;
  --field: #0e1019;
  --line: rgba(148,163,255,.08);
  --line-2: rgba(148,163,255,.13);
  --line-3: rgba(148,163,255,.24);
  --text: #f4f5fb;
  --text-2: #aab0c6;
  --text-3: #6f7590;
  --brand: #ff3a5f;
  --brand-soft: rgba(255,58,95,.12);
  --hi: #8b9cff;              /* calm highlight (links, focus, selection) */
  --hi-soft: rgba(139,156,255,.14);
  --ok: #4ade80; --ok-soft: rgba(74,222,128,.12);
  --warn: #fbbf24; --warn-soft: rgba(251,191,36,.12);
  --bad: #fb7185; --bad-soft: rgba(251,113,133,.13);
  --info: #60a5fa; --info-soft: rgba(96,165,250,.13);
  --violet: #a78bfa; --violet-soft: rgba(167,139,250,.14);
  --orange: #fb923c; --orange-soft: rgba(251,146,60,.13);
  --mono-ink: #f4f5fb;

  --surface: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)), var(--panel);
  --lift: 0 1px 0 rgba(255,255,255,.05) inset, 0 0 0 1px var(--line), 0 18px 50px -24px rgba(0,0,0,.9);
  --lift-hi: 0 1px 0 rgba(255,255,255,.07) inset, 0 0 0 1px var(--line-2), 0 26px 60px -24px rgba(0,0,0,.95);
  --pop: 0 0 0 1px var(--line-2), 0 30px 70px -20px rgba(0,0,0,.9);
  --ring: 0 0 0 3px rgba(139,156,255,.28);
  --r-sm: 12px; --r: 16px; --r-lg: 20px; --r-xl: 26px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --side: 264px;
  --top: 72px;
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg: #f3f5fb; --bg-2: #eef1f8; --panel: #ffffff; --panel-2: #f6f7fc; --panel-3: #edf0f8; --field: #ffffff;
  --line: rgba(30,41,90,.08); --line-2: rgba(30,41,90,.12); --line-3: rgba(30,41,90,.22);
  --text: #0e1122; --text-2: #4c5373; --text-3: #8a90a8;
  --brand: #e5133d; --brand-soft: rgba(229,19,61,.08); --hi: #4f63e7; --hi-soft: rgba(79,99,231,.1);
  --ok: #059669; --ok-soft: rgba(5,150,105,.1); --warn: #b45309; --warn-soft: rgba(217,119,6,.1);
  --bad: #e11d48; --bad-soft: rgba(225,29,72,.08); --info: #2563eb; --info-soft: rgba(37,99,235,.08);
  --violet: #7c3aed; --violet-soft: rgba(124,58,237,.08); --orange: #c2410c; --orange-soft: rgba(234,88,12,.09);
  --mono-ink: #0e1122;
  --surface: var(--panel);
  --lift: 0 0 0 1px var(--line), 0 12px 32px -18px rgba(30,41,90,.25);
  --lift-hi: 0 0 0 1px var(--line-2), 0 18px 44px -18px rgba(30,41,90,.3);
  --pop: 0 0 0 1px var(--line-2), 0 30px 70px -24px rgba(30,41,90,.35);
  --ring: 0 0 0 3px rgba(79,99,231,.18);
  color-scheme: light;
}

/* ── Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font: 15px/1.6 var(--font); letter-spacing: -.008em; font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(700px 420px at 12% -10%, rgba(99,102,241,.16), transparent 70%),
    radial-gradient(640px 400px at 92% 4%, rgba(56,189,248,.08), transparent 70%),
    radial-gradient(900px 600px at 50% 120%, rgba(139,92,246,.07), transparent 70%);
}
html[data-theme="light"] body::before { background: radial-gradient(800px 420px at 15% -10%, rgba(99,102,241,.12), transparent 70%), radial-gradient(700px 400px at 95% 0%, rgba(56,189,248,.1), transparent 70%); }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; font-family: var(--display); font-weight: 650; letter-spacing: -.028em; line-height: 1.18; color: var(--text); }
p { margin: 0 0 1em; }
a { color: var(--text); text-decoration: none; transition: color .15s, opacity .15s; }
a:hover, a:focus { color: var(--text); text-decoration: none; }
p a, li a, td a { color: var(--hi); }
img { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); }
code, pre { font-family: var(--mono); }
code { padding: 2px 6px; border-radius: 6px; background: var(--panel-3); color: var(--text); font-size: .88em; }
pre { padding: 16px; border: 0; border-radius: var(--r); background: var(--field); box-shadow: 0 0 0 1px var(--line-2); color: var(--text); font-size: 13px; }
::selection { background: rgba(139,156,255,.35); color: #fff; }
:focus-visible { outline: 2px solid var(--hi); outline-offset: 2px; }
[hidden], .hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
* { scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
.x-skip { position: fixed; left: 12px; top: -60px; z-index: 3000; padding: 10px 14px; border-radius: 10px; background: var(--text); color: var(--bg); font-weight: 600; }
.x-skip:focus { top: 12px; color: var(--bg); }
.text-muted, .help-block { color: var(--text-3); }

/* ── Buttons ──────────────────────────────────────────────────────── */
.x-btn, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 20px;
  border: 0; border-radius: 14px; font: 620 14.5px/1 var(--font); letter-spacing: -.01em; white-space: nowrap; cursor: pointer; text-shadow: none;
  transition: transform .18s var(--ease), background .15s, box-shadow .2s, color .15s, opacity .15s;
}
.x-btn:active, .btn:active { transform: scale(.98); }
.x-btn i, .btn i { font-size: .85em; }
/* Primary = crisp white (dark) / ink (light). Brand red is reserved. */
.x-btn--primary, .btn-primary, .btn-primary:focus, .btn-primary:active, .x-btn--light {
  background: var(--text); color: var(--bg);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 12px 28px -14px rgba(139,156,255,.55);
}
.x-btn--primary:hover, .btn-primary:hover, .x-btn--light:hover { background: var(--text); color: var(--bg); opacity: .92; transform: translateY(-1px); }
.x-btn--ghost, .btn-default, .btn-default:focus { background: var(--panel-2); color: var(--text); box-shadow: 0 0 0 1px var(--line-2); }
.x-btn--ghost:hover, .btn-default:hover { background: var(--panel-3); color: var(--text); }
.x-btn--brand { background: var(--brand); color: #fff; box-shadow: 0 12px 28px -12px rgba(255,58,95,.7); }
.x-btn--brand:hover { color: #fff; filter: brightness(1.06); }
.x-btn--sm { min-height: 38px; padding: 0 15px; font-size: 13.5px; border-radius: 12px; }
.x-btn--lg { min-height: 56px; padding: 0 26px; font-size: 16px; border-radius: 16px; }
.x-btn--block, .btn-block { display: flex; width: 100%; }
.btn-danger { background: var(--bad-soft); color: var(--bad); box-shadow: 0 0 0 1px rgba(251,113,133,.3); }
.btn-success { background: var(--ok); color: #04130b; }
.btn-sm, .btn-xs { min-height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.btn[disabled], .btn.disabled, .x-btn[disabled] { opacity: .45; pointer-events: none; }
.x-icon-btn {
  display: inline-grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--panel); color: var(--text-2); box-shadow: var(--lift); transition: color .15s, background .15s;
}
.x-icon-btn:hover { color: var(--text); background: var(--panel-2); }
.x-pill {
  display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 16px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--panel); color: var(--text); box-shadow: var(--lift); font: 650 14px var(--display); font-variant-numeric: tabular-nums;
}
.x-pill > i:first-child { color: var(--hi); font-size: 13px; }
.x-pill-caret { font-size: 9px; color: var(--text-3); }

/* ── Forms ────────────────────────────────────────────────────────── */
.form-group, .x-field { margin-bottom: 20px; }
.control-label, label { display: inline-block; margin-bottom: 9px; color: var(--text-2); font-size: 13px; font-weight: 600; }
.form-control, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="search"], select, textarea {
  display: block; width: 100%; height: auto; min-height: 52px; padding: 14px 16px; border: 0; border-radius: var(--r);
  background-color: var(--field); color: var(--text); font: 450 15px/1.4 var(--font); box-shadow: 0 0 0 1px var(--line-2); -webkit-appearance: none; appearance: none;
  transition: box-shadow .15s, background-color .15s;
}
.form-control:hover:not(:focus):not([readonly]) { box-shadow: 0 0 0 1px var(--line-3); }
.form-control:focus, input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 1px var(--hi), var(--ring); }
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--text-3); opacity: 1; }
textarea.form-control, textarea { min-height: 120px; resize: vertical; }
.form-control[readonly] { background-color: var(--panel-2); color: var(--text-2); }
select.form-control, select:not([multiple]) {
  padding-right: 42px; cursor: pointer; background-repeat: no-repeat; background-position: right 16px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238a90a8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
}
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; box-shadow: none; accent-color: var(--hi); -webkit-appearance: auto; appearance: auto; vertical-align: -3px; }
.x-check, .checkbox label { display: flex; align-items: flex-start; gap: 10px; color: var(--text-2); font-size: 14px; font-weight: 450; cursor: pointer; }
.x-check input { margin-top: 2px; }
.help-block { margin-top: 8px; font-size: 12.5px; }
.has-error .form-control { box-shadow: 0 0 0 1px rgba(251,113,133,.6); }
.has-error .help-block { color: var(--bad); }

/* Native select2 pickers */
.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--single {
  display: flex; align-items: center; height: auto; min-height: 54px; border: 0; border-radius: var(--r); background: var(--field); box-shadow: 0 0 0 1px var(--line-2);
  transition: box-shadow .15s;
}
.select2-container--default .select2-selection--single:hover { box-shadow: 0 0 0 1px var(--line-3); }
.select2-container--open .select2-selection--single, .select2-container--focus .select2-selection--single { box-shadow: 0 0 0 1px var(--hi), var(--ring); }
.select2-container--default .select2-selection--single .select2-selection__rendered {
  display: flex; align-items: center; gap: 10px; padding: 13px 46px 13px 16px; color: var(--text); font-size: 15px; line-height: 1.45; white-space: normal;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; right: 16px; height: 20px; transform: translateY(-50%); }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--text-3) transparent transparent; }
.select2-dropdown { overflow: hidden; border: 0; border-radius: var(--r); background: var(--panel-2); box-shadow: var(--pop); color: var(--text); }
.select2-container--open .select2-dropdown--below { margin-top: 8px; }
.select2-container--open .select2-dropdown--above { margin-top: -8px; }
.select2-search--dropdown { padding: 10px; border-bottom: 1px solid var(--line); }
.select2-container--default .select2-search--dropdown .select2-search__field { min-height: 42px; padding: 8px 12px; border: 0; border-radius: 12px; background: var(--field); color: var(--text); box-shadow: 0 0 0 1px var(--line-2); }
.select2-results__options { padding: 6px; max-height: min(420px, 55vh) !important; }
.select2-container--default .select2-results__option { padding: 11px 12px; border-radius: 12px; color: var(--text-2); font-size: 14px; line-height: 1.45; }
.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted { background: var(--panel-3); color: var(--text); }
.select2-container--default .select2-results__option[aria-selected="true"] { background: var(--hi-soft); color: var(--text); }
.select2-results__option img, .select2-selection__rendered img { width: 18px; height: 18px; display: inline-block; }

/* ── Surfaces, alerts, tables, badges ────────────────────────────── */
.x-card, .well { position: relative; margin: 0 0 18px; padding: 26px; border: 0; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--lift); color: var(--text); }
.x-eyebrow { display: block; margin-bottom: 12px; color: var(--text-3); font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.alert, .x-alert { position: relative; display: flex; gap: 12px; align-items: flex-start; margin: 0 0 18px; padding: 15px 46px 15px 16px; border: 0; border-radius: var(--r); background: var(--panel-2); box-shadow: 0 0 0 1px var(--line-2); color: var(--text); font-size: 14px; }
.alert-success { background: var(--ok-soft); box-shadow: 0 0 0 1px rgba(74,222,128,.25); }
.alert-danger, .x-alert--bad { background: var(--bad-soft); box-shadow: 0 0 0 1px rgba(251,113,133,.28); }
.x-alert--bad > i { color: var(--bad); margin-top: 2px; }
.alert-warning { background: var(--warn-soft); box-shadow: 0 0 0 1px rgba(251,191,36,.28); }
.alert-info { background: var(--info-soft); box-shadow: 0 0 0 1px rgba(96,165,250,.28); }
.close { position: absolute; top: 11px; right: 12px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--text-2); font-size: 20px; line-height: 1; opacity: .8; text-shadow: none; cursor: pointer; }
.close:hover { color: var(--text); background: var(--panel-3); opacity: 1; }
.table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; color: var(--text); background: none; }
.table > thead > tr > th { padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line-2); color: var(--text-3); font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.table > tbody > tr > td { padding: 15px 16px; border: 0; border-top: 1px solid var(--line); vertical-align: middle; font-size: 14px; }
.table > tbody > tr:first-child > td { border-top: 0; }
.table > tbody > tr:hover > td { background: rgba(139,156,255,.03); }
.badge, .label { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--panel-3); color: var(--text-2); font-size: 11.5px; font-weight: 650; }

/* Dropdowns / tooltips / pagination / modal */
.dropdown-menu { min-width: 210px; margin-top: 10px; padding: 6px; border: 0; border-radius: var(--r); background: var(--panel-2); box-shadow: var(--pop); font-size: 14px; max-height: 60vh; overflow-y: auto; }
.dropdown-menu > li > a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--text-2); font-weight: 500; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--panel-3); color: var(--text); }
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover { background: var(--hi-soft); color: var(--text); }
.dropdown-menu em { font-style: normal; color: var(--text-3); }
.tooltip.in { opacity: 1; }
.tooltip-inner { max-width: 280px; padding: 8px 11px; border-radius: 10px; background: var(--text); color: var(--bg); font: 500 12.5px var(--font); text-align: left; }
.tooltip.top .tooltip-arrow { border-top-color: var(--text); }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 24px 0 0; padding: 0; }
.pagination > li > a, .pagination > li > span { float: none; display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; margin: 0; border: 0; border-radius: 12px; background: var(--panel); box-shadow: var(--lift); color: var(--text-2); font-weight: 600; }
.pagination > .active > a, .pagination > .active > span { background: var(--text); color: var(--bg); }
.modal-backdrop.in { opacity: .72; background: #05060a; }
.modal-content { border: 0; border-radius: var(--r-xl); background: var(--panel); color: var(--text); box-shadow: var(--pop); }
.modal-header { padding: 22px 56px 16px 26px; border-bottom: 1px solid var(--line); position: relative; }
.modal-header .close { top: 18px; right: 18px; }
.modal-title { font: 650 18px var(--display); }
.modal-body { padding: 22px 26px; }
.modal-footer { padding: 16px 26px; border-top: 1px solid var(--line); }

@keyframes x-fade { from { opacity: 0; } }
@keyframes x-pop { from { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes x-live { 50% { box-shadow: 0 0 0 6px transparent; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }

/* v3 "Mono": pure black / white, Apple- and X-inspired. Overrides the base tokens. */
:root {
  --bg: #000; --bg-2: #050505; --panel: #0c0c0d; --panel-2: #141415; --panel-3: #1c1c1e; --field: #0f0f10;
  --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16); --line-3: rgba(255,255,255,.28);
  --text: #fff; --text-2: #a1a1a6; --text-3: #6e6e73;
  --hi: #fff; --hi-soft: rgba(255,255,255,.1);
  --ok: #30d158; --ok-soft: rgba(48,209,88,.14); --warn: #ffd60a; --warn-soft: rgba(255,214,10,.14);
  --bad: #ff453a; --bad-soft: rgba(255,69,58,.14); --info: #64a8ff; --info-soft: rgba(10,132,255,.16);
  --mono-ink: #fff;
  --surface: var(--panel);
  --lift: inset 0 0 0 1px var(--line);
  --lift-hi: inset 0 0 0 1px var(--line-2);
  --pop: 0 0 0 1px var(--line-2), 0 30px 70px -20px rgba(0,0,0,.9);
  --ring: 0 0 0 5px rgba(255,255,255,.07);
  --ease: cubic-bezier(.2,.8,.2,1);
  --side: 264px;
  --top: 64px;
}
html[data-theme="light"] {
  --bg: #fff; --bg-2: #fafafa; --panel: #f5f5f7; --panel-2: #efeff2; --panel-3: #e5e5ea; --field: #fff;
  --line: rgba(0,0,0,.08); --line-2: rgba(0,0,0,.14); --line-3: rgba(0,0,0,.26);
  --text: #1d1d1f; --text-2: #515154; --text-3: #86868b; --hi: #000; --hi-soft: rgba(0,0,0,.06);
  --mono-ink: #1d1d1f; --surface: var(--panel); --lift: inset 0 0 0 1px var(--line); --ring: 0 0 0 5px rgba(0,0,0,.06);
}
body::before { display: none; }
body { letter-spacing: -.011em; }
.x-btn--primary, .btn-primary, .btn-primary:focus, .btn-primary:active, .x-btn--light { background: var(--text); color: var(--bg); box-shadow: none; border-radius: 999px; }
.x-btn--ghost, .btn-default { border-radius: 999px; }
.form-control:focus, input:focus, select:focus, textarea:focus { box-shadow: inset 0 0 0 1px var(--line-3), var(--ring); }

/* ── Logo ─────────────────────────────────────────────────────────── */
.x-brand { display: inline-flex; align-items: center; color: var(--text); }
.gg-logo { display: inline-flex; align-items: flex-end; gap: 3px; line-height: 1; color: var(--text); }
.gg-logo-svg { display: block; height: 26px; width: auto; aspect-ratio: 1672 / 521; overflow: visible; }
.gg-logo-mm { fill: currentColor; }
.gg-logo-s { filter: drop-shadow(0 0 12px rgba(255,51,88,.35)); }
.gg-logo-tld { font: 800 13px/1 var(--display); color: var(--accent); padding-bottom: 1px; }

/* ── Signed-in shell ──────────────────────────────────────────────── */
.x-app { min-height: 100vh; }
.x-side {
  position: fixed; inset: 0 auto 0 0; z-index: 90; width: var(--side); display: flex; flex-direction: column; gap: 6px;
  padding: 0 12px 12px; background: var(--bg-2); border-right: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain;
}
.x-side-top { display: flex; align-items: center; height: 72px; padding: 0 10px; flex: 0 0 auto; }
.x-side-top .gg-logo-svg { height: 27px; }
.x-side-wallet {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; padding: 14px 12px 14px 16px; border-radius: 18px;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255,51,88,.18), transparent 60%), var(--card); box-shadow: var(--card-edge); transition: box-shadow .2s;
}
.x-side-wallet:hover { box-shadow: inset 0 0 0 1px var(--line-3); }
.x-side-wallet-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.x-side-wallet small { color: var(--text-3); font-size: 12px; font-weight: 600; }
.x-side-wallet strong { font: 700 20px/1.15 var(--display); letter-spacing: -.025em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-side-wallet-add { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; background: linear-gradient(180deg, #ff4a6b, #f0234a); color: #fff; font-size: 12px; box-shadow: 0 8px 16px -8px rgba(255,51,88,.9); }
.x-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.x-nav-item {
  display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: 12px; color: var(--text-2);
  font-size: 14.5px; font-weight: 520; transition: background .15s, color .15s;
}
.x-nav-item:hover { background: var(--panel-2); color: var(--text); }
.x-nav-item.is-active { background: var(--panel-3); color: var(--text); font-weight: 620; box-shadow: inset 0 0 0 1px var(--line); }
.x-nav-icon { display: grid; place-items: center; width: 20px; flex: 0 0 20px; color: var(--text-3); font-size: 14px; }
.x-nav-item:hover .x-nav-icon { color: var(--text-2); }
.x-nav-item.is-active .x-nav-icon { color: var(--accent); }
.x-nav-item--sm { min-height: 36px; font-size: 13.5px; color: var(--text-3); }
.x-side-foot { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid var(--line); }
.x-user { display: flex; align-items: center; gap: 10px; padding: 10px 12px 4px; }
.x-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; background: linear-gradient(180deg, #ff4a6b, #d81b45); color: #fff; font: 700 12.5px var(--display); }
.x-user-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x-side-scrim { display: none; }

.x-main-wrap { margin-left: var(--side); min-width: 0; }
.x-top {
  position: sticky; top: 0; z-index: 70; display: flex; align-items: center; gap: 12px; height: var(--top); padding: 0 28px;
  background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid var(--line);
}
.x-top-menu, .x-top-brand { display: none; }
.x-top-title { font: 650 15px var(--display); color: var(--text-2); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-top-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.x-main { width: 100%; max-width: 1360px; margin: 0 auto; padding: 28px 32px 64px; }
.x-motion .x-main > * { animation: x-fade .4s var(--ease) both; }
.x-tabbar { display: none; }

@media (max-width: 1024px) {
  /* The shadow only belongs to the open drawer; on the closed one it bled onto the page as a grey edge in light mode. */
  .x-side { transform: translateX(-102%); transition: transform .32s var(--ease), box-shadow .32s var(--ease); z-index: 120; }
  .x-drawer-open .x-side { transform: none; box-shadow: 30px 0 60px rgba(0,0,0,.4); }
  .x-side-scrim { display: block; position: fixed; inset: 0; z-index: 110; border: 0; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .25s; }
  .x-drawer-open .x-side-scrim { opacity: 1; pointer-events: auto; }
  .x-main-wrap { margin-left: 0; }
  .x-top { padding: 0 14px; height: 60px; gap: 8px; }
  .x-top-menu { display: inline-grid; }
  .x-top-brand { display: inline-flex; }
  .x-top-brand .gg-logo-svg { height: 22px; }
  .x-top-title { display: none; }
  .x-main { padding: 18px 16px calc(100px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 768px) {
  .x-top-menu { display: none; }
  .x-top-cta { display: none; }
  .x-top-actions .x-pill { height: 38px; padding: 0 12px; font-size: 13.5px; }
  .x-top-actions .x-icon-btn { width: 38px; height: 38px; flex-basis: 38px; }
  .x-tabbar {
    display: flex; position: fixed; z-index: 100; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 6px; border-radius: 22px;
    background: color-mix(in srgb, var(--panel) 86%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 40px -14px rgba(0,0,0,.75);
  }
  .x-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px 7px; border: 0; border-radius: 16px; background: none;
    color: var(--text-3); font: 600 10.5px var(--font); cursor: pointer;
  }
  .x-tab i { font-size: 17px; }
  .x-tab.is-active { background: var(--panel-3); color: var(--text); }
  .x-tab.is-active i { color: var(--accent); }
}

/* ── Guest header ─────────────────────────────────────────────────── */
.x-gnav { position: sticky; top: 12px; z-index: 1000; padding: 0 16px; margin-top: 12px; }
.x-gnav-inner {
  display: flex; align-items: center; gap: 16px; max-width: 1200px; min-height: 62px; margin: 0 auto; padding: 0 10px 0 20px; border-radius: 20px;
  background: color-mix(in srgb, var(--panel) 74%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 16px 40px -20px rgba(0,0,0,.7);
}
.x-gnav .gg-logo-svg { height: 25px; }
.x-gnav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.x-gnav-link { display: inline-flex; align-items: center; height: 40px; padding: 0 13px; border-radius: 11px; color: var(--text-2); font-size: 14.5px; font-weight: 550; }
.x-gnav-link:hover, .x-gnav-link.is-active { color: var(--text); background: var(--panel-3); }
.x-gnav-actions { display: flex; align-items: center; gap: 8px; }
.x-gnav-toggle { display: none; }
.x-gmain { min-height: 60vh; }
@media (max-width: 1080px) {
  .x-gnav { top: 8px; margin-top: 8px; padding: 0 10px; }
  .x-gnav-inner { flex-wrap: wrap; padding: 0 8px 0 16px; gap: 8px; }
  .x-gnav-actions { margin-left: auto; }
  .x-gnav-toggle { display: inline-grid; }
  .x-gnav-login { display: none; }
  .x-gnav-links { display: none; order: 3; width: 100%; flex-direction: column; align-items: stretch; margin: 0; padding: 4px 0 12px; }
  .x-gmenu-open .x-gnav-links { display: flex; }
  .x-gnav-link { height: 48px; font-size: 16px; color: var(--text); }
}
@media (max-width: 420px) { .x-gnav .x-lang { display: none; } }

/* ── Footer ───────────────────────────────────────────────────────── */
.x-foot { margin-top: 80px; padding: 0 16px 28px; }
.x-foot-inner { max-width: 1200px; margin: 0 auto; }
.x-foot-top { display: grid; grid-template-columns: 1.2fr 2fr; gap: 48px; padding: 40px 0; border-top: 1px solid var(--line); }
.x-foot-brand .gg-logo-svg { height: 28px; }
.x-foot-brand p { margin: 16px 0 18px; max-width: 320px; color: var(--text-3); font-size: 14px; line-height: 1.6; }
.x-status { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); font-size: 13px; font-weight: 550; }
.x-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); animation: x-live 2.4s infinite; }
.x-foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.x-foot-cols h4 { margin: 4px 0 14px; font: 650 13px var(--font); letter-spacing: 0; }
.x-foot-cols a { display: block; padding: 5px 0; color: var(--text-3); font-size: 14px; }
.x-foot-cols a:hover { color: var(--text); }
.x-foot-platforms { display: flex; flex-wrap: wrap; gap: 8px; padding: 22px 0; border-top: 1px solid var(--line); font-size: 17px; }
.x-pi { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.x-foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 13px; }
@media (max-width: 900px) {
  .x-foot-top { grid-template-columns: 1fr; gap: 32px; }
  .x-foot-cols { grid-template-columns: 1fr 1fr; }
}

/* ── v3 shell: X-style rail, glass top bar, iOS tab bar ───────────── */
.x-side { background: var(--bg); border-right: 1px solid var(--line); padding: 14px 14px 14px; gap: 2px; }
.x-side-top { height: 64px; padding: 0 12px; }
.x-side-wallet { margin: 0 0 14px; padding: 14px 10px 14px 16px; border-radius: 20px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.x-side-wallet strong { font-size: 21px; }
.x-side-wallet-add { background: var(--text); color: var(--bg); box-shadow: none; border-radius: 50%; }
.x-nav-item { min-height: 50px; padding: 0 14px; border-radius: 999px; font-size: 17px; font-weight: 500; color: var(--text); gap: 16px; }
.x-nav-item:hover { background: var(--panel-2); }
.x-nav-item.is-active { background: transparent; box-shadow: none; font-weight: 700; }
.x-nav-icon { width: 24px; flex-basis: 24px; font-size: 19px; color: var(--text); }
.x-nav-item.is-active .x-nav-icon { color: var(--text); }
.x-nav-item--sm { min-height: 40px; font-size: 14px; color: var(--text-3); }
.x-side-foot { border-top: 0; }
.x-user { padding: 10px 12px; border-radius: 999px; }
.x-avatar { border-radius: 50%; background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); }
.x-top { background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); }
.x-top-title { font: 700 20px var(--display); color: var(--text); letter-spacing: -.03em; }
.x-pill, .x-icon-btn { border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.x-pill > i:first-child { color: var(--text-3); }
.x-top-cta { border-radius: 999px; }
@media (max-width: 768px) {
  .x-tabbar { left: 0; right: 0; bottom: 0; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); border-radius: 0; background: color-mix(in srgb, var(--bg) 85%, transparent); box-shadow: inset 0 1px 0 var(--line); }
  .x-tab { border-radius: 12px; color: var(--text-3); font-weight: 500; }
  .x-tab i { font-size: 21px; }
  .x-tab.is-active { background: transparent; color: var(--text); }
  .x-tab.is-active i { color: var(--text); }
  .x-main { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
}

/* Strict monochrome: no brand red anywhere in the UI. */
:root { --brand: #fff; --brand-soft: rgba(255,255,255,.08); }
html[data-theme="light"] { --brand: #000; --brand-soft: rgba(0,0,0,.06); }
.gg-logo-s { filter: none; }
.gg-logo-tld { display: none; }
.x-side-wallet { background: var(--panel); }
.x-side-wallet-add { background: var(--text); color: var(--bg); box-shadow: none; }
.x-avatar { background: var(--panel-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.x-btn--brand { background: var(--text); color: var(--bg); box-shadow: none; }
::selection { background: rgba(255,255,255,.28); color: #fff; }
html[data-theme="light"] ::selection { background: rgba(0,0,0,.14); color: #000; }

/* ── Guest header + footer, Apple-style (overrides 20-shell) ─────── */
.x-gnav { position: sticky; top: 0; margin: 0; padding: 0 22px; background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); border-bottom: 1px solid var(--line); }
.x-gnav-inner { max-width: 1024px; min-height: 48px; padding: 0; gap: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.x-gnav .gg-logo-svg { height: 17px; }
.x-gnav-links { flex: 1; justify-content: center; gap: 34px; margin: 0 24px; }
.x-gnav-link { height: 48px; padding: 0; border-radius: 0; background: none !important; color: var(--text-2); font-size: 12.5px; font-weight: 400; letter-spacing: -.01em; transition: color .2s; }
.x-gnav-link:hover, .x-gnav-link.is-active { color: var(--text); }
.x-gnav-actions { gap: 6px; }
.x-gnav .x-icon-btn { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: none; box-shadow: none; color: var(--text-2); font-size: 13.5px; }
.x-gnav .x-icon-btn:hover { color: var(--text); background: none; }
.x-gnav .x-gnav-login { height: 28px; min-height: 28px; padding: 0 10px; background: none; box-shadow: none; color: var(--text-2); font-size: 12.5px; font-weight: 400; }
.x-gnav .x-gnav-login:hover { color: var(--text); }
.x-gnav .x-btn--light { height: 28px; min-height: 28px; padding: 0 14px; margin-left: 4px; border-radius: 999px; font-size: 12.5px; font-weight: 500; }
@media (max-width: 1080px) {
  .x-gnav { top: 0; margin: 0; padding: 0 16px; }
  .x-gnav-inner { padding: 0; gap: 0; }
  .x-gnav-links { margin: 0; padding: 18px 0 30px; gap: 0; }
  .x-gnav-link { height: 52px; font: 600 26px var(--display); letter-spacing: -.03em; color: var(--text); border-bottom: 0; }
  .x-gmenu-open .x-gnav { background: var(--bg); min-height: 100dvh; }
}

.x-foot { margin-top: 0; padding: 0 22px; background: var(--bg-2); border-top: 1px solid var(--line); color: var(--text-3); font-size: 12px; line-height: 1.4; }
.x-foot-inner { max-width: 980px; margin: 0 auto; padding: 18px 0 22px; }
.x-foot-note { margin: 0; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.x-foot-note a, .x-foot-bottom a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.x-foot-cols { display: grid; grid-template-columns: repeat(4, 1fr) 1.2fr; gap: 24px; padding: 22px 0 26px; }
.x-foot-cols h4 { margin: 0 0 10px; color: var(--text); font: 600 12px var(--font); letter-spacing: -.01em; }
.x-foot-cols a { display: block; padding: 4px 0; color: var(--text-3); font-size: 12px; }
.x-foot-cols a:hover { color: var(--text); text-decoration: underline; }
.x-foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.x-foot-brand .gg-logo-svg { height: 18px; color: var(--text); }
.x-foot-brand p { margin: 0; color: var(--text-3); font-size: 12px; line-height: 1.5; }
.x-status { height: 26px; padding: 0 10px; gap: 7px; font-size: 11.5px; font-weight: 500; background: none; box-shadow: inset 0 0 0 1px var(--line-2); }
.x-status i { width: 6px; height: 6px; box-shadow: none; }
.x-foot-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 12px; }
.x-foot-bottom nav { display: flex; flex-wrap: wrap; }
.x-foot-bottom nav a { padding: 0 10px; border-left: 1px solid var(--line-2); color: var(--text-2); text-decoration: none; }
.x-foot-bottom nav a:first-child { padding-left: 0; border-left: 0; }
.x-foot-bottom nav a:hover { color: var(--text); text-decoration: underline; }
@media (max-width: 900px) {
  .x-foot { padding: 0 16px; }
  .x-foot-cols { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .x-foot-brand { grid-column: 1 / -1; order: -1; padding-bottom: 6px; }
  .x-foot-bottom { flex-direction: column; align-items: flex-start; }
}

/* Signed-in top bar: page title appears only after the page's own heading scrolls away */
.x-top-title { font: 650 15px var(--display); letter-spacing: -.02em; opacity: 0; transform: translateY(6px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.x-scrolled .x-top-title { opacity: 1; transform: none; }
.x-bal-pill { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; color: var(--text); font: 600 14px var(--font); font-variant-numeric: tabular-nums; }
.x-bal-pill:hover { color: var(--text); background: var(--panel-2); }

/* ── Signed-in sidebar, Apple-style (Music / Mail / System Settings) ── */
.x-side { padding: 0 12px 14px; }
.x-side-top { padding: 22px 10px 18px; }
.x-side .gg-logo-svg { height: 22px; }
.x-side-wallet { display: flex; align-items: center; gap: 10px; margin: 0 2px 18px; padding: 12px 10px 12px 14px; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.x-side-wallet small { color: var(--text-3); font-size: 11.5px; font-weight: 550; }
.x-side-wallet strong { font: 650 18px/1.15 var(--display); letter-spacing: -.02em; }
.x-side-wallet-add { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--text); color: var(--bg); font-size: 11px; }
.x-side-wallet:hover { background: var(--panel-2); }
.x-nav { gap: 1px; }
.x-nav-item { min-height: 38px; gap: 12px; padding: 0 10px; border-radius: 10px; color: var(--text-2); font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; transition: background .15s, color .15s; }
.x-nav-item:hover { background: var(--panel-2); color: var(--text); }
.x-nav-item.is-active { background: var(--panel-3); color: var(--text); font-weight: 650; box-shadow: none; }
.x-nav-icon { width: 20px; flex: 0 0 20px; font-size: 15px; color: var(--text-3); --mono-ink: var(--text-3); transition: color .15s; }
.x-nav-item:hover .x-nav-icon { color: var(--text-2); }
.x-nav-item.is-active .x-nav-icon { color: var(--text); }
.x-nav-label { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.x-nav-label .badge, .x-nav-label .label, .x-nav-label span[class*="badge"] { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #0a84ff !important; color: #fff !important; font: 650 11.5px/20px var(--font); text-align: center; }
.x-side-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.x-nav-item--sm { min-height: 34px; font-size: 13.5px; color: var(--text-3); }
.x-nav-item--sm .x-nav-icon { font-size: 13px; }
.x-user { margin-top: 8px; padding: 8px 10px; border-radius: 12px; }
.x-avatar { width: 30px; height: 30px; flex: 0 0 30px; font-size: 11.5px; }
html[data-theme="light"] .x-side { background: #f5f5f7; }
html[data-theme="light"] .x-nav-item.is-active { background: rgba(0,0,0,.07); }
/* footer fixes: no colour seam under it, status pill keeps its padding + dot */
.x-foot { background: var(--bg); }
.is-guest, .is-guest body { background: var(--bg); }
.x-foot .x-foot-cols .x-status, .x-foot .x-status { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); font-size: 11.5px; text-decoration: none; }
.x-foot .x-status i { display: inline-block; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--ok); }
.x-foot .x-status:hover { color: var(--text); text-decoration: none; }

/* Guest pages: give content room under the header and on the sides (home stays full-bleed) */
.is-guest .x-gmain { padding: 40px 24px 90px; }
.is-guest .x-gmain:has(> .x-home) { padding: 0; }
.is-guest .x-gmain:has(> .x-auth-page), .is-guest .x-gmain:has(> .x-solo) { padding-top: 0; }
@media (max-width: 640px) { .is-guest .x-gmain { padding: 24px 16px 70px; } }

/* Mobile guest menu: header row on top, links underneath as a full-screen list */
@media (max-width: 1080px) {
  .x-gnav-inner { flex-wrap: wrap; align-content: flex-start; }
  .x-gnav-links { order: 3; flex: 0 0 100%; width: 100%; flex-direction: column; align-items: stretch; justify-content: flex-start; margin: 0; padding: 8px 0 30px; gap: 0; }
  .x-gmenu-open .x-gnav { position: fixed; inset: 0; z-index: 1200; overflow-y: auto; background: var(--bg); }
  .x-gmenu-open .x-gnav-link { height: 58px; padding: 0 4px; border-bottom: 1px solid var(--line); font: 600 26px var(--display); letter-spacing: -.02em; animation: x-menu-in .35s var(--ease) both; }
  .x-gmenu-open .x-gnav-link:nth-child(2) { animation-delay: .04s; } .x-gmenu-open .x-gnav-link:nth-child(3) { animation-delay: .08s; } .x-gmenu-open .x-gnav-link:nth-child(4) { animation-delay: .12s; } .x-gmenu-open .x-gnav-link:nth-child(5) { animation-delay: .16s; } .x-gmenu-open .x-gnav-link:nth-child(6) { animation-delay: .2s; }
  .x-gmenu-open .x-gnav-login { display: inline-flex; }
}
@keyframes x-menu-in { from { opacity: 0; transform: translateY(10px); } }
html:has(.x-gmenu-open), .x-gmenu-open { overflow: hidden; }
/* Mobile guest header: Log in sits beside Sign up. */
@media (max-width: 1080px) {
  .x-gnav .x-gnav-login { display: inline-flex; height: 32px; min-height: 32px; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font-size: 13px; font-weight: 600; }
  .x-gmenu-open .x-gnav-login { display: inline-flex; }
}
@media (max-width: 400px) { .x-gnav-actions [data-x-theme] { display: none; } .x-gnav-actions { gap: 6px; } }
/* The home is a dark product page in both themes. */
html[data-theme="light"]:has(.x-home) {
  --bg: #000; --bg-2: #050505; --panel: #0c0c0d; --panel-2: #141415; --panel-3: #1c1c1e; --field: #0f0f10;
  --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16); --line-3: rgba(255,255,255,.28);
  --text: #fff; --text-2: #a1a1a6; --text-3: #6e6e73; --hi: #fff; --hi-soft: rgba(255,255,255,.1); --mono-ink: #fff; --brand: #fff;
  color-scheme: dark;
}
html[data-theme="light"]:has(.x-home) body { background: #000; color: #fff; }
html:has(.x-home) [data-x-theme] { display: none; }
/* No white flash or floating header when you pull past the top/bottom on phones. */
html { background: var(--bg); overscroll-behavior-y: none; }
body { overscroll-behavior-y: none; }
/* Desktop guest header: brand | centred links | actions — the links never move between pages. */
@media (min-width: 1081px) {
  .x-gnav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .x-gnav-inner > .x-brand { justify-self: start; }
  .x-gnav-links { margin: 0 24px; }
  .x-gnav-actions { justify-self: end; }
}
html { scrollbar-gutter: stable; }
/* Header stays near-solid so it never turns grey over the white home sections. */
.x-gnav { background: color-mix(in srgb, var(--bg) 92%, transparent); }
/* Sidebar account card + menu (macOS-style) */
.x-side-foot { position: relative; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.x-acct { position: relative; }
.x-acct-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px 8px 8px; border: 0; border-radius: 14px; background: transparent; color: var(--text); text-align: left; cursor: pointer; transition: background .2s; }
.x-acct-btn:hover, .x-acct.is-open .x-acct-btn { background: var(--panel-2); }
.x-acct-btn .x-avatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; font-size: 11.5px; font-weight: 700; }
.x-acct-t { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.x-acct-t b { overflow: hidden; font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.x-acct-t small { overflow: hidden; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.x-acct-caret { color: var(--text-3); font-size: 10px; transition: transform .25s var(--ease); }
.x-acct:not(.is-open) .x-acct-caret { transform: rotate(180deg); }
.x-acct-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 30; padding: 6px; border-radius: 18px; background: color-mix(in srgb, var(--panel-2) 92%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 60px -18px rgba(0,0,0,.75); transform-origin: 50% 100%; animation: x-acct-in .18s var(--ease); }
.x-acct-menu[hidden] { display: none; }
@keyframes x-acct-in { from { opacity: 0; transform: translateY(6px) scale(.97); } }
.x-acct-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; padding: 10px 10px 12px; border-bottom: 1px solid var(--line); }
.x-avatar.is-lg { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; font-size: 13px; font-weight: 700; }
.x-acct-head div { display: flex; flex-direction: column; min-width: 0; }
.x-acct-head b { overflow: hidden; font-size: 14.5px; text-overflow: ellipsis; white-space: nowrap; }
.x-acct-head small { color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.x-acct-item { display: flex; align-items: center; gap: 11px; width: 100%; height: 38px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--text); font: 500 14px var(--font); text-align: left; text-decoration: none; cursor: pointer; }
.x-acct-item:hover, .x-acct-item:focus-visible { color: var(--text); background: var(--panel-3); text-decoration: none; outline: 0; }
.x-acct-item > i { width: 18px; color: var(--text-2); font-size: 14px; text-align: center; }
.x-acct-item span { flex: 1; }
.x-acct-item em { color: var(--text-3); font-size: 12.5px; font-style: normal; }
.x-acct-item.is-active { background: var(--panel-3); }
.x-acct-item.is-danger, .x-acct-item.is-danger > i { color: var(--bad); }
.x-acct-sep { display: block; height: 1px; margin: 4px 6px; background: var(--line); }
/* Account: avatar is the button that opens the picker */
.xa-av-wrap { position: relative; flex: none; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.xa-av-wrap .xa-avatar { margin: 0; transition: transform .25s var(--ease); }
.xa-av-wrap:hover .xa-avatar { transform: scale(1.04); }
.xa-av-edit { position: absolute; right: -2px; bottom: 2px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--text); color: var(--bg); font-size: 11px; box-shadow: 0 0 0 3px var(--bg); }
.x-avsheet { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; }
.x-avsheet[hidden] { display: none; }
.x-avsheet-scrim { position: absolute; inset: 0; border: 0; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .22s; cursor: default; }
.x-avsheet.is-open .x-avsheet-scrim { opacity: 1; }
.x-avsheet-card { position: relative; width: min(440px, calc(100% - 32px)); padding: 26px 24px 22px; border-radius: 28px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 100px -30px rgba(0,0,0,.9); text-align: center; opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .22s, transform .3s var(--ease); }
.x-avsheet.is-open .x-avsheet-card { opacity: 1; transform: none; }
.x-avsheet-card .xv-grab { display: none; }
.x-avsheet-card h3 { margin: 0 0 4px; font: 700 22px var(--display); letter-spacing: -.03em; }
.x-avsheet-card > p { margin: 0 0 18px; color: var(--text-2); font-size: 14px; }
.x-avgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.x-avgrid button { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border: 0; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); cursor: pointer; transition: box-shadow .2s, background .2s; }
.x-avgrid button:hover { background: var(--panel-3); }
.x-avgrid button.is-on { box-shadow: inset 0 0 0 2px var(--text); color: var(--text); }
.x-avgrid .x-avatar { width: 64px; height: 64px; flex: 0 0 64px; font-size: 26px; }
.x-avgrid small { font-size: 12.5px; font-weight: 600; }
.x-avnote { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 16px 0 14px; color: var(--text-3); font-size: 12.5px; }
.x-avdone { width: 100%; }
@media (max-width: 560px) {
  .x-avsheet { align-items: flex-end; }
  .x-avsheet-card { width: 100%; padding: 12px 18px calc(22px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; transform: translateY(40px); }
  .x-avsheet-card .xv-grab { display: block; width: 40px; height: 5px; margin: 0 auto 14px; border-radius: 3px; background: var(--line-2); }
  .x-avgrid .x-avatar { width: 56px; height: 56px; flex-basis: 56px; font-size: 22px; }
}
/* One wallet control in the top bar: balance (currency menu) + add funds */
.x-wallet { display: inline-flex; align-items: center; height: 40px; padding: 3px; border-radius: 999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); }
.x-wallet .x-pill, .x-wallet .x-currency .x-pill { height: 34px; padding: 0 12px 0 12px; border: 0; border-radius: 999px; background: transparent; box-shadow: none; font-variant-numeric: tabular-nums; }
.x-wallet .x-pill:hover { background: var(--panel-2); }
.x-wallet .x-currency { display: inline-flex; }
.x-wallet-add { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 12px; border-radius: 999px; background: var(--text); color: var(--bg); font: 650 13.5px var(--font); text-decoration: none; transition: transform .15s, opacity .2s; }
.x-wallet-add:hover { color: var(--bg); text-decoration: none; opacity: .9; }
.x-wallet-add:active { transform: scale(.96); }
.x-wallet-add i { font-size: 11px; }
@media (max-width: 760px) { .x-wallet-add span { display: none; } .x-wallet-add { width: 34px; padding: 0; justify-content: center; } .x-wallet { height: 38px; } .x-wallet .x-pill { height: 32px; padding: 0 10px; } .x-wallet-add { height: 32px; width: 32px; } }
/* Sidebar: primary action, grouped sections, macOS-style icon tiles */
.x-nav { display: flex; flex-direction: column; gap: 2px; }
.x-nav-new { display: flex; align-items: center; justify-content: center; gap: 9px; height: 44px; margin: 4px 0 14px; border-radius: 14px; background: var(--text); color: var(--bg); font: 650 14.5px var(--font); letter-spacing: -.01em; text-decoration: none; box-shadow: 0 10px 30px -14px rgba(255,255,255,.35); transition: transform .15s, opacity .2s; }
.x-nav-new:hover { color: var(--bg); text-decoration: none; opacity: .92; }
.x-nav-new:active { transform: scale(.98); }
.x-nav-new i { font-size: 12px; }
.x-nav-new.is-active { box-shadow: 0 0 0 3px rgba(255,255,255,.14), 0 10px 30px -14px rgba(255,255,255,.35); }
.x-nav-sec { display: flex; flex-direction: column; gap: 1px; margin-bottom: 12px; }
.x-nav-sec:not(:has(.x-nav-item)) { display: none; }
.x-nav-h { margin: 0 0 4px 10px; color: var(--text-3); font-size: 11.5px; font-weight: 650; letter-spacing: .02em; }
.x-nav .x-nav-item { min-height: 36px; gap: 11px; padding: 0 8px; border-radius: 10px; color: var(--text-2); font-size: 14px; }
.x-nav .x-nav-icon { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; background: var(--panel-3); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.08); color: var(--text-2); font-size: 12px; transition: background .2s, color .2s; }
.x-nav .x-nav-item:hover { background: var(--panel-2); color: var(--text); }
.x-nav .x-nav-item:hover .x-nav-icon { color: var(--text); }
.x-nav .x-nav-item.is-active { background: var(--panel-3); color: var(--text); font-weight: 650; }
.x-nav .x-nav-item.is-active .x-nav-icon { background: var(--text); color: var(--bg); box-shadow: none; }
.x-nav .x-nav-item .badge, .x-nav .x-nav-item [class*="badge"] { margin-left: auto; }
html[data-theme="light"] .x-nav-new { box-shadow: 0 10px 24px -14px rgba(0,0,0,.4); }
.x-nav-count { margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font: 650 11px/20px var(--font); text-align: center; font-variant-numeric: tabular-nums; }
.x-nav-item.is-active .x-nav-count { background: var(--bg); }
.x-nav-sec .x-nav-item[href*="dashboard"] { order: -1; }
.x-nav-sec .x-nav-item[href*="massorder"] { order: 1; }
.x-nav-sec .x-nav-item[href*="refunds"], .x-nav-sec .x-nav-item[href*="refill"], .x-nav-sec .x-nav-item[href*="drip"], .x-nav-sec .x-nav-item[href*="subscriptions"] { order: 2; }
.x-nav-sec .x-nav-h { order: -2; }
/* Sidebar v2: System Settings feel — glossy graphite icon tiles, crisp labels, quiet counts */
.x-nav-sec { gap: 0; margin-bottom: 14px; }
.x-nav-h { margin: 0 0 5px 10px; color: color-mix(in srgb, var(--text) 42%, transparent); font-size: 11px; font-weight: 600; letter-spacing: .01em; }
.x-nav .x-nav-item { min-height: 34px; gap: 10px; padding: 0 8px 0 6px; border-radius: 9px; color: var(--text); font-size: 13.5px; font-weight: 500; letter-spacing: -.005em; }
.x-nav .x-nav-icon { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 7px; font-size: 11px; color: #fff;
  background: linear-gradient(180deg, #48484d 0%, #2a2a2e 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 .5px rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.5); }
.x-nav .x-nav-icon i { filter: drop-shadow(0 1px 0 rgba(0,0,0,.35)); }
.x-nav .x-nav-item:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.x-nav .x-nav-item:hover .x-nav-icon { color: #fff; }
.x-nav .x-nav-item.is-active { background: color-mix(in srgb, var(--text) 11%, transparent); font-weight: 600; }
.x-nav .x-nav-item.is-active .x-nav-icon { background: linear-gradient(180deg, #ffffff 0%, #dcdce1 100%); color: #000; box-shadow: inset 0 -1px 0 rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.45); }
.x-nav .x-nav-item.is-active .x-nav-icon i { filter: none; }
.x-nav-count { min-width: 0; height: auto; padding: 0; border-radius: 0; background: none !important; box-shadow: none; color: color-mix(in srgb, var(--text) 45%, transparent); font: 500 12.5px var(--font); line-height: 1; }
.x-nav .x-nav-item .badge, .x-nav .x-nav-item [class*="badge"] { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #0a84ff; color: #fff; font: 650 11px/18px var(--font); }
.x-nav-new { height: 40px; margin: 2px 0 16px; border-radius: 11px; font-size: 14px; background: linear-gradient(180deg, #ffffff, #e8e8ed); box-shadow: inset 0 -1px 0 rgba(0,0,0,.08), 0 8px 24px -12px rgba(255,255,255,.3); }
html[data-theme="light"] .x-nav .x-nav-icon { background: linear-gradient(180deg, #8e8e93 0%, #636366 100%); }
html[data-theme="light"] .x-nav .x-nav-item.is-active .x-nav-icon { background: linear-gradient(180deg, #2c2c2e, #000); color: #fff; }
html[data-theme="light"] .x-nav-new { background: linear-gradient(180deg, #2c2c2e, #000); color: #fff; }
/* Sidebar v3: System Settings colour tiles (white glyphs), soft active row */
.x-nav .x-nav-icon { --t1: #5a5a5f; --t2: #3a3a3e; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 7px; color: #fff !important; font-size: 12px;
  background: linear-gradient(180deg, var(--t1) 0%, var(--t2) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.35) !important; }
.x-nav .x-nav-icon i { filter: drop-shadow(0 .5px 0 rgba(0,0,0,.25)); }
.x-nav .x-nav-item[href*="dashboard"] .x-nav-icon { --t1: #7d7bff; --t2: #4f4ccf; }
.x-nav .x-nav-item[href*="services"] .x-nav-icon { --t1: #3aa0ff; --t2: #0a6fe0; }
.x-nav .x-nav-item[href$="/orders"] .x-nav-icon, .x-nav .x-nav-item[href*="/orders?"] .x-nav-icon { --t1: #ffb340; --t2: #f08a00; }
.x-nav .x-nav-item[href*="massorder"] .x-nav-icon { --t1: #cf7dff; --t2: #9d3fd9; }
.x-nav .x-nav-item[href*="refunds"] .x-nav-icon { --t1: #4cd964; --t2: #23a83d; }
.x-nav .x-nav-item[href*="refill"] .x-nav-icon { --t1: #5ac8fa; --t2: #1a8fd0; }
.x-nav .x-nav-item[href*="drip"] .x-nav-icon { --t1: #64d2ff; --t2: #2a9cd6; }
.x-nav .x-nav-item[href*="subscriptions"] .x-nav-icon { --t1: #ff6b6b; --t2: #d93a3a; }
.x-nav .x-nav-item[href*="api"] .x-nav-icon { --t1: #8e8e93; --t2: #5c5c61; }
.x-nav .x-nav-item[href*="affiliates"] .x-nav-icon { --t1: #ff5c86; --t2: #e0244f; }
.x-nav .x-nav-item[href*="child"] .x-nav-icon { --t1: #45d4cf; --t2: #11a8a3; }
.x-nav .x-nav-item[href*="ticket"] .x-nav-icon, .x-nav .x-nav-item[href*="support"] .x-nav-icon { --t1: #5fdc6f; --t2: #28b43d; }
.x-nav .x-nav-item[href*="updates"] .x-nav-icon { --t1: #ff8a5c; --t2: #e8572a; }
.x-nav .x-nav-item[href*="blog"] .x-nav-icon { --t1: #a2845e; --t2: #7b6040; }
.x-nav .x-nav-item.is-active { background: color-mix(in srgb, var(--text) 12%, transparent); font-weight: 600; }
.x-nav .x-nav-item.is-active .x-nav-icon { background: linear-gradient(180deg, var(--t1) 0%, var(--t2) 100%) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 0 0 .5px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.4) !important; }
.x-nav .x-nav-item { color: var(--text); min-height: 36px; gap: 11px; }
.x-nav-h { margin-top: 2px; }
html[data-theme="light"] .x-nav .x-nav-item.is-active { background: rgba(0,0,0,.07); }
.x-nav .x-nav-icon svg { width: 15px; height: 15px; filter: drop-shadow(0 .5px 0 rgba(0,0,0,.2)); }
.x-nav .x-nav-icon { font-size: 0; }
.x-nav .x-nav-icon svg { width: 16.5px; height: 16.5px; stroke-width: 2.15; }
/* Groups separated by space only (System Settings), no section labels */
.x-nav-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.x-nav-sec { position: relative; margin-bottom: 18px; }
.x-nav-sec + .x-nav-sec::before { content: ""; position: absolute; left: 10px; right: 10px; top: -10px; height: 1px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.x-nav-new { margin-bottom: 18px; }
/* Phone tab bar: floating frosted capsule, line icons, centre "+" for New order */
@media (max-width: 768px) {
  .x-tabbar { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); height: 64px; align-items: center; gap: 2px; padding: 0 6px; border-radius: 26px;
    background: color-mix(in srgb, #1c1c1e 72%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
    box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.08), 0 18px 40px -12px rgba(0,0,0,.8); }
  .x-tab { position: relative; flex: 1; height: 52px; justify-content: center; gap: 3px; padding: 0; border-radius: 18px; color: rgba(255,255,255,.55); font: 600 10px var(--font); letter-spacing: .01em; text-decoration: none; transition: color .2s, background .25s; }
  .x-tab:hover, .x-tab:focus-visible { color: #fff; text-decoration: none; }
  .x-tab svg { width: 22px; height: 22px; }
  .x-tab.is-active { background: rgba(255,255,255,.1); color: #fff; }
  .x-tab:active { transform: scale(.94); }
  .x-tab-main { color: #fff; }
  .x-tab-main.is-active { background: none; }
  .x-tab-plus { display: grid; place-items: center; width: 40px; height: 30px; border-radius: 12px; background: linear-gradient(180deg, #fff, #e3e3e8); color: #000; box-shadow: 0 6px 16px -6px rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.08); }
  .x-tab-plus svg { width: 18px; height: 18px; }
  .x-tab-main > span:last-child { color: rgba(255,255,255,.8); }
  html[data-theme="light"] .x-tabbar { background: color-mix(in srgb, #fff 78%, transparent); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08), 0 16px 36px -14px rgba(0,0,0,.25); }
  html[data-theme="light"] .x-tab { color: rgba(0,0,0,.5); } html[data-theme="light"] .x-tab.is-active { background: rgba(0,0,0,.06); color: #000; }
  html[data-theme="light"] .x-tab-plus { background: linear-gradient(180deg, #2c2c2e, #000); color: #fff; } html[data-theme="light"] .x-tab-main > span:last-child { color: #000; }
}
@media (max-width: 768px) { .x-tab-plus { height: 26px; width: 38px; border-radius: 10px; } .x-tab-plus svg { width: 16px; height: 16px; } }
/* Phone polish: one white "+" (the tab bar's New order); top Add funds becomes secondary; solid-enough glass; aligned labels */
@media (max-width: 768px) {
  .x-wallet-add { background: var(--panel-3); color: var(--text); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.12); }
  .x-wallet-add:hover { color: var(--text); }
  .x-tabbar { background: color-mix(in srgb, #161618 90%, transparent); }
  .x-tab > svg, .x-tab-plus { margin-bottom: 1px; }
  .x-tab > svg { height: 26px; width: 24px; padding: 2px 0; }
  .x-tab-plus { height: 26px; }
  html[data-theme="light"] .x-tabbar { background: color-mix(in srgb, #fff 92%, transparent); }
}
/* Phone/tablet guest header: buttons centred in the bar (top-aligned only while the full-screen menu is open). */
@media (max-width: 1080px) {
  .x-gnav-inner { align-content: center; align-items: center; min-height: 52px; }
  .x-gmenu-open .x-gnav-inner { align-content: flex-start; }
  .x-gnav .x-gnav-login, .x-gnav .x-gnav-signup { height: 32px; min-height: 32px; }
}
/* Light/dark capsule switch: the knob slides to the active mode */
.x-mode { position: relative; display: inline-flex; align-items: center; justify-content: space-between; flex: none; width: 64px; height: 32px; padding: 0 9px; border: 0; border-radius: 999px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-3); cursor: pointer; }
.x-mode i { position: relative; z-index: 1; width: 14px; font-size: 12px; text-align: center; transition: color .3s; }
.x-mode-k { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.35); transition: transform .35s cubic-bezier(.3,1.4,.5,1), background .3s; }
html[data-theme="dark"] .x-mode-k, html:not([data-theme="light"]) .x-mode-k { transform: translateX(32px); }
html[data-theme="light"] .x-mode-k { transform: none; }
html:not([data-theme="light"]) .x-mode .fa-moon, html[data-theme="light"] .x-mode .fa-sun { color: var(--bg); }
.x-mode:hover { box-shadow: inset 0 0 0 1px var(--line-3); }
.x-mode:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px var(--line-3), var(--ring); }
/* Language pill + frosted popover */
.x-lang-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px 0 11px; border: 0; border-radius: 999px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font: 650 12.5px var(--font); letter-spacing: .02em; cursor: pointer; }
.x-lang-btn > i:first-child { color: var(--text-2); font-size: 12px; }
.x-lang-caret { color: var(--text-3); font-size: 8px; transition: transform .25s var(--ease); }
.x-lang.open .x-lang-caret { transform: rotate(180deg); }
.x-lang-btn:hover { box-shadow: inset 0 0 0 1px var(--line-3); }
.x-lang .x-lang-menu { min-width: 210px; max-height: min(420px, 70vh); overflow-y: auto; margin-top: 10px; padding: 6px; border: 0; border-radius: 16px; background: color-mix(in srgb, var(--panel-2) 92%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 60px -18px rgba(0,0,0,.75); animation: x-acct-in .18s var(--ease); }
.x-lang-h { padding: 8px 10px 6px; color: var(--text-3); font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.x-lang .x-lang-menu > li > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 36px; padding: 0 10px; border-radius: 10px; color: var(--text); font-size: 14px; background: none; }
.x-lang .x-lang-menu > li > a:hover, .x-lang .x-lang-menu > li > a:focus { background: var(--panel-3); color: var(--text); }
.x-lang .x-lang-menu > li > a i { color: var(--text); font-size: 11px; opacity: 0; }
.x-lang .x-lang-menu > li.active > a { background: none; font-weight: 650; }
.x-lang .x-lang-menu > li.active > a i { opacity: 1; }
@media (max-width: 400px) { .x-gnav-actions .x-mode { display: none; } }

/* Language lives in the footer, like Apple's region link: quiet text, menu opens upward. */
.x-foot-end { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; }
.x-lang-link { display: inline-flex; align-items: center; gap: 7px; padding: 4px 0; border: 0; background: none; color: var(--text-2); font: 500 12px var(--font); cursor: pointer; }
.x-lang-link i { font-size: 12px; color: var(--text-3); transition: color .2s var(--ease); }
.x-lang-link:hover, .x-lang--foot.open .x-lang-link { color: var(--text); }
.x-lang-link:hover i, .x-lang--foot.open .x-lang-link i { color: var(--text); }
.x-lang-link:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 6px; }
.x-lang--foot .x-lang-menu { margin: 0 0 12px; bottom: 100%; top: auto; right: 0; left: auto; width: 360px; max-height: none; overflow: visible; padding: 8px; display: none; grid-template-columns: 1fr 1fr; gap: 2px; }
.x-lang--foot.open .x-lang-menu { display: grid; }
.x-lang--foot .x-lang-menu > li > a { height: 38px; font-size: 13.5px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-lang--foot .x-lang-menu > li > a span { overflow: hidden; text-overflow: ellipsis; }
.x-lang--foot .x-lang-menu > li.active > a { background: var(--panel-3); }
.x-lang-scrim { display: none; }
@media (max-width: 720px) {
  .x-lang--foot .x-lang-menu { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; margin: 0; padding: 10px; border-radius: 22px; z-index: 1001; animation: x-lang-sheet .28s var(--ease); }
  .x-lang--foot .x-lang-menu > li > a { height: 46px; font-size: 15px; }
  .x-lang--foot.open .x-lang-scrim { display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
}
@keyframes x-lang-sheet { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Sidebar icons: plain line icons in the text color, no tiles (owner preference, Oct 28). */
.x-nav .x-nav-item .x-nav-icon,
.x-nav .x-nav-item[href] .x-nav-icon,
html[data-theme="light"] .x-nav .x-nav-item .x-nav-icon {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 0;
  background: none !important; box-shadow: none !important;
  color: var(--text-2) !important;
}
.x-nav .x-nav-item .x-nav-icon svg { width: 20px; height: 20px; stroke-width: 1.7; filter: none; }
.x-nav .x-nav-item:hover .x-nav-icon,
.x-nav .x-nav-item.is-active .x-nav-icon,
html[data-theme="light"] .x-nav .x-nav-item.is-active .x-nav-icon { background: none !important; color: var(--text) !important; }
/* Phone tab bar, docked (Oct 30): edge to edge like native apps. Frosted, hairline top, home-indicator inset,
   active tab = bright icon and label (no pill). Replaces the floating capsule above. */
@media (max-width: 768px) {
  .x-tabbar { left: 0; right: 0; bottom: 0; height: auto; gap: 0; border-radius: 0;
    padding: 5px max(6px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
    background: color-mix(in srgb, #000 70%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
    box-shadow: inset 0 .5px 0 rgba(255,255,255,.16); }
  .x-tab { height: 50px; gap: 4px; border-radius: 0; color: rgba(255,255,255,.48); font: 500 10.5px var(--font); letter-spacing: 0; transition: color .15s, opacity .15s; }
  .x-tab.is-active { background: none; color: #fff; }
  .x-tab.is-active > svg { stroke-width: 2.3; }
  .x-tab:active { transform: none; opacity: .55; }
  .x-tab-plus { width: 46px; height: 28px; border-radius: 9px; background: #fff; box-shadow: none; }
  .x-tab-main > span:last-child { color: #fff; }
  .x-main { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  html[data-theme="light"] .x-tabbar { background: color-mix(in srgb, #fff 78%, transparent); box-shadow: inset 0 .5px 0 rgba(0,0,0,.14); }
  html[data-theme="light"] .x-tab { color: rgba(0,0,0,.45); } html[data-theme="light"] .x-tab.is-active { background: none; color: #000; }
  html[data-theme="light"] .x-tab-plus { background: #000; } html[data-theme="light"] .x-tab-main > span:last-child { color: #000; }
}

/* ── New order: guided flow ───────────────────────────────────────── */
.x-order { max-width: 1240px; margin: 0 auto; }
.x-order-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.x-flow { min-width: 0; }
.x-stage.is-in { animation: xs-in .5s var(--ease) both; }
.x-stage.is-out { animation: xs-out .26s var(--ease) forwards; }
@keyframes xs-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes xs-out { to { opacity: 0; transform: translateY(-12px) scale(.985); } }
@keyframes xs-tile { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.x-q { margin: 0 0 6px; font: 700 clamp(34px, 4vw, 48px)/1.04 var(--display); letter-spacing: -.045em; }
[data-stage="platform"] .x-q { font-size: clamp(38px, 4.8vw, 60px); }
.x-sub { margin: 0 0 24px; color: var(--text-2); font-size: 17px; }
.x-lbl { margin: 0 0 14px; color: var(--text-3); font: 600 12.5px var(--font); text-transform: uppercase; letter-spacing: .08em; }
.x-loading { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--text-3); }

/* Search */
.x-search { position: relative; margin-bottom: 26px; }
.x-search > i { position: absolute; left: 20px; top: 29px; transform: translateY(-50%); color: var(--text-3); z-index: 2; }
.x-search input[type="search"] { min-height: 58px; padding-left: 50px; border-radius: 18px; font-size: 16px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.x-search-results { position: absolute; left: 0; right: 0; top: 64px; z-index: 30; max-height: min(420px, 60vh); overflow-y: auto; padding: 6px; border-radius: 18px; background: var(--panel-2); box-shadow: var(--pop); animation: xs-in .25s var(--ease); }
.x-hit { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 12px; background: none; color: var(--text); font: 500 14px var(--font); text-align: left; cursor: pointer; }
.x-hit:hover { background: var(--panel-3); }
.x-hit i { width: 22px; text-align: center; font-size: 17px; flex: 0 0 22px; }
.x-hit span { flex: 1; min-width: 0; }
.x-hit b { font: 600 13.5px var(--display); white-space: nowrap; }
.x-hit-none { padding: 18px; color: var(--text-3); text-align: center; }

/* Platform tiles */
.x-pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.x-pt {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; aspect-ratio: 1.15; overflow: hidden;
  border: 0; border-radius: 26px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: 600 15px var(--font); cursor: pointer;
  opacity: 0; animation: xs-tile .55s var(--ease) forwards; animation-delay: calc(var(--i) * 40ms + 80ms);
  transition: background .25s, box-shadow .25s, transform .35s var(--ease);
}
.x-pt > i { font-size: 40px; transition: transform .4s var(--ease); position: relative; z-index: 1; }
.x-pt > span { position: relative; z-index: 1; }
.x-pt small { margin-top: -6px; color: var(--text-3); font-size: 12.5px; font-weight: 500; position: relative; z-index: 1; }
.x-pt::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 32%, var(--glow), transparent 70%); opacity: 0; transition: opacity .35s; }
.x-pt:hover { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2); transform: translateY(-4px); }
.x-pt:hover > i { transform: scale(1.12) rotate(-4deg); }
.x-pt:hover::after { opacity: .28; }
.x-pt .fa-globe { color: var(--text-2); }

/* Crumbs */
.x-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.x-crumbs:empty { display: none; }
.x-cr { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 6px; border: 0; border-radius: 999px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font: 600 14.5px var(--font); cursor: pointer; animation: xs-tile .45s var(--ease) both; max-width: 100%; }
.x-cr-ic { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: #fff; font-size: 16px; --mono-ink: #000; }
.x-cr-ic .fa-globe { color: #000; }
.x-cr-ic.is-t { background: var(--panel-3); color: var(--text); font-size: 13px; --mono-ink: var(--text); }
.x-cr em { font-style: normal; color: var(--text-3); font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: var(--panel-3); }
.x-cr:hover em { color: var(--text); }

/* Category cards */
.x-tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 22px 0 8px; }
.x-tc { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; border: 0; border-radius: 22px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-align: left; cursor: pointer; opacity: 0; animation: xs-tile .45s var(--ease) forwards; animation-delay: calc(var(--i) * 35ms); transition: background .2s, transform .3s var(--ease); }
.x-tc-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--panel-3); font-size: 16px; }
.x-tc b { display: block; font: 600 16px/1.25 var(--display); letter-spacing: -.02em; }
.x-tc small { display: block; margin-top: 3px; color: var(--text-3); font-size: 13px; }
.x-tc:hover { background: var(--panel-2); transform: translateY(-3px); }
.x-tc.is-on { background: var(--text); color: var(--bg); }
.x-tc.is-on .x-tc-ic { background: var(--bg); color: var(--text); }
.x-tc.is-on small { color: var(--text-3); }

/* Services */
[data-stage="service"] { margin-top: 26px; }
.x-svcs { display: grid; gap: 10px; }
.x-sv { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 20px; border: 0; border-radius: 20px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-align: left; cursor: pointer; opacity: 0; animation: xs-tile .4s var(--ease) forwards; animation-delay: calc(var(--i) * 40ms); transition: background .2s, box-shadow .2s; }
.x-sv:hover { background: var(--panel-2); }
.x-sv.is-on { background: var(--panel-2); box-shadow: inset 0 0 0 1.5px var(--text); }
.x-radio { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-3); display: grid; place-items: center; transition: background .2s; }
.x-sv.is-on .x-radio { background: var(--text); box-shadow: none; }
.x-sv.is-on .x-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bg); }
.x-sv-main { min-width: 0; }
.x-sv-main b { display: block; font: 600 15.5px/1.35 var(--display); letter-spacing: -.015em; }
.x-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.x-tags span { padding: 3px 9px; border-radius: 999px; background: var(--panel-3); color: var(--text-2); font-size: 12px; font-weight: 500; }
.x-tags .is-ok { background: var(--ok-soft); color: var(--ok); }
.x-price { text-align: right; font: 700 18px var(--display); letter-spacing: -.03em; white-space: nowrap; }
.x-price small { display: block; color: var(--text-3); font: 500 12px var(--font); letter-spacing: 0; }

/* Details: native fields */
[data-stage="details"] { margin-top: 30px; }
.x-native { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.x-desc { margin: 0 0 18px; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.x-desc.hidden { display: block !important; }
.x-desc summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 15px 18px; cursor: pointer; color: var(--text-2); font-weight: 600; font-size: 14px; }
.x-desc summary::-webkit-details-marker { display: none; }
.x-desc-chev { margin-left: auto; font-size: 11px; transition: transform .25s var(--ease); }
.x-desc[open] .x-desc-chev { transform: rotate(180deg); }
.x-desc-body { max-height: 300px; overflow-y: auto; padding: 0 18px 18px !important; border: 0 !important; color: var(--text-2); font-size: 13.5px; line-height: 1.65; }
.x-fields { display: grid; grid-template-columns: 1fr; gap: 0; }
.x-fields .form-group { margin-bottom: 18px; }
.x-fields .control-label { color: var(--text-2); font-size: 14px; font-weight: 500; }
.x-fields .form-control { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); border-radius: 16px; min-height: 56px; }
.x-fields input[disabled] { opacity: .7; }
.x-fields .help-block, .x-fields .min-max { color: var(--text-3); font-size: 13px; }
.x-shake { animation: x-shake .5s; box-shadow: inset 0 0 0 1.5px var(--bad) !important; }
@keyframes x-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.x-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.x-quick-chip { height: 32px; padding: 0 13px; border: 0; border-radius: 999px; background: var(--panel-3); color: var(--text-2); font: 600 13px var(--display); cursor: pointer; transition: all .15s; }
.x-quick-chip:hover { color: var(--text); }
.x-quick-chip.is-on { background: var(--text); color: var(--bg); }
.x-charge-row { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.x-native-submit { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.x-check { margin: 4px 0 8px; }

/* Summary */
.x-sum { position: sticky; top: calc(var(--top) + 24px); padding: 26px; border-radius: 28px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: inset 0 0 0 1px var(--line-2), 0 50px 100px -40px rgba(255,255,255,.07); }
.x-sum h4 { margin: 0 0 18px; color: var(--text-3); font: 600 12.5px var(--font); text-transform: uppercase; letter-spacing: .08em; }
.x-sum-empty { text-align: center; padding: 22px 6px 14px; }
.x-ghost { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 20px; background: var(--panel-3); color: var(--text-3); font-size: 22px; }
.x-sum-empty p { margin: 0; color: var(--text-3); font-size: 14px; line-height: 1.55; }
.x-sum-body { display: none; }
.x-sum.is-ready .x-sum-empty { display: none; }
.x-sum.is-ready .x-sum-body { display: block; animation: xs-in .45s var(--ease) both; }
.x-sum-svc { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.x-sum-ic { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px; border-radius: 16px; background: #fff; font-size: 26px; --mono-ink: #000; }
.x-sum-ic .fa-globe { color: #000; }
.x-sum-svc b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font: 600 15.5px/1.35 var(--display); letter-spacing: -.015em; }
.x-sum-svc small { color: var(--text-3); font-size: 13px; }
.x-ln { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); color: var(--text-2); font-size: 14.5px; }
.x-ln b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.x-tot { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 20px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.x-tot span { font-weight: 600; }
.x-tot b { font: 700 42px/1 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.x-go { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 58px; border: 0; border-radius: 999px; background: var(--text); color: var(--bg); font: 700 17px var(--font); cursor: pointer; transition: transform .2s var(--ease), opacity .2s; }
.x-go:hover { transform: scale(1.02); }
.x-go:active { transform: scale(.98); }
.x-assure { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; color: var(--text-3); font-size: 13.5px; }
.x-assure i { width: 18px; color: var(--text-2); }
.x-note { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 14px; }

/* Success / errors */
.x-done { max-width: 520px; margin: 10px auto 34px; padding: 36px 30px 28px; border-radius: 32px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); text-align: center; animation: xs-in .5s var(--ease) both; }
.x-done-check { display: grid; place-items: center; width: 78px; height: 78px; margin: 0 auto 20px; border-radius: 50%; background: var(--text); }
.x-done-check svg { width: 38px; height: 38px; fill: none; stroke: var(--bg); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: x-draw .6s .25s var(--ease) forwards; }
@keyframes x-draw { to { stroke-dashoffset: 0; } }
.x-done h2 { margin: 0 0 6px; font: 700 30px var(--display); letter-spacing: -.04em; }
.x-done > p { margin: 0 0 22px; color: var(--text-2); }
.x-receipt { margin: 0 0 22px; padding: 6px 18px; border-radius: 20px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.x-receipt div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--line); }
.x-receipt div:first-child { border-top: 0; }
.x-receipt dt { color: var(--text-2); font-weight: 400; }
.x-receipt dd { margin: 0; font-weight: 600; text-align: right; min-width: 0; }
.x-done-actions { display: flex; gap: 10px; }
.x-done-actions .x-btn { flex: 1; min-height: 52px; }
.x-order > .x-alert { max-width: 760px; }

/* Mobile bar */
.x-bar { display: none; }
@media (max-width: 1100px) {
  .x-order-grid { grid-template-columns: 1fr; }
  .x-sum { position: static; }
  .x-pgrid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .x-q { font-size: 34px; } [data-stage="platform"] .x-q { font-size: 36px; }
  .x-pgrid { gap: 10px; }
  .x-pt { aspect-ratio: 1; border-radius: 20px; gap: 9px; font-size: 13px; }
  .x-pt > i { font-size: 30px; }
  .x-pt small { display: none; }
  .x-tgrid { grid-template-columns: 1fr 1fr; }
  .x-tc { padding: 16px; }
  .x-sv { padding: 16px; gap: 12px; border-radius: 18px; }
  .x-price { font-size: 16px; }
  .x-sum { padding: 22px; border-radius: 24px; }
  .x-sum:not(.is-ready) { display: none; }
  .x-sum .x-go, .x-sum .x-tot { display: none; }
  .x-bar {
    position: fixed; left: 12px; right: 12px; z-index: 95; bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 20px; border-radius: 24px;
    background: color-mix(in srgb, var(--panel-3) 85%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
    box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 40px -10px #000; transition: transform .45s var(--ease), opacity .3s;
  }
  .x-bar.is-off { transform: translateY(160%); opacity: 0; pointer-events: none; }
  .x-bar > div { flex: 1; min-width: 0; }
  .x-bar small { display: block; color: var(--text-3); font-size: 12px; }
  .x-bar b { font: 700 24px/1.1 var(--display); letter-spacing: -.04em; }
  .x-bar .x-go { width: auto; height: 50px; padding: 0 24px; font-size: 16px; }
  .x-order { padding-bottom: 90px; }
  .x-done { padding: 28px 20px 22px; }
}

.x-fields .form-group:has(> input[disabled]), .x-fields .form-group:has(input[name*="average_time"]) { display: none; }
.x-tc-more { background: transparent; box-shadow: inset 0 0 0 1.5px dashed var(--line-2); }
.x-tc-more { box-shadow: inset 0 0 0 1px var(--line-2); }
/* Wide desktop: use the width, shorter tiles, no tall empty cards. */
@media (min-width: 1281px) {
  .x-order { max-width: 1640px; }
  .x-order-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; }
  .x-pgrid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .x-pt { aspect-ratio: auto; height: 150px; gap: 10px; border-radius: 22px; }
  .x-pt > i { font-size: 34px; }
  .x-sum { padding: 22px; }
  .x-sum-empty { padding: 8px 6px 4px; }
}
@media (min-width: 1700px) { .x-pgrid { grid-template-columns: repeat(6, 1fr); } }
/* Empty summary keeps the same shape as a filled one: preview rows and a dimmed button. */
.x-sum-empty { text-align: left; padding: 0; }
.x-sum-empty .x-ghost { margin: 6px 0 14px; }
.x-sum-empty > p { margin: 0 0 20px; }
.x-ln.is-ghost, .x-tot.is-ghost { color: var(--text-3); }
.x-ln.is-ghost b, .x-tot.is-ghost b { color: var(--text-3); font-weight: 500; }
.x-tot.is-ghost b { font-size: 26px; }
.x-go.is-ghost { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; opacity: .28; pointer-events: none; }
/* Service description, formatted (the panel's raw box stays hidden and feeds it) */
.x-desc-raw { display: none !important; }
.xdsc { margin: 4px 0 18px; padding: 18px; border-radius: 22px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.xdsc[hidden] { display: none; }
.xdsc.is-in { animation: xs-in .4s var(--ease) both; }
.xdsc > header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.xdsc > header span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--panel-3); color: var(--text-2); font-size: 11px; }
.xdsc > header b { font: 650 14.5px var(--display); letter-spacing: -.01em; }
.xdsc-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 0 0 14px; }
.xdsc-kv > div { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 11px 12px; border-radius: 14px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.xdsc-kv span { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--panel-3); color: var(--text-2); font-size: 12px; }
.xdsc-kv dt { color: var(--text-3); font-size: 11.5px; font-weight: 600; }
.xdsc-kv dd { margin: 0; color: var(--text); font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.xdsc-kv .is-on span { background: var(--ok-soft); color: var(--ok); } .xdsc-kv .is-off span { background: var(--panel-3); color: var(--text-3); } .xdsc-kv .is-off dd { color: var(--text-2); }
.xdsc-h { display: block; margin: 0 0 8px; color: var(--text-2); font-size: 12.5px; font-weight: 650; }
.xdsc-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 4px; padding: 0; list-style: none; }
.xdsc-list li { display: flex; gap: 10px; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.xdsc-list li > i { flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--panel-3); color: var(--text); font-size: 8.5px; }
.xdsc-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.xdsc-links a { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 9px 12px 9px 10px; border-radius: 14px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-decoration: none; transition: background .2s; }
.xdsc-links a:hover { color: var(--text); background: var(--panel-3); text-decoration: none; }
.xdsc-links a > i:first-child { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--panel-3); font-size: 12px; }
.xdsc-links span { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; font-weight: 600; }
.xdsc-links small { overflow: hidden; color: var(--text-3); font-size: 11.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.xdsc-links a > i:last-child { color: var(--text-3); font-size: 11px; }
.xdsc-plain { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.6; white-space: pre-line; }
@media (max-width: 560px) { .xdsc { padding: 16px 14px; } .xdsc-kv { grid-template-columns: 1fr 1fr; } .xdsc-kv > div { grid-template-columns: 1fr; padding: 10px; } .xdsc-kv span { grid-row: auto; width: 26px; height: 26px; margin-bottom: 6px; } .xdsc-links a { width: 100%; } }
/* Facts as a spec list: label left, value right, hairlines between — long and short values align. */
.xdsc-kv { display: flex; flex-direction: column; gap: 0; margin: 0 0 16px; padding: 0 14px; border-radius: 16px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.xdsc-kv > div { display: grid; grid-template-columns: minmax(130px, 34%) 1fr; gap: 16px; align-items: start; padding: 12px 0; border-radius: 0; background: none; box-shadow: none; }
.xdsc-kv > div + div { border-top: 1px solid var(--line); }
.xdsc-kv dt { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 13px; font-weight: 600; }
.xdsc-kv dt span { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--panel-3); color: var(--text-2); font-size: 11px; grid-row: auto; }
.xdsc-kv dd { display: flex; align-items: flex-start; gap: 7px; margin: 3px 0 0; color: var(--text); font-size: 14px; font-weight: 550; line-height: 1.45; }
.xdsc-kv dd > i { margin-top: 3px; font-size: 13px; }
.xdsc-kv .is-on dd > i { color: var(--ok); } .xdsc-kv .is-off dd > i { color: var(--text-3); } .xdsc-kv .is-off dd { color: var(--text-2); }
.xdsc-kv .is-on dt span { background: var(--ok-soft); color: var(--ok); }
@media (max-width: 560px) {
  .xdsc-kv { padding: 0 12px; } .xdsc-kv > div { grid-template-columns: 1fr; gap: 6px; padding: 11px 0; }
  .xdsc-kv dt span { width: 24px; height: 24px; margin-bottom: 0; } .xdsc-kv dd { margin: 0 0 0 34px; }
}
.xdsc-kv dd > span { display: block; width: auto; height: auto; padding: 0; border-radius: 0; background: none; color: inherit; font-size: inherit; grid-row: auto; }
.xdsc-kv dd > span { background: none !important; } .xdsc-kv > div { grid-template-rows: auto; }
/* New order: finished steps fold away */
.x-lbl-done, .x-svchange { display: none; }
.x-stage[data-stage="service"].is-collapsed .x-lbl { display: flex; align-items: center; gap: 10px; }
.x-stage[data-stage="service"].is-collapsed .x-lbl-pick { display: none; }
.x-stage[data-stage="service"].is-collapsed .x-lbl-done { display: inline; }
.x-stage[data-stage="service"].is-collapsed .x-svchange { display: inline-flex; margin-left: auto; height: 28px; align-items: center; padding: 0 12px; border: 0; border-radius: 999px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: 600 12.5px var(--font); letter-spacing: 0; text-transform: none; cursor: pointer; }
.x-stage[data-stage="service"].is-collapsed .x-sv:not(.is-on) { display: none; }
.x-stage[data-stage="service"].is-collapsed .x-sv.is-on { animation: none; opacity: 1; }
/* Compact service facts with "Full details" */
.xdsc > header { flex-wrap: wrap; }
.xdsc-more { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: 600 12.5px var(--font); cursor: pointer; }
.xdsc-more i { font-size: 10px; transition: transform .25s var(--ease); }
.xdsc:not(.is-compact) .xdsc-more i { transform: rotate(180deg); }
.xdsc-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.xdsc-pills > span { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 8px; border-radius: 999px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap; }
.xdsc-pills > span i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--panel-3); color: var(--text-2); font-size: 9px; }
.xdsc-pills > span b { color: var(--text-3); font-weight: 500; }
.xdsc-pills .is-on i { background: var(--ok-soft); color: var(--ok); }
.xdsc-pills .is-off { color: var(--text-2); }
.xdsc.is-compact .xdsc-body { display: none; }
.xdsc:not(.is-compact) .xdsc-pills { display: none; }
.xdsc.is-compact { padding-bottom: 14px; }
.xdsc.is-simple .xdsc-pills, .xdsc.is-simple .xdsc-more { display: none; }
.xdsc.is-simple .xdsc-body { display: block; }
/* Quantity limits */
.form-control.is-bad { box-shadow: inset 0 0 0 1.5px var(--bad) !important; }
.x-qerr { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--bad); font-size: 13px; font-weight: 600; }
.x-qerr[hidden] { display: none; }
.x-qerr button { margin-left: auto; height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--bad-soft); color: var(--text); font: 600 12.5px var(--font); cursor: pointer; }
.x-go.is-blocked { opacity: .45; }
.xdsc.is-compact .xdsc-pills:empty { display: none; } .xdsc.is-compact:has(.xdsc-pills:empty) > header { margin-bottom: 0; } .xdsc.is-compact:has(.xdsc-pills:empty) { padding: 14px 18px; }
/* New order: favorites row (only rendered when there are favorites) */
.x-favs { margin: 0 0 22px; }
.x-favs[hidden] { display: none; }
.x-favs-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.x-favs-h i { color: #ffd60a; font-size: 13px; }
.x-favs-h b { font: 650 15px var(--display); letter-spacing: -.01em; }
.x-favs-h small { padding: 1px 8px; border-radius: 999px; background: var(--panel-3); color: var(--text-2); font-size: 11.5px; font-weight: 650; }
.x-favs-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.x-fav { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border: 0; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-align: left; cursor: pointer; opacity: 0; animation: xs-tile .45s var(--ease) forwards; animation-delay: calc(var(--i) * 40ms); transition: background .2s, box-shadow .2s, transform .2s var(--ease); }
.x-fav:hover { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2); transform: translateY(-2px); }
.x-fav-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--panel-3); font-size: 17px; }
.x-fav-t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.x-fav-t b { overflow: hidden; font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.x-fav-t small { overflow: hidden; color: var(--text-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.x-fav-p { display: flex; flex-direction: column; align-items: flex-end; flex: none; font: 650 14px var(--font); font-variant-numeric: tabular-nums; }
.x-fav-p small { color: var(--text-3); font-size: 11px; font-weight: 500; }
@media (max-width: 640px) { .x-favs-row { display: flex; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scroll-snap-type: x mandatory; scrollbar-width: none; } .x-favs-row::-webkit-scrollbar { display: none; } .x-fav { flex: 0 0 84%; scroll-snap-align: start; } .x-favs-row:has(.x-fav:only-child) .x-fav { flex-basis: 100%; } }
/* Favorites tile + grouped favorites view (replaces the inline favorites row) */
.x-pt-fav > i { color: #ffd60a; }
.x-pt-fav { box-shadow: inset 0 0 0 1px rgba(255,214,10,.28); }
.x-pt-fav:hover { box-shadow: inset 0 0 0 1px rgba(255,214,10,.5); }
.x-order.is-favs [data-stage="platform"] > :not(.x-favs) { display: none !important; }
.x-favs.is-in { animation: xs-in .4s var(--ease) both; }
.x-favs-back { display: inline-flex; align-items: center; gap: 8px; height: 34px; margin-bottom: 18px; padding: 0 14px 0 12px; border: 0; border-radius: 999px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: 600 13px var(--font); cursor: pointer; }
.x-favs-back i { font-size: 10px; }
.x-favs-star { margin-right: 12px; color: #ffd60a; font-size: .7em; vertical-align: .12em; }
.x-favs .x-sub { margin-bottom: 22px; }
.x-favg { margin-bottom: 18px; }
.x-favg > header { display: flex; align-items: center; gap: 10px; margin: 0 0 10px 2px; }
.x-favg-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; }
.x-favg > header b { font: 650 15px var(--display); letter-spacing: -.01em; }
.x-favg > header small { padding: 1px 8px; border-radius: 999px; background: var(--panel-3); color: var(--text-2); font-size: 11.5px; font-weight: 650; }
.x-favg-list { border-radius: 20px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.x-favrow { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; transition: background .2s; }
.x-favrow + .x-favrow { border-top: 1px solid var(--line); }
.x-favrow:hover { background: var(--panel-2); }
.x-favrow-t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.x-favrow-t b { overflow: hidden; font-size: 14.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.x-favrow-t small { overflow: hidden; color: var(--text-3); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.x-favrow > i { color: var(--text-3); font-size: 11px; }
.x-favs-h, .x-favs-row { display: none; }
@media (max-width: 640px) { .x-favrow { padding: 13px 14px; gap: 10px; } }
/* Category step: search + richer tiles (flags, tags) */
.x-csearch { display: flex; align-items: center; gap: 12px; height: 50px; margin: 6px 0 16px; padding: 0 8px 0 16px; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-3); }
.x-csearch[hidden] { display: none; }
.x-csearch:focus-within { box-shadow: inset 0 0 0 1px var(--line-3), var(--ring); }
.x-csearch input, .x-csearch input:focus { flex: 1; min-width: 0; height: 100%; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; color: var(--text); font: 500 15.5px var(--font); outline: 0; }
.x-csearch-x { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--panel-3); color: var(--text-2); font-size: 11px; cursor: pointer; }
.x-csearch-x[hidden] { display: none; }
.x-tc[hidden] { display: none !important; }
.x-cnone { margin: 8px 2px; color: var(--text-3); font-size: 14px; }
.x-cnone button { padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.x-tc-ic.is-flag { background: var(--panel-2); }
.x-flag { font-size: 24px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.x-cr-ic .x-flag { font-size: 14px; }
.x-flag-sm { font-size: .85em; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.x-tc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.x-tc-tags em { padding: 2px 7px; border-radius: 999px; background: var(--panel-3); color: var(--text-2); font: 600 11px var(--font); font-style: normal; }
.x-tc.is-on .x-tc-tags em { background: rgba(0,0,0,.08); color: inherit; }

/* Category tiles: each platform's own action glyph as a crisp vector (Oct 28). */
.x-tc-ic .x-glyph, .x-cr-ic .x-glyph { width: 21px; height: 21px; display: block; }
/* Link format examples: informational, not clickable (Oct 28). */
.xdsc-format { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 11px 14px 11px 11px; border-radius: 14px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); cursor: default; }
.xdsc-format > span { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--panel-3); color: var(--text-2); font-size: 12px; }
.xdsc-format small { display: block; color: var(--text-3); font-size: 11.5px; font-weight: 600; }
.xdsc-format code { display: block; margin-top: 2px; padding: 0; background: none; color: var(--text); font: 500 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; user-select: all; }
/* Country-targeted categories: round flags (one, or two overlapping), or a small flag badge on an action icon. */
.x-tc-ic { position: relative; }
.x-flags { display: flex; align-items: center; }
.x-flagimg { position: relative; display: block; flex: none; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1.5px var(--panel-3); background: var(--panel-2); }
.x-flagimg img { position: absolute; left: 50%; top: 50%; width: 150%; height: 150%; max-width: none; transform: translate(-50%, -50%); }
.x-flags.n2 .x-flagimg { width: 21px; height: 21px; }
.x-flags.n2 .x-flagimg + .x-flagimg { margin-left: -7px; }
.x-geo-badge { position: absolute; right: -5px; bottom: -5px; }
.x-geo-badge .x-flagimg { width: 17px; height: 17px; box-shadow: 0 0 0 2.5px var(--panel); }

/* ── Guest home (generated from concept/v3) ── */
.x-home { background: #000; color: #fff; font: 17px/1.5 var(--font); letter-spacing: -.012em; overflow-x: clip; --k:#000;--w:#fff;--g1:#f5f5f7;--g2:#86868b;--g3:#1d1d1f;--line:rgba(255,255,255,.12);--d:var(--display);--s:var(--font); }
.x-home a { color: inherit; }
.is-guest:has(.x-home) .x-gnav { position: fixed; left: 0; right: 0; }
.x-home{--k:#000;--w:#fff;--g1:#f5f5f7;--g2:#86868b;--g3:#1d1d1f;--g4:#2a2a2d;--line:rgba(255,255,255,.12);--mono-ink:#fff;--d:"Inter Tight",Inter,system-ui,sans-serif;--s:Inter,system-ui,sans-serif}
.x-home{box-sizing:border-box}
.x-home{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
.x-home{margin:0;background:var(--k);color:var(--w);font:17px/1.5 var(--s);letter-spacing:-.012em;-webkit-font-smoothing:antialiased;overflow-x:clip}
.x-home a{color:inherit;text-decoration:none}


.x-home .wm{font:700 19px var(--d);letter-spacing:-.04em;color:#fff}



.x-home .pill{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 15px;border-radius:999px;background:#fff;color:#000;font-weight:600;font-size:13px}
.x-home .b{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 26px;border-radius:999px;font:600 17px var(--s);transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s}
.x-home .b:hover{transform:scale(1.03)}
.x-home .b-w{background:#fff;color:#000}
.x-home .b-o{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.x-home .b-o:hover{background:rgba(255,255,255,.08)}
.x-home .b-k{background:#000;color:#fff}
.x-home .b-ko{color:#000;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.3)}
.x-home .hero{padding:150px 22px 0;text-align:center;position:relative}
.x-home .eyebrow{font:600 21px var(--d);color:var(--g2);letter-spacing:-.02em;margin-bottom:10px}
.x-home h1{margin:0 auto;font:700 clamp(56px,10vw,128px)/.95 var(--d);letter-spacing:-.05em;max-width:1000px}
.x-home .hero p{max-width:620px;margin:26px auto 34px;color:var(--g2);font-size:clamp(19px,2vw,24px);line-height:1.4;letter-spacing:-.02em}
.x-home .hero p b{color:#fff;font-weight:600}
.x-home .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.x-home .stage{height:170vh;position:relative;margin-top:80px}
.x-home .stick{position:sticky;top:60px;height:calc(100vh - 60px);display:grid;place-items:center;perspective:1600px;overflow:hidden}
.x-home .device{width:min(1080px,92vw);aspect-ratio:16/10;border-radius:22px;background:#0a0a0a;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 60px 140px -30px rgba(255,255,255,.18);transform-origin:50% 0;transform:rotateX(calc(var(--p,0)*-1deg + 28deg)) scale(calc(.82 + var(--q,0)*.18));overflow:hidden;will-change:transform}
.x-home .glow{position:absolute;bottom:-20%;left:50%;width:80vw;height:60vh;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,255,255,.12),transparent);pointer-events:none;opacity:calc(1 - var(--q,0)*.6)}
.x-home .ui{display:grid;grid-template-columns:190px 1fr 290px;height:100%;font-size:13px}
.x-home .ui-side{border-right:1px solid var(--line);padding:18px 12px}
.x-home .ui-side .wm{font-size:16px;display:block;padding:0 8px 18px}
.x-home .ui-side a{display:flex;gap:10px;align-items:center;padding:8px;border-radius:8px;color:#a1a1a6}
.x-home .ui-side a.on{background:#1c1c1e;color:#fff}
.x-home .ui-main{padding:26px}
.x-home .ui-main h3{margin:0 0 16px;font:700 26px var(--d);letter-spacing:-.04em}
.x-home .ui-search{height:42px;border-radius:12px;background:#151515;box-shadow:inset 0 0 0 1px var(--line);display:flex;align-items:center;gap:10px;padding:0 14px;color:#6e6e73;margin-bottom:16px}
.x-home .ui-plats{display:flex;gap:8px;margin-bottom:16px}
.x-home .ui-plats span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#151515;box-shadow:inset 0 0 0 1px var(--line);font-size:18px}
.x-home .ui-plats span.on{background:#fff;--mono-ink:#000}
.x-home .ui-svc{display:flex;justify-content:space-between;align-items:center;padding:13px 14px;border-radius:12px;background:#111;box-shadow:inset 0 0 0 1px var(--line);margin-bottom:8px}
.x-home .ui-svc.on{box-shadow:inset 0 0 0 1.5px #fff}
.x-home .ui-svc small{display:block;color:#6e6e73}
.x-home .ui-co{border-left:1px solid var(--line);padding:26px 20px;display:flex;flex-direction:column;gap:12px}
.x-home .ui-co .t{display:flex;justify-content:space-between;align-items:baseline;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.x-home .ui-co .t b{font:700 30px var(--d);letter-spacing:-.04em}
.x-home .ui-btn{height:44px;border-radius:999px;background:#fff;color:#000;display:grid;place-items:center;font-weight:600}
.x-home .ui-f{height:40px;border-radius:10px;background:#151515;box-shadow:inset 0 0 0 1px var(--line);display:flex;align-items:center;padding:0 12px;color:#d2d2d7}
.x-home .ui-lbl{color:#6e6e73;font-size:12px;margin-bottom:-6px}
.x-home .logos{padding:40px 0 120px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.x-home .track{display:flex;gap:64px;width:max-content;animation:xh-mq 40s linear infinite;font-size:34px}
.x-home .track i{opacity:.55}
@keyframes xh-mq{to{transform:translateX(-50%)}}
.x-home .white{background:#fff;color:#1d1d1f;--mono-ink:#1d1d1f}
.x-home .story{max-width:1080px;margin:0 auto;padding:140px 22px;display:grid;grid-template-columns:1fr 1fr;gap:80px}
.x-home .story-l{position:sticky;top:110px;height:min(620px,calc(100vh - 140px));display:grid;place-items:center}
.x-home .phone{position:relative;width:300px;height:600px;border-radius:52px;background:#000;padding:12px;box-shadow:0 40px 80px -30px rgba(0,0,0,.45)}
.x-home .screen{position:relative;height:100%;border-radius:42px;background:#0b0b0b;overflow:hidden;color:#fff;--mono-ink:#fff}
.x-home .scr{position:absolute;inset:0;padding:54px 18px 18px;opacity:0;transform:translateY(20px) scale(.98);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.x-home .scr.on{opacity:1;transform:none}
.x-home .scr h4{margin:0 0 14px;font:700 22px var(--d);letter-spacing:-.03em}
.x-home .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.x-home .grid3 span{aspect-ratio:1;border-radius:18px;background:#1a1a1a;display:grid;place-items:center;font-size:26px}
.x-home .grid3 span.on{background:#fff;--mono-ink:#000}
.x-home .fld{height:46px;border-radius:12px;background:#1a1a1a;display:flex;align-items:center;padding:0 14px;margin-bottom:10px;color:#d2d2d7;font-size:14px}
.x-home .fld.f{box-shadow:inset 0 0 0 1.5px #fff}
.x-home .bigbtn{height:50px;border-radius:999px;background:#fff;color:#000;display:grid;place-items:center;font-weight:600;margin-top:14px}
.x-home .prog{margin-top:18px;padding:16px;border-radius:16px;background:#1a1a1a}
.x-home .prog .bar{height:6px;border-radius:9px;background:#333;overflow:hidden;margin-top:10px}
.x-home .prog .bar i{display:block;height:100%;width:72%;background:#fff;border-radius:9px}
.x-home .story-r .step{min-height:80vh;display:flex;flex-direction:column;justify-content:center;opacity:.25;transition:opacity .5s}
.x-home .story-r .step.on{opacity:1}
.x-home .step .n{font:600 17px var(--d);color:#86868b;margin-bottom:12px}
.x-home .step h2{margin:0 0 16px;font:700 clamp(40px,5vw,64px)/1 var(--d);letter-spacing:-.045em}
.x-home .step p{margin:0;color:#6e6e73;font-size:21px;line-height:1.45;max-width:420px}
.x-home .nums{max-width:1080px;margin:0 auto;padding:160px 22px;text-align:center}
.x-home .nums h2{margin:0 0 70px;font:700 clamp(40px,6vw,80px)/1 var(--d);letter-spacing:-.05em}
.x-home .nums h2 span{color:#6e6e73}
.x-home .nrow{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.x-home .nrow strong{display:block;font:700 clamp(48px,6vw,84px)/1 var(--d);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.x-home .nrow span{display:block;margin-top:10px;color:#86868b;font-size:19px}
.x-home .tiles{max-width:1080px;margin:0 auto;padding:0 22px 160px;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.x-home .tile{border-radius:28px;background:#f5f5f7;color:#1d1d1f;padding:44px;min-height:420px;display:flex;flex-direction:column;--mono-ink:#1d1d1f}
.x-home .tile.dk{background:#161617;color:#fff;--mono-ink:#fff}
.x-home .tile .k{font:600 17px var(--d);color:#86868b}
.x-home .tile h3{margin:6px 0 12px;font:700 40px/1.05 var(--d);letter-spacing:-.045em}
.x-home .tile p{margin:0;color:#86868b;font-size:19px;max-width:360px}
.x-home .tile .art{margin-top:auto;font-size:64px;display:flex;gap:22px;align-items:center}
.x-home .tile .art .big{font:700 96px/1 var(--d);letter-spacing:-.06em}
.x-home .final{padding:180px 22px;text-align:center}
.x-home .final h2{margin:0 0 30px;font:700 clamp(56px,10vw,140px)/.92 var(--d);letter-spacing:-.06em}
.x-home .x-unused-footer{border-top:1px solid #1d1d1f;padding:30px 22px;color:#6e6e73;font-size:12px}
.x-home .x-unused-footer .in{max-width:1080px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.x-home .x-unused-footer nav{position:static;height:auto;background:none;border:0;display:flex;gap:18px;backdrop-filter:none}
.x-home .rv{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1)}
.x-home .rv.in{opacity:1;transform:none}
.x-home .rv.d1{transition-delay:.1s}
.x-home .rv.d2{transition-delay:.2s}
.x-home .rv.d3{transition-delay:.3s}
@media(max-width:820px){
.x-home .hero{padding-top:110px}
.x-home .eyebrow{font-size:17px}
.x-home h1{font-size:56px}
.x-home .stage{height:120vh;margin-top:50px}
.x-home .device{aspect-ratio:9/14;width:86vw}
.x-home .ui{grid-template-columns:1fr}
.x-home .ui-side,.x-home .ui-co{display:none}
.x-home .ui-main{padding:18px}
.x-home .story{grid-template-columns:1fr;padding:80px 22px;gap:0}
.x-home .story-l{top:60px;height:auto;padding:10px 0 20px;background:#fff;z-index:2}
.x-home .phone{width:200px;height:400px;border-radius:38px;padding:8px}
.x-home .screen{border-radius:31px}
.x-home .scr{padding:38px 12px 12px;font-size:12px}
.x-home .scr h4{font-size:16px}
.x-home .story-r .step{min-height:60vh}
.x-home .step p{font-size:18px}
.x-home .nums{padding:110px 22px}
.x-home .nrow{grid-template-columns:1fr;gap:44px}
.x-home .tiles{grid-template-columns:1fr;padding-bottom:110px}
.x-home .tile{min-height:340px;padding:32px}
.x-home .tile h3{font-size:32px}
.x-home .final{padding:120px 22px}

}
.x-home .hero{padding:120px 22px 40px;text-align:left}
.x-home .hero-grid{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.x-home .hero h1{margin:0;font-size:clamp(56px,7.4vw,112px)}
.x-home .hero p{margin:24px 0 32px;max-width:520px}
.x-home .hero .cta{justify-content:flex-start}
.x-home .trust{list-style:none;display:flex;gap:22px;flex-wrap:wrap;margin:30px 0 0;padding:0;color:#86868b;font-size:15px}
.x-home .trust i{color:#fff;margin-right:8px}
.x-home .lock{display:grid;place-items:center}
.x-home .lock-phone{width:340px;height:690px;border-radius:58px;padding:13px;background:linear-gradient(145deg,#3a3a3c,#111);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 60px 120px -40px rgba(255,255,255,.18)}
.x-home .lock-screen{height:100%;border-radius:46px;overflow:hidden;position:relative;padding:70px 14px 0;background:radial-gradient(120% 80% at 30% 0%,#3b3b44 0%,#121216 45%,#050506 100%)}
.x-home .lock-screen::before{content:"";position:absolute;top:12px;left:50%;width:110px;height:32px;margin-left:-55px;border-radius:20px;background:#000}
.x-home .lock-time{text-align:center;font:600 84px/1 var(--d);letter-spacing:-.04em;color:rgba(255,255,255,.92);margin-bottom:34px}
.x-home .lock-time small{display:block;font:600 17px var(--s);letter-spacing:-.01em;margin-bottom:6px;color:rgba(255,255,255,.75)}
.x-home .notes{display:grid;gap:9px}
.x-home .note{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:20px;background:rgba(40,40,46,.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);opacity:0;transform:translateY(-14px) scale(.96);animation:xh-note 9s cubic-bezier(.2,.8,.2,1) infinite;animation-delay:calc(var(--i)*.9s)}
@keyframes xh-note{0%{opacity:0;transform:translateY(-14px) scale(.96)}6%,82%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(6px) scale(.98)}}
.x-home .note .app{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:10px;font-size:20px;--mono-ink:#fff}
.x-home .app.ig{background:radial-gradient(130% 130% at 25% 105%,#ffd776,#fd8d32 25%,#e1306c 50%,#833ab4 85%);--mono-ink:#fff}
.x-home .app.ig i,.x-home .app.tt i,.x-home .app.yt i,.x-home .app.sp i{background:#fff!important;filter:none!important}
.x-home .app.tt{background:#000;box-shadow:inset 0 0 0 1px #333}
.x-home .app.yt{background:#ff0000}
.x-home .app.sp{background:#1ed760}
.x-home .app.sp i{background:#000!important}
.x-home .note > div{flex:1;min-width:0;font-size:13.5px;line-height:1.3}
.x-home .note b{font-weight:600}
.x-home .note em{float:right;font-style:normal;color:rgba(255,255,255,.5);font-size:12px}
.x-home .note p{margin:2px 0 0;color:rgba(255,255,255,.85)}
.x-home .note strong{color:#fff}
.x-home .cat{max-width:1080px;margin:0 auto;padding:40px 22px 140px}
.x-home .cat h2,.x-home .faq h2{margin:0 0 14px;font:700 clamp(40px,5.6vw,72px)/1 var(--d);letter-spacing:-.05em}
.x-home .cat > p,.x-home .faq > p{margin:0 0 50px;color:#86868b;font-size:21px}
.x-home .cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.x-home .cc{padding:28px;border-radius:26px;background:#111;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:transform .35s cubic-bezier(.2,.8,.2,1),background .25s}
.x-home .cc:hover{transform:translateY(-4px);background:#161618}
.x-home .cc .ci{font-size:34px;margin-bottom:22px;display:block}
.x-home .cc h3{margin:0 0 14px;font:700 24px var(--d);letter-spacing:-.03em}
.x-home .cc ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.x-home .cc li{display:flex;justify-content:space-between;color:#a1a1a6;font-size:15px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.07)}
.x-home .cc li b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.x-home .cc li:last-child{border:0;padding:0}
.x-home .cnote{margin-top:22px;color:#6e6e73;font-size:13px}
.x-home .faq{max-width:820px;margin:0 auto;padding:0 22px 140px}
.x-home .faq details{border-bottom:1px solid rgba(255,255,255,.12)}
.x-home .faq summary{list-style:none;cursor:pointer;padding:26px 40px 26px 0;position:relative;font:600 21px var(--d);letter-spacing:-.02em}
.x-home .faq summary::-webkit-details-marker{display:none}
.x-home .faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font:300 30px var(--s);color:#86868b;transition:transform .3s}
.x-home .faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.x-home .faq details p{margin:0 0 26px;color:#a1a1a6;font-size:18px;line-height:1.55}
@media(max-width:900px){.x-home .hero{padding:96px 22px 20px;text-align:center}
.x-home .hero-grid{grid-template-columns:1fr;gap:20px}
.x-home .hero p{margin:20px auto 28px}
.x-home .hero .cta{justify-content:center}
.x-home .trust{justify-content:center;gap:14px;font-size:14px}
.x-home .lock-phone{width:280px;height:560px;border-radius:48px;padding:10px}
.x-home .lock-screen{border-radius:39px;padding-top:56px}
.x-home .lock-time{font-size:64px;margin-bottom:24px}
.x-home .note{padding:9px 10px}
.x-home .note > div{font-size:12px}
.x-home .note .app{width:32px;height:32px;flex-basis:32px;font-size:17px}
.x-home .cgrid{grid-template-columns:1fr}
.x-home .cat{padding-bottom:100px}
.x-home .cat > p,.x-home .faq > p{font-size:18px;margin-bottom:34px}
.x-home .faq summary{font-size:18px}
.x-home .faq details p{font-size:16px}

}
.x-home .lock{text-align:left}
.x-home .hero .note p{margin:2px 0 0;max-width:none;font-size:13.5px;line-height:1.35;color:rgba(255,255,255,.85);letter-spacing:-.01em}
@media(max-width:900px){.x-home .hero .note p{font-size:12px}}
.x-home .ip{position:relative;width:360px;aspect-ratio:9/19.5;border-radius:64px;padding:11px;background:linear-gradient(135deg,#8e8a84 0%,#5b5853 18%,#2d2c2a 50%,#57544f 82%,#a19c95 100%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35),inset 0 0 0 4px #1b1b1a,0 70px 140px -40px rgba(255,255,255,.22),0 30px 60px -20px #000}
.x-home .ip::before{content:"";position:absolute;inset:4px;border-radius:60px;background:#000}
.x-home .ip-btn{position:absolute;width:4px;border-radius:2px;background:linear-gradient(90deg,#3a3936,#8a857e)}
.x-home .ip-btn.ab{left:-3px;top:17%;height:30px}
.x-home .ip-btn.vu{left:-3px;top:25%;height:58px}
.x-home .ip-btn.vd{left:-3px;top:34%;height:58px}
.x-home .ip-btn.pw{right:-3px;top:27%;height:92px;background:linear-gradient(270deg,#3a3936,#8a857e)}
.x-home .ip-btn.cam{right:-3px;top:55%;height:56px;background:linear-gradient(270deg,#3a3936,#8a857e)}
.x-home .ip-screen{position:relative;height:100%;border-radius:54px;overflow:hidden;color:#fff;font-family:-apple-system,"SF Pro Display",system-ui,sans-serif}
.x-home .wall{position:absolute;inset:-10%;background:radial-gradient(60% 50% at 20% 20%,#ff5f6d 0%,transparent 60%),radial-gradient(60% 55% at 85% 35%,#7b4dff 0%,transparent 60%),radial-gradient(70% 60% at 40% 90%,#ff9a3c 0%,transparent 60%),radial-gradient(80% 60% at 70% 75%,#1f6bff 0%,transparent 65%),#120a2a;filter:saturate(1.15);animation:xh-wall 18s ease-in-out infinite alternate}
@keyframes xh-wall{to{transform:scale(1.12) rotate(4deg)}}
.x-home .wall::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.35))}
.x-home .sbar{position:absolute;top:17px;left:30px;right:26px;display:flex;justify-content:space-between;font:600 14.5px -apple-system,system-ui;z-index:3}
.x-home .si{display:flex;gap:6px;align-items:center;font-size:12px}
.x-home .batt{display:inline-block;width:24px;height:12px;border-radius:4px;box-shadow:inset 0 0 0 1.2px rgba(255,255,255,.55);padding:2px;position:relative}
.x-home .batt i{display:block;height:100%;width:80%;border-radius:2px;background:#fff}
.x-home .batt::after{content:"";position:absolute;right:-3px;top:4px;width:2px;height:4px;border-radius:0 1px 1px 0;background:rgba(255,255,255,.55)}
.x-home .island{position:absolute;top:13px;left:50%;width:118px;height:35px;margin-left:-59px;border-radius:20px;background:#000;z-index:4}
.x-home .lk{position:absolute;top:62px;left:0;right:0;text-align:center;font-size:15px;opacity:.9;z-index:2}
.x-home .ldate{position:absolute;top:86px;left:0;right:0;text-align:center;font:600 19px -apple-system,system-ui;opacity:.92;z-index:2}
.x-home .lclock{position:absolute;top:104px;left:0;right:0;text-align:center;font:700 98px/1 "SF Pro Rounded",-apple-system,system-ui;letter-spacing:-.02em;z-index:2;color:rgba(255,255,255,.95);text-shadow:0 2px 30px rgba(0,0,0,.15)}
.x-home .ip .notes{position:absolute;left:12px;right:12px;bottom:118px;display:flex;flex-direction:column-reverse;gap:8px;z-index:2}
.x-home .ip .note{padding:12px 13px;border-radius:24px;background:rgba(245,245,250,.22);backdrop-filter:blur(30px) saturate(1.8);-webkit-backdrop-filter:blur(30px) saturate(1.8);box-shadow:none}
.x-home .ip .note b{font:600 14.5px -apple-system,system-ui}
.x-home .ip .note em{color:rgba(255,255,255,.7);font-size:13px}
.x-home .hero .ip .note p{font:400 14.5px/1.3 -apple-system,system-ui;color:#fff}
.x-home .ip .note strong{font-weight:600}
.x-home .ip .note .app{width:38px;height:38px;flex-basis:38px;border-radius:9px}
.x-home .lbtns{position:absolute;left:44px;right:44px;bottom:40px;display:flex;justify-content:space-between;z-index:2}
.x-home .lbtns span{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:rgba(30,30,40,.4);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);font-size:18px}
.x-home .hind{position:absolute;bottom:9px;left:50%;width:140px;height:5px;margin-left:-70px;border-radius:3px;background:#fff;z-index:2}
@media(max-width:900px){.x-home .ip{width:300px;border-radius:54px;padding:9px}
.x-home .ip::before{border-radius:50px}
.x-home .ip-screen{border-radius:46px}
.x-home .lclock{font-size:80px;top:98px}
.x-home .ldate{font-size:16px;top:80px}
.x-home .lk{top:58px}
.x-home .ip .note{padding:10px 11px;border-radius:20px}
.x-home .hero .ip .note p,.x-home .ip .note b{font-size:12.5px}
.x-home .ip .notes{bottom:104px}
.x-home .lbtns{bottom:34px;left:36px;right:36px}
.x-home .lbtns span{width:44px;height:44px;font-size:16px}
.x-home .island{width:100px;height:30px;margin-left:-50px}}
.x-home .sec{max-width:1080px;margin:0 auto;padding:140px 22px}
.x-home .sec h2{margin:0 0 16px;font:700 clamp(40px,5.6vw,72px)/1 var(--d);letter-spacing:-.05em}
.x-home .sec h2 span{color:#6e6e73}
.x-home .sec .lead{margin:0 0 56px;max-width:620px;color:#86868b;font-size:21px}
.x-home .track-card{border-radius:32px;background:#0d0d0e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);padding:12px}
.x-home .trow{display:grid;grid-template-columns:auto 1fr auto auto;gap:18px;align-items:center;padding:18px 20px;border-radius:22px}
.x-home .trow+.trow{border-top:1px solid rgba(255,255,255,.06)}
.x-home .trow .ti{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#1c1c1e;font-size:22px}
.x-home .trow b{display:block;font:600 16px var(--d)}
.x-home .trow small{color:#86868b;font-size:13px}
.x-home .tbar{height:6px;border-radius:9px;background:#2a2a2d;overflow:hidden;margin-top:9px}
.x-home .tbar i{display:block;height:100%;width:0;border-radius:9px;background:#fff;transition:width 2.4s cubic-bezier(.2,.8,.2,1)}
.x-home .track-card.in .tbar i{width:var(--w)}
.x-home .pct{font:600 15px var(--d);font-variant-numeric:tabular-nums;min-width:52px;text-align:right}
.x-home .st{padding:5px 11px;border-radius:999px;font-size:12px;font-weight:600}
.x-home .st.run{background:rgba(10,132,255,.16);color:#64a8ff}
.x-home .st.done{background:rgba(48,209,88,.15);color:#30d158}
.x-home .st.q{background:rgba(255,214,10,.14);color:#ffd60a}
.x-home .pay{display:grid;grid-template-columns:1.2fr 1fr;gap:20px}
.x-home .pcard{border-radius:32px;padding:40px;min-height:380px;display:flex;flex-direction:column}
.x-home .pcard.lt{background:#f5f5f7;color:#1d1d1f}
.x-home .pcard.dk{background:#161617}
.x-home .pcard .k{font:600 17px var(--d);color:#86868b}
.x-home .pcard h3{margin:6px 0 12px;font:700 38px/1.05 var(--d);letter-spacing:-.045em}
.x-home .pcard p{margin:0;color:#86868b;font-size:18px}
.x-home .methods{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.x-home .methods span{display:flex;align-items:center;gap:8px;height:48px;padding:0 18px;border-radius:14px;background:#fff;color:#1d1d1f;font-weight:600;font-size:15px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.x-home .methods span i{font-size:20px}
.x-home .bonus{margin-top:auto;font:700 120px/1 var(--d);letter-spacing:-.06em}
.x-home .bonus small{display:block;font:600 17px var(--s);letter-spacing:0;color:#86868b;margin-top:10px}
.x-home .api{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:center}
.x-home .code{border-radius:24px;background:#0d0d0e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);overflow:hidden;font:13.5px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace}
.x-home .code .bar{display:flex;gap:7px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.x-home .code .bar i{width:11px;height:11px;border-radius:50%;background:#3a3a3c}
.x-home .code pre{margin:0;padding:22px 24px;color:#d2d2d7;white-space:pre;overflow-x:auto}
.x-home .code .c{color:#6e6e73}
.x-home .code .s{color:#a5e8b0}
.x-home .code .n{color:#ffb86b}
.x-home .code .k{color:#ff7ab2}
.x-home .feat-list{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px;color:#a1a1a6;font-size:17px}
.x-home .feat-list i{color:#fff;width:24px}
.x-home .chat{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.x-home .bub{max-width:78%;padding:12px 16px;border-radius:22px;font-size:16px;line-height:1.4;opacity:0;transform:translateY(12px) scale(.98);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1)}
.x-home .bub.me{align-self:flex-end;background:#0a84ff;color:#fff;border-bottom-right-radius:6px}
.x-home .bub.them{align-self:flex-start;background:#262628;border-bottom-left-radius:6px}
.x-home .chat.in .bub{opacity:1;transform:none}
.x-home .chat.in .bub:nth-child(2){transition-delay:.7s}
.x-home .chat.in .bub:nth-child(3){transition-delay:1.4s}
.x-home .chat.in .bub:nth-child(4){transition-delay:2.1s}
.x-home .center{text-align:center}
.x-home .center .lead{margin-left:auto;margin-right:auto}
@media(max-width:900px){.x-home .sec{padding:100px 22px}
.x-home .sec .lead{font-size:18px;margin-bottom:36px}
.x-home .trow{grid-template-columns:auto 1fr auto;gap:12px;padding:14px}
.x-home .trow .pct{display:none}
.x-home .pay,.x-home .api{grid-template-columns:1fr;gap:20px}
.x-home .pcard{min-height:300px;padding:30px}
.x-home .pcard h3{font-size:30px}
.x-home .bonus{font-size:90px}}
@media(max-width:900px){.x-home .stage{display:none}
.x-home .logos{padding:30px 0 70px}
.x-home .story{display:flex;flex-direction:column;padding:80px 22px 90px}
.x-home .story-l{position:relative;top:0;order:2;height:auto;padding:30px 0 0;background:none}
.x-home .story-r{order:1}
.x-home .story-r .step{min-height:0;opacity:1;padding:0 0 26px}
.x-home .story-r .step+.step{border-top:1px solid #e5e5e7;padding-top:26px}
.x-home .step h2{font-size:36px;margin-bottom:10px}
.x-home .phone{width:230px;height:470px;border-radius:44px;padding:9px}
.x-home .screen{border-radius:36px}
.x-home .scr{padding:44px 14px 14px}
.x-home .scr h4{font-size:18px}

}
.x-home .ip .scn{position:absolute;inset:0;padding:58px 16px 0;opacity:0;animation:16s cubic-bezier(.2,.8,.2,1) infinite}
.x-home .ip .s1{background:#000;animation-name:xh-sc1}
.x-home .ip .s2{background:#000;animation-name:xh-sc2}
.x-home .ip .s3{background:#000;animation-name:xh-sc3}
.x-home .ip .s4{background:#0f0f0f;animation-name:xh-sc4}
@keyframes xh-sc1{0%,21%{opacity:1;transform:none}24%,97%{opacity:0;transform:translateX(-12%)}100%{opacity:1;transform:none}}
@keyframes xh-sc2{0%,21%{opacity:0;transform:translateX(12%)}25%,46%{opacity:1;transform:none}49%,100%{opacity:0;transform:translateX(-12%)}}
@keyframes xh-sc3{0%,46%{opacity:0;transform:translateX(12%)}50%,71%{opacity:1;transform:none}74%,100%{opacity:0;transform:translateX(-12%)}}
@keyframes xh-sc4{0%,71%{opacity:0;transform:translateX(12%)}75%,96%{opacity:1;transform:none}99%,100%{opacity:0}}
.x-home .ip .sbar{z-index:5}
.x-home .ip .island{z-index:6}
.x-home .app-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:13px}
.x-home .app-top b{font:800 17px var(--d);letter-spacing:-.04em}
.x-home .app-top span{padding:5px 10px;border-radius:999px;background:#1c1c1e;font-weight:600}
.x-home .s1 h5{margin:0 0 10px;font:700 22px var(--d);letter-spacing:-.03em}
.x-home .mrow{display:flex;gap:10px;align-items:center;padding:11px;border-radius:14px;background:#141415;margin-bottom:12px;font-size:12px}
.x-home .mrow.on{box-shadow:inset 0 0 0 1.5px #fff}
.x-home .mrow>i{font-size:22px}
.x-home .mrow b{display:block;font-size:13px}
.x-home .mrow small{color:#86868b}
.x-home .mrow em{margin-left:auto;font-style:normal;font-weight:700}
.x-home .mlab{color:#86868b;font-size:11.5px;margin:0 0 5px}
.x-home .mfld{height:38px;display:flex;align-items:center;padding:0 12px;border-radius:11px;background:#141415;margin-bottom:10px;font-size:13px;overflow:hidden;white-space:nowrap}
.x-home .s1 .type{display:inline-block;overflow:hidden;white-space:nowrap;max-width:0;border-right:1.5px solid #fff;animation:xh-typ 16s steps(23) infinite}
@keyframes xh-typ{0%,3%{max-width:0}10%,100%{max-width:24ch}}
.x-home .mtot{display:flex;justify-content:space-between;align-items:baseline;margin:12px 0}
.x-home .mtot b{font:700 26px var(--d);letter-spacing:-.04em}
.x-home .mbtn{height:46px;border-radius:999px;background:#fff;color:#000;display:grid;place-items:center;font-weight:700;font-size:15px;animation:xh-mbtn 16s infinite}
@keyframes xh-mbtn{0%,12%{transform:none}13%{transform:scale(.93);opacity:.8}14.5%,100%{transform:none;opacity:1}}
.x-home .mok{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(0,0,0,.82);backdrop-filter:blur(8px);opacity:0;animation:xh-mok 16s infinite}
@keyframes xh-mok{0%,14%{opacity:0}15.5%,22%{opacity:1}24%,100%{opacity:0}}
.x-home .mok-c{width:64px;height:64px;border-radius:50%;background:#fff;display:grid;place-items:center;margin-bottom:6px;transform:scale(.6);animation:xh-mokc 16s infinite}
@keyframes xh-mokc{0%,14%{transform:scale(.6)}17%,100%{transform:none}}
.x-home .mok-c svg{width:32px;height:32px;fill:none;stroke:#000;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.x-home .mok b{font:700 19px var(--d)}
.x-home .mok small{color:#86868b}
@property --ig{syntax:"<integer>";inherits:false;initial-value:1204}
@property --tv{syntax:"<integer>";inherits:false;initial-value:1204}
@property --ys{syntax:"<integer>";inherits:false;initial-value:820}
@property --bal{syntax:"<integer>";inherits:false;initial-value:0}
.x-home .cnt{font-variant-numeric:tabular-nums}
.x-home .c-ig{animation:xh-cig 16s cubic-bezier(.2,.8,.2,1) infinite;counter-reset:n var(--ig)}
.x-home .c-ig::after{content:counter(n)}
@keyframes xh-cig{0%,26%{--ig:1204}44%,100%{--ig:3704}}
.x-home .c-tv{animation:xh-ctv 16s cubic-bezier(.2,.8,.2,1) infinite;counter-reset:n var(--tv)}
.x-home .c-tv::after{content:counter(n)}
@keyframes xh-ctv{0%,51%{--tv:1204}69%,100%{--tv:10412}}
.x-home .c-ys{animation:xh-cys 16s cubic-bezier(.2,.8,.2,1) infinite;counter-reset:n var(--ys)}
.x-home .c-ys::after{content:counter(n)}
@keyframes xh-cys{0%,76%{--ys:820}94%,100%{--ys:1320}}
.x-home .ban{position:absolute;left:10px;right:10px;top:52px;z-index:4;display:flex;gap:10px;align-items:center;padding:11px 12px;border-radius:20px;background:rgba(60,60,66,.75);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);font-size:12.5px;transform:translateY(-140%);opacity:0}
.x-home .ban p{margin:2px 0 0;color:#eee}
.x-home .ban b{font-size:13px}
.x-home .s2 .ban{animation:xh-ban2 16s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes xh-ban2{0%,30%{transform:translateY(-140%);opacity:0}32%,42%{transform:none;opacity:1}45%,100%{transform:translateY(-140%);opacity:0}}
.x-home .s3 .ban{animation:xh-ban3 16s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes xh-ban3{0%,62%{transform:translateY(-140%);opacity:0}64%,70%{transform:none;opacity:1}72%,100%{transform:translateY(-140%);opacity:0}}
.x-home .s4 .ban{animation:xh-ban4 16s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes xh-ban4{0%,86%{transform:translateY(-140%);opacity:0}88%,95%{transform:none;opacity:1}97%,100%{transform:translateY(-140%);opacity:0}}
.x-home .ban .app{width:34px;height:34px;flex-basis:34px;border-radius:8px}
@keyframes xh-ytb{0%,76%{height:6%}90%,100%{height:var(--h)}}
@media(max-width:900px){.x-home .ip .scn{padding:48px 12px 0;font-size:12px}
.x-home .s1 h5{font-size:18px}
.x-home .mfld{height:32px}
.x-home .mbtn{height:40px}
.x-home .ig-av{width:58px;height:58px;flex-basis:58px}
.x-home .yt-big b{font-size:36px}
.x-home .yt-chart{height:80px}
.x-home .tt-rail{bottom:100px}}
.x-home .mbp-screen{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#0a0a0a}
.x-home .mbp-notch{position:absolute;top:0;left:50%;width:120px;height:16px;margin-left:-60px;border-radius:0 0 10px 10px;background:#1a1a1c;z-index:5}
.x-home .mb3 .ui{height:100%}
.x-home .cur{position:absolute;z-index:6;width:22px;height:22px;left:62%;top:70%;animation:xh-cur 9s cubic-bezier(.65,0,.35,1) infinite}
.x-home .cur svg{width:100%;height:100%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
@keyframes xh-cur{0%{left:62%;top:72%}12%{left:24%;top:30%}16%{left:24%;top:30%;transform:scale(.85)}18%{transform:none}30%{left:44%;top:42%}34%{left:44%;top:42%;transform:scale(.85)}36%{transform:none}50%{left:86%;top:20%}62%{left:86%;top:20%}74%{left:86%;top:87%}78%{left:86%;top:87%;transform:scale(.85)}80%{transform:none}100%{left:62%;top:72%}}
.x-home .mb3 .ui-plats span:first-child{animation:xh-pk 9s infinite}
@keyframes xh-pk{0%,15%{background:#151515}16%,100%{background:#fff}}
.x-home .mb3 .ui-svc.on{animation:xh-sv 9s infinite}
@keyframes xh-sv{0%,33%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}34%,100%{box-shadow:inset 0 0 0 1.5px #fff}}
.x-home .mb3 .ui-btn{animation:xh-ub 9s infinite}
@keyframes xh-ub{0%,77%{transform:none}78%{transform:scale(.94)}80%,100%{transform:none}}
.x-home .mtoast{position:absolute;z-index:7;right:18px;bottom:18px;display:flex;gap:10px;align-items:center;padding:12px 16px 12px 12px;border-radius:16px;background:#1c1c1e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),0 20px 40px -10px #000;font-size:13px;opacity:0;transform:translateY(16px);animation:xh-mt 9s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes xh-mt{0%,80%{opacity:0;transform:translateY(16px)}84%,96%{opacity:1;transform:none}100%{opacity:0}}
.x-home .mtoast span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#30d158}
.x-home .mtoast svg{width:16px;height:16px;fill:none;stroke:#000;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.x-home .mtoast b{display:block}
.x-home .mtoast small{color:#86868b}
@media(min-width:901px){.x-home .story-r .step{min-height:62vh}}
.x-home .scr .fld{display:flex;flex-direction:column;justify-content:center;height:auto;min-height:46px;padding:7px 14px}
.x-home .scr .fld small{color:#86868b;font-size:11px}
.x-home .scr .type{display:inline-block;overflow:hidden;white-space:nowrap;max-width:0;vertical-align:bottom}
.x-home .scr.on .type{animation:xh-gtyp .9s steps(14) forwards}
.x-home .scr.on .t2{animation-delay:.9s}
.x-home .scr.on .t3{animation-delay:1.8s}
@keyframes xh-gtyp{to{max-width:24ch}}
.x-home .scr .pop{transition:transform .2s}
.x-home .scr.on .pop{animation:xh-gpop .5s 2.8s}
@keyframes xh-gpop{50%{transform:scale(.94)}}
.x-home .welcome{margin-top:14px;text-align:center;font-weight:600;opacity:0}
.x-home .scr.on .welcome{animation:xh-gin .5s 3.3s forwards}
@keyframes xh-gin{to{opacity:1}}
.x-home .balbox{padding:14px;border-radius:16px;background:#1a1a1a;margin-bottom:12px}
.x-home .balbox small{display:block;color:#86868b;font-size:11.5px}
.x-home .balbox b{font:700 30px var(--d);letter-spacing:-.04em}
.x-home .c-bal{counter-reset:n var(--bal)}
.x-home .c-bal::before{content:"$"}
.x-home .c-bal::after{content:counter(n) ".00"}
.x-home .scr.on .c-bal{animation:xh-gbal 1.2s 1.6s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes xh-gbal{to{--bal:25}}
.x-home .amts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.x-home .amts span{height:36px;border-radius:10px;background:#1a1a1a;display:grid;place-items:center;font-weight:600;font-size:13px}
.x-home .amts .on{background:#fff;color:#000}
.x-home .paym{display:grid;gap:6px}
.x-home .pm{display:flex;align-items:center;gap:6px;height:40px;padding:0 10px;border-radius:12px;background:#1a1a1a;font-size:12px}
.x-home .pm.on{box-shadow:inset 0 0 0 1.5px #fff}
.x-home .pm svg{height:16px;width:auto}
.x-home .pm .coin svg{width:18px;height:18px}
.x-home .pm em{margin-left:auto;font-style:normal;color:#a1a1a6}
.x-home .pm:first-child svg{height:14px;padding:0 3px;background:#fff;border-radius:3px;width:34px}
.x-home .ord{display:flex;gap:10px;align-items:center;padding:12px;border-radius:14px;background:#1a1a1a;margin-bottom:8px;font-size:12px}
.x-home .ord>i{font-size:20px}
.x-home .ord>div{flex:1;min-width:0}
.x-home .ord b{display:block;font-size:12.5px;margin-bottom:6px}
.x-home .ob{display:block;height:5px;border-radius:9px;background:#333;overflow:hidden}
.x-home .ob i{display:block;height:100%;width:0;border-radius:9px;background:#fff;transition:width 2s cubic-bezier(.2,.8,.2,1) .3s}
.x-home .scr.on .ob i{width:var(--w)}
.x-home .ord em{font-style:normal;padding:4px 8px;border-radius:999px;font-size:10.5px;font-weight:600;white-space:nowrap}
.x-home .ord .run{background:rgba(10,132,255,.18);color:#64a8ff}
.x-home .ord .done{background:rgba(48,209,88,.16);color:#30d158}
.x-home .ord .q{background:rgba(255,214,10,.15);color:#ffd60a}
.x-home .methods{gap:10px}
.x-home .pmk{display:grid;place-items:center;height:56px;min-width:92px;padding:0 18px;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08),inset 0 0 0 1px rgba(0,0,0,.06)}
.x-home .pmk svg{height:24px;width:auto}
.x-home .pmk:nth-child(2) svg{height:30px}
.x-home .bonus{margin-top:auto;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.x-home .bonus b{font:700 72px/1 var(--d);letter-spacing:-.05em;color:#fff}
.x-home .bonus span{color:#a1a1a6;font-size:16px}
.x-home .coins{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.x-home .cn{display:flex;align-items:center;gap:7px;height:38px;padding:0 12px 0 6px;border-radius:999px;background:#232325;font-size:12.5px;font-weight:600}
.x-home .cn svg{width:26px;height:26px}
.x-home .cn em{font-style:normal}
.x-home .ntiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left}
.x-home .nt{position:relative;overflow:hidden;padding:28px 28px 0;min-height:250px;border-radius:28px;background:linear-gradient(180deg,#141416,#0b0b0c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);display:flex;flex-direction:column}
.x-home .nt-top{display:flex;align-items:center;gap:9px;color:#a1a1a6;font-size:15px;font-weight:500}
.x-home .live{width:8px;height:8px;border-radius:50%;background:#30d158;box-shadow:0 0 0 0 rgba(48,209,88,.6);animation:xh-live 2s infinite}
@keyframes xh-live{70%{box-shadow:0 0 0 8px rgba(48,209,88,0)}}
.x-home .nt strong{display:block;margin:14px 0 0;font:700 clamp(46px,5.4vw,72px)/1 var(--d);letter-spacing:-.055em;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff 30%,#8a8a8f);-webkit-background-clip:text;background-clip:text;color:transparent}
.x-home .spark{display:block;width:calc(100% + 56px);height:70px;margin:auto -28px 0}
.x-home .spark path{fill:none;stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:400;stroke-dashoffset:400;opacity:.55}
.x-home .nt.in .spark path{animation:xh-spk 2.4s .3s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes xh-spk{to{stroke-dashoffset:0}}
.x-home .nt-plats{display:flex;align-items:center;gap:10px;margin:auto 0 28px;font-size:22px}
.x-home .nt-plats span{color:#86868b;font-size:14px;font-weight:600}
.x-home .nums h2{margin-bottom:46px}
@media(max-width:900px){.x-home .ntiles{grid-template-columns:1fr}
.x-home .nt{min-height:200px}}
.x-home .ghead{text-align:center;padding:120px 22px 0}
.x-home .ghead small{display:block;color:#86868b;font-size:17px;font-weight:600;margin-bottom:10px}
.x-home .ghead h2{margin:0 0 30px;font:700 clamp(40px,6vw,80px)/1 var(--d);letter-spacing:-.05em;color:#1d1d1f}
.x-home .gpath{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;font-size:15px;font-weight:600;color:#1d1d1f}
.x-home .gpath span{padding:10px 18px;border-radius:999px;background:#f5f5f7}
.x-home .gpath i{position:relative;width:46px;height:2px;background:#d2d2d7;overflow:hidden}
.x-home .gpath i::after{content:"";position:absolute;inset:0;background:#1d1d1f;transform:translateX(-100%);animation:xh-gp 2.4s cubic-bezier(.65,0,.35,1) infinite}
.x-home .gpath i:nth-of-type(2)::after{animation-delay:1.2s}
@keyframes xh-gp{60%,100%{transform:translateX(100%)}}
@media(max-width:900px){.x-home .ghead{padding-top:80px}
.x-home .gpath{gap:8px;font-size:13px}
.x-home .gpath i{width:20px}}
.x-home .hero .ip-screen p{margin:0;max-width:none;font-size:inherit;line-height:1.3;letter-spacing:-.01em}
.x-home .hero .ban p{margin:2px 0 0;font-size:13px;color:rgba(255,255,255,.88)}
.x-home .ban>div{flex:1;min-width:0;line-height:1.25}
.x-home .ban .app{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:10px;font-size:20px;color:#fff;--mono-ink:#fff}
.x-home .ban .app.ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.x-home .ban .app.tt{background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.x-home .ban .app.yt{background:#ff0033}
.x-home .ip .scn{font-size:13px}
.x-home .cnt.js::after,.x-home .cnt.js::before{content:none}
.x-home .s1 .mrec{margin-top:18px;padding:12px;border-radius:14px;background:#141415}
.x-home .mrec small{display:block;color:#86868b;margin-bottom:8px}
.x-home .mrec div{display:flex;justify-content:space-between;padding:5px 0;font-size:12.5px}
.x-home .mrec em{font-style:normal;padding:2px 8px;border-radius:99px;font-size:11px;background:rgba(48,209,88,.16);color:#30d158}
.x-home .ip .scn{padding:54px 0 0}
.x-home .ip .s1{padding:58px 16px 0}
.x-home .gl{display:block;width:100%;height:auto}
.x-home .ban{top:50px;padding:12px 13px;border-radius:22px;background:rgba(48,48,54,.78);box-shadow:0 10px 30px -8px rgba(0,0,0,.6)}
.x-home .ban .bt{display:flex;justify-content:space-between;align-items:baseline}
.x-home .ban .bt b{font-size:13.5px;font-weight:600}
.x-home .ban .bt em{font-style:normal;font-size:11.5px;color:rgba(255,255,255,.55)}
.x-home .hero .ban p{font-size:13px;line-height:1.3}
.x-home .tabbar{position:absolute;left:0;right:0;bottom:0;height:72px;padding:10px 18px 0;display:flex;justify-content:space-between;align-items:flex-start;background:#000;border-top:1px solid #1f1f1f;font-size:21px;z-index:3}
.x-home .tabbar .me{width:24px;height:24px;border-radius:50%;background:#000;box-shadow:0 0 0 1.5px #fff;display:grid;place-items:center;padding:3px}
.x-home .tabbar.tt span,.x-home .tabbar.yt span{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9.5px;color:#8a8a8a}
.x-home .tabbar.tt i,.x-home .tabbar.yt i{font-size:19px}
.x-home .tabbar .on{color:#fff}
.x-home .tabbar .plus{width:42px;height:28px;border-radius:9px;background:#fff;color:#000;display:grid!important;place-items:center;box-shadow:-3px 0 0 #25f4ee,3px 0 0 #fe2c55}
.x-home .tabbar .plus i{font-size:15px}
.x-home .grid3x{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px}
.x-home .pt{position:relative;aspect-ratio:3/4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;overflow:hidden;text-align:center;padding:8px;line-height:1.05}
.x-home .pt b{font:700 12px var(--d);letter-spacing:-.03em}
.x-home .pt .big{font-size:22px;letter-spacing:-.05em}
.x-home .pt small{font-size:8.5px;opacity:.7}
.x-home .pt .gl{width:78%}
.x-home .pt-k{background:#000;color:#fff;box-shadow:inset 0 0 0 1px #1a1a1a}
.x-home .pt-w{background:#fff;color:#000}
.x-home .pt-l{background:#e8e8ed;color:#000}
.x-home .pt-g{background:radial-gradient(90% 70% at 30% 20%,#5a5a5f,#1c1c1e);color:#fff}
.x-home .pt-d{background:linear-gradient(160deg,#2c2c2e,#0c0c0d);color:#fff}
.x-home .pt .ln{width:86%}
.x-home .pt .ln path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.x-home .pt .bub{padding:5px 8px;border-radius:12px 12px 12px 3px;background:#0a84ff;font-size:9px;font-weight:600}
.x-home .pin{position:absolute;top:6px;right:6px;font-size:9px;transform:rotate(30deg);color:inherit;opacity:.9}
.x-home .pv{position:absolute;left:5px;bottom:4px;display:flex;align-items:center;gap:3px;font-size:10px;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.x-home .pv i{font-size:7px}
.x-home .pv b{font:inherit}
.x-home .s2{background:#000}
.x-home .ig-top{display:flex;justify-content:space-between;align-items:center;padding:4px 14px 12px;font-size:19px}
.x-home .ig-top>span:first-child{display:flex;align-items:center;gap:5px}
.x-home .ig-top b{font:700 19px -apple-system,system-ui;letter-spacing:-.02em}
.x-home .ig-top .vb{color:#0095f6;font-size:12px}
.x-home .ig-top .cv{font-size:10px}
.x-home .ig-top .ic{display:flex;gap:20px;font-size:20px}
.x-home .ig-head{display:flex;align-items:center;gap:16px;padding:0 14px 10px}
.x-home .ig-av{width:80px;height:80px;flex:0 0 80px;border-radius:50%;padding:2.5px;background:conic-gradient(from 200deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5,#feda75)}
.x-home .ig-av>span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;border:3px solid #000;background:#000;padding:12px}
.x-home .ig-r{flex:1}
.x-home .ig-dn{display:block;font-size:13.5px;margin-bottom:4px}
.x-home .ig-stats{display:flex;justify-content:space-between}
.x-home .ig-stats b{display:block;font:700 15.5px -apple-system,system-ui}
.x-home .ig-stats small{font-size:12px;color:#f5f5f5}
.x-home .ig-bio{padding:0 14px 10px;font-size:12.5px;line-height:1.35}
.x-home .ig-bio a{color:#e0f1ff;font-weight:600}
.x-home .ig-btns{display:flex;gap:6px;padding:0 14px 12px}
.x-home .ig-btns span{flex:1;height:30px;border-radius:8px;background:#262626;display:grid;place-items:center;font-size:12.5px;font-weight:600}
.x-home .ig-btns .sq{flex:0 0 32px}
.x-home .ig-hl{display:flex;gap:16px;padding:0 14px 12px}
.x-home .ig-hl span{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10.5px}
.x-home .ig-hl i{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#121212;box-shadow:0 0 0 1px #3a3a3a,inset 0 0 0 3px #000;font-style:normal;font-size:16px;padding:12px}
.x-home .ig-tabs{display:flex;justify-content:space-around;padding:9px 0 8px;border-bottom:1px solid #262626;font-size:18px;color:#737373}
.x-home .ig-tabs .on{color:#fff}
.x-home .s3{background:#000}
.x-home .tt-top{display:flex;justify-content:space-between;align-items:center;padding:4px 16px 14px;font-size:18px}
.x-home .tt-top b{font-size:15.5px}
.x-home .tt-top b i{font-size:10px}
.x-home .tt-av{width:88px;height:88px;margin:0 auto 8px;border-radius:50%;background:#000;box-shadow:0 0 0 1px #2a2a2a;display:grid;place-items:center;padding:16px}
.x-home .tt-un{text-align:center;font-weight:700;font-size:15px;margin-bottom:12px}
.x-home .tt-stats{display:flex;justify-content:center;gap:24px;text-align:center;margin-bottom:14px}
.x-home .tt-stats b{display:block;font-size:16px}
.x-home .tt-stats small{color:#a6a6a6;font-size:12px}
.x-home .tt-btns{display:flex;justify-content:center;gap:5px;margin-bottom:10px}
.x-home .tt-btns span{padding:0 18px;height:36px;border-radius:6px;background:#2f2f2f;display:grid;place-items:center;font-size:13.5px;font-weight:600}
.x-home .tt-btns .sq{padding:0 12px}
.x-home .tt-bio{text-align:center;font-size:12.5px;margin-bottom:12px}
.x-home .tt-tabs{display:flex;justify-content:space-around;padding:8px 0;border-bottom:1px solid #262626;font-size:16px;color:#8a8a8a}
.x-home .tt-tabs .on{color:#fff;box-shadow:0 10px 0 -8px #fff}
.x-home .s4{background:#0f0f0f;padding:54px 14px 0!important}
.x-home .yt-top{display:flex;justify-content:space-between;align-items:center;padding:4px 2px 12px}
.x-home .ys-logo{display:flex;align-items:center;gap:5px}
.x-home .ys-logo i{color:#ff0033;font-size:24px}
.x-home .ys-logo b{font-size:17px;letter-spacing:-.03em}
.x-home .yt-av{width:28px;height:28px;border-radius:50%;background:#000;box-shadow:0 0 0 1px #333;display:grid;place-items:center;padding:5px}
.x-home .s4 h6{margin:0 0 10px;font-size:20px;font-weight:700;letter-spacing:-.02em}
.x-home .ycard{padding:13px;border-radius:14px;background:#1f1f1f;margin-bottom:9px}
.x-home .ycard small{display:block;color:#aaa;font-size:12px;margin-bottom:2px}
.x-home .yt-big b{font:700 40px/1.1 -apple-system,system-ui;letter-spacing:-.03em}
.x-home .ycard>em{font-style:normal;color:#3ea6ff;font-size:12px}
.x-home .yt-chart{display:flex;align-items:flex-end;gap:6px;height:56px;margin-top:10px}
.x-home .yt-chart i{flex:1;border-radius:3px 3px 0 0;background:#3ea6ff;height:6%;animation:xh-ytb 16s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes xh-ytb{0%,76%{height:6%}90%,100%{height:var(--h)}}
.x-home .yt-row{display:flex;justify-content:space-between;padding:7px 0 0;font-size:13px}
.x-home .yt-row span{color:#ddd}
.x-home .yvr{display:flex;gap:10px;align-items:center;margin-top:6px}
.x-home .yvr>div b{display:block;font-size:12.5px;line-height:1.25}
.x-home .yvr>div span{color:#aaa;font-size:11px}
.x-home .thumb{position:relative;flex:0 0 96px;height:54px;border-radius:8px;background:#000;box-shadow:inset 0 0 0 1px #333;display:grid;place-items:center;text-align:center}
.x-home .thumb b{font:800 9.5px/1.05 var(--d);letter-spacing:-.02em}
.x-home .thumb em{position:absolute;right:3px;bottom:3px;padding:0 3px;border-radius:3px;background:rgba(0,0,0,.8);font-style:normal;font-size:8.5px}
@media(max-width:900px){.x-home .ig-av{width:66px;height:66px;flex-basis:66px}
.x-home .ig-hl i{width:44px;height:44px}
.x-home .tt-av{width:72px;height:72px}
.x-home .tt-stats{gap:16px}
.x-home .yt-big b{font-size:32px}
.x-home .tabbar{height:62px}}
.x-home .grid3x.tt .pt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.x-home .pv{z-index:1}
.x-home .pmk{height:60px;min-width:100px;padding:0 20px}
.x-home .pmk svg{width:auto;height:22px;max-width:76px}
.x-home .pmk:nth-child(1) svg{height:20px}
.x-home .pmk:nth-child(2) svg{height:30px}
.x-home .pmk:nth-child(3) svg{height:26px}
.x-home .pmk:nth-child(4) svg{height:22px}
.x-home .cn em{color:#f5f5f7;font-size:12.5px;font-weight:600;letter-spacing:0}
.x-home .bonus span{font:500 16px/1.3 var(--s);letter-spacing:0;color:#a1a1a6}
.x-home .pm:first-child svg{height:12px;width:auto;padding:2px 4px;background:#fff;border-radius:3px;box-sizing:content-box}
@media(max-width:900px){.x-home .gpath{flex-wrap:nowrap;gap:6px;font-size:12px}
.x-home .gpath span{padding:8px 11px;white-space:nowrap}
.x-home .gpath i{width:14px;flex:0 0 14px}
.x-home .pmk{min-width:0;flex:1 1 40%}}
@keyframes xh-a1{0%,54%{opacity:1;transform:none}55.5%,100%{opacity:0;transform:translateX(-14px)}}
@keyframes xh-a2{0%,54.5%{opacity:0;transform:translateX(14px)}56%,97%{opacity:1;transform:none}98.5%,100%{opacity:0;transform:translateX(-14px)}}
@keyframes xh-ty1{0%,6%{max-width:0}16%,100%{max-width:7ch}}
@keyframes xh-ty2{0%,18%{max-width:0}32%,100%{max-width:13ch}}
@keyframes xh-ty3{0%,34%{max-width:0}42%,100%{max-width:11ch}}
@keyframes xh-bsu{0%,47.5%,50%,100%{transform:none}48%{transform:scale(.94)}}
@keyframes xh-tp0{0%{opacity:0;left:50%;top:54.8%}44%{opacity:0;left:50%;top:54.8%;transform:scale(1.4)}46.5%{opacity:.95;transform:scale(1)}48%{transform:scale(.72)}50.5%{opacity:0;left:50%;top:54.8%;transform:scale(1.5)}100%{opacity:0}}
@keyframes xh-f2{0%,8.5%{opacity:0;transform:translateX(14px)}10%,34%{opacity:1;transform:none}35.5%,100%{opacity:0;transform:translateX(-14px)}}
@keyframes xh-f3{0%,34.5%{opacity:0;transform:translateX(14px)}36%,46%{opacity:1;transform:none}47.5%,100%{opacity:0;transform:translateX(-14px)}}
@keyframes xh-f4{0%,54.5%{opacity:0;transform:translateX(14px)}56%,82%{opacity:1;transform:none}83.5%,100%{opacity:0;transform:translateX(-14px)}}
@keyframes xh-f5{0%,82.5%{opacity:0;transform:translateX(14px)}84%,98%{opacity:1;transform:none}99.5%,100%{opacity:0;transform:translateX(-14px)}}
@keyframes xh-am25{0%,3%{background:#1a1a1a;color:#fff}3.6%,100%{background:#fff;color:#000}}
@keyframes xh-mcard{0%,6%{box-shadow:inset 0 0 0 1px #2a2a2a}6.6%,46%{box-shadow:inset 0 0 0 1.5px #fff}46.5%,100%{box-shadow:inset 0 0 0 1px #2a2a2a}}
@keyframes xh-mcry{0%,52%{box-shadow:inset 0 0 0 1px #2a2a2a}52.6%,100%{box-shadow:inset 0 0 0 1.5px #fff}}
@keyframes xh-ty4{0%,12%{max-width:0}24%,100%{max-width:19ch}}
@keyframes xh-bpay{0%,29.5%,32%,100%{transform:none}30%{transform:scale(.94)}}
@keyframes xh-cw{0%,72%{opacity:1}73%,100%{opacity:0}}
@keyframes xh-cd{0%,72%{opacity:0}73%,100%{opacity:1}}
@keyframes xh-gbal{0%,36%{--bal:0}42%,84%{--bal:2500}92%,100%{--bal:5375}}
@keyframes xh-tp1{0%{opacity:0;left:39%;top:26%}-1%{opacity:0;left:39%;top:26%;transform:scale(1.4)}1.5%{opacity:.95;transform:scale(1)}3%{transform:scale(.72)}5.5%{opacity:0;left:39%;top:26%;transform:scale(1.5)}2%{opacity:0;left:50%;top:38.4%;transform:scale(1.4)}4.5%{opacity:.95;transform:scale(1)}6%{transform:scale(.72)}8.5%{opacity:0;left:50%;top:38.4%;transform:scale(1.5)}26%{opacity:0;left:50%;top:73.2%;transform:scale(1.4)}28.5%{opacity:.95;transform:scale(1)}30%{transform:scale(.72)}32.5%{opacity:0;left:50%;top:73.2%;transform:scale(1.5)}48%{opacity:0;left:50%;top:55.9%;transform:scale(1.4)}50.5%{opacity:.95;transform:scale(1)}52%{transform:scale(.72)}54.5%{opacity:0;left:50%;top:55.9%;transform:scale(1.5)}100%{opacity:0}}
@keyframes xh-o1{0%,18%{opacity:1;transform:none}19.5%,100%{opacity:0;transform:translateX(-14px)}}
@keyframes xh-o2{0%,18.5%{opacity:0;transform:translateX(14px)}20%,38%{opacity:1;transform:none}39.5%,100%{opacity:0;transform:translateX(-14px)}}
@keyframes xh-o3{0%,38.5%{opacity:0;transform:translateX(14px)}40%,78%{opacity:1;transform:none}79.5%,100%{opacity:0;transform:translateX(-14px)}}
@keyframes xh-o4{0%,78.5%{opacity:0;transform:translateX(14px)}80%,98%{opacity:1;transform:none}99.5%,100%{opacity:0;transform:translateX(-14px)}}
@keyframes xh-pig{0%,12%{background:#1a1a1a;color:#fff}12.6%,100%{background:#fff;color:#000}}
@keyframes xh-sfol{0%,30%{box-shadow:inset 0 0 0 1px #2a2a2a}30.6%,100%{box-shadow:inset 0 0 0 1.5px #fff}}
@keyframes xh-ty5{0%,44%{max-width:0}58%,100%{max-width:21ch}}
@keyframes xh-ty6{0%,60%{max-width:0}64%,100%{max-width:6ch}}
@keyframes xh-bpo{0%,73.5%,76%,100%{transform:none}74%{transform:scale(.94)}}
@keyframes xh-obr{0%,84%{width:0}98%,100%{width:12%}}
@keyframes xh-tp2{0%{opacity:0;left:20.2%;top:28.6%}8%{opacity:0;left:20.2%;top:28.6%;transform:scale(1.4)}10.5%{opacity:.95;transform:scale(1)}12%{transform:scale(.72)}14.5%{opacity:0;left:20.2%;top:28.6%;transform:scale(1.5)}26%{opacity:0;left:50%;top:27.7%;transform:scale(1.4)}28.5%{opacity:.95;transform:scale(1)}30%{transform:scale(.72)}32.5%{opacity:0;left:50%;top:27.7%;transform:scale(1.5)}70%{opacity:0;left:50%;top:61%;transform:scale(1.4)}72.5%{opacity:.95;transform:scale(1)}74%{transform:scale(.72)}76.5%{opacity:0;left:50%;top:61%;transform:scale(1.5)}100%{opacity:0}}
.x-home .phone{width:320px;height:660px}
.x-home .screen .fld{align-items:flex-start;text-align:left}
.x-home .screen .v{position:absolute;inset:0;padding:54px 18px 18px;opacity:0}
.x-home .scr{padding:0}
.x-home .scr[data-s="3"]{padding:54px 18px 18px}
.x-home .scr.on .a1{animation:xh-a1 7s infinite}
.x-home .scr.on .a2{animation:xh-a2 7s infinite}
.x-home .scr.on .ty1{animation:xh-ty1 7s steps(7) infinite}
.x-home .scr.on .ty2{animation:xh-ty2 7s steps(13) infinite}
.x-home .scr.on .ty3{animation:xh-ty3 7s steps(10) infinite}
.x-home .scr.on .b-su{animation:xh-bsu 7s infinite}
.x-home .scr.on .f1{animation:f1 14s infinite}
.x-home .scr.on .f2{animation:xh-f2 14s infinite}
.x-home .scr.on .f3{animation:xh-f3 14s infinite}
.x-home .scr.on .f4{animation:xh-f4 14s infinite}
.x-home .scr.on .f5{animation:xh-f5 14s infinite}
.x-home .scr.on .am25{animation:xh-am25 14s infinite}
.x-home .scr.on .m-card{animation:xh-mcard 14s infinite}
.x-home .scr.on .m-cry{animation:xh-mcry 14s infinite}
.x-home .scr.on .ty4{animation:xh-ty4 14s steps(19) infinite}
.x-home .scr.on .b-pay{animation:xh-bpay 14s infinite}
.x-home .scr.on .cst .w{animation:xh-cw 14s infinite}
.x-home .scr.on .cst .d{animation:xh-cd 14s infinite}
.x-home .scr.on .cst .sp{animation:xh-cw 14s infinite,xh-spin .8s linear infinite}
.x-home .scr.on .c-bal{animation:xh-gbal 14s cubic-bezier(.2,.8,.2,1) infinite}
.x-home .scr.on .o1{animation:xh-o1 10s infinite}
.x-home .scr.on .o2{animation:xh-o2 10s infinite}
.x-home .scr.on .o3{animation:xh-o3 10s infinite}
.x-home .scr.on .o4{animation:xh-o4 10s infinite}
.x-home .scr.on .p-ig{animation:xh-pig 10s infinite}
.x-home .scr.on .s-fol{animation:xh-sfol 10s infinite}
.x-home .scr.on .ty5{animation:xh-ty5 10s steps(21) infinite}
.x-home .scr.on .ty6{animation:xh-ty6 10s steps(5) infinite}
.x-home .scr.on .b-po{animation:xh-bpo 10s infinite}
.x-home .scr.on .obr{animation:xh-obr 10s infinite}
.x-home .ty{display:inline-block;overflow:hidden;white-space:nowrap;max-width:0;vertical-align:bottom;color:#fff}
.x-home .tapf{position:absolute;z-index:9;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:rgba(255,255,255,.35);box-shadow:0 0 0 1.5px rgba(255,255,255,.7);opacity:0;pointer-events:none}
.x-home .screen:has(.scr[data-s="0"].on) .t0{animation:xh-tp0 7s infinite}
.x-home .screen:has(.scr[data-s="1"].on) .t1{animation:xh-tp1 14s infinite}
.x-home .screen:has(.scr[data-s="2"].on) .t2{animation:xh-tp2 10s infinite}
.x-home .g-brand{width:74px;margin-bottom:18px;color:#fff}
.x-home .screen h4.c{text-align:center;margin-top:8px}
.x-home .g-note{margin:10px 0 0;text-align:center;color:#86868b;font-size:12.5px}
.x-home .okc{width:68px;height:68px;margin:70px auto 10px;border-radius:50%;background:#30d158;display:grid;place-items:center;animation:xh-okp .6s cubic-bezier(.2,1.4,.4,1) both}
.x-home .okc svg{width:34px;height:34px;fill:none;stroke:#000;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.x-home .balbox{margin-top:22px}
.x-home .balbar{position:absolute;z-index:3;top:46px;right:14px;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#1c1c1e;font-size:12px}
.x-home .balbar small{color:#86868b}
.x-home .balbar b{font-variant-numeric:tabular-nums}
.x-home .scr[data-s="1"] .v{padding-top:84px}
.x-home .lab{display:block;color:#86868b;font-size:12px;margin:12px 0 7px}
.x-home .amts span{transition:none}
.x-home .amts .on{background:#1a1a1a;color:#fff}
.x-home .mth{display:flex;align-items:center;gap:10px;height:50px;padding:0 12px;border-radius:14px;background:#141415;box-shadow:inset 0 0 0 1px #2a2a2a;margin-bottom:7px;font-size:13.5px}
.x-home .mth .mi{display:flex;gap:4px;align-items:center;width:54px}
.x-home .mth .mi svg{height:16px;width:auto;max-width:30px}
.x-home .mth .mi svg:only-child{height:20px;max-width:44px;filter:invert(1)}
.x-home .m-card .mi svg:first-child{height:10px;padding:3px 3px;background:#fff;border-radius:3px}
.x-home .m-cry .mi svg{height:20px!important;max-width:20px!important;filter:none!important;background:none!important;padding:0!important}
.x-home .mth em{margin-left:auto;font-style:normal;color:#86868b;font-size:12px}
.x-home .mth .bn{color:#30d158;font-weight:700}
.x-home .ccard{position:relative;height:150px;border-radius:18px;padding:16px;margin-bottom:12px;background:linear-gradient(135deg,#3a3a3c,#0b0b0c 60%,#2c2c2e);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 20px 40px -18px #000;display:flex;flex-direction:column;justify-content:space-between}
.x-home .cc-top{display:flex;justify-content:space-between;align-items:center}
.x-home .cc-top .gl{width:56px}
.x-home .cc-top svg:last-child{height:14px;width:auto;filter:brightness(0) invert(1)}
.x-home .cc-num{font:600 16px ui-monospace,Menlo,monospace;letter-spacing:.06em;min-height:22px}
.x-home .cc-bot{display:flex;justify-content:space-between;color:#a1a1a6;font-size:11px;letter-spacing:.08em}
.x-home .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.x-home .coins4{display:flex;gap:6px;margin-bottom:12px}
.x-home .cchip{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 0;border-radius:12px;background:#141415;box-shadow:inset 0 0 0 1px #2a2a2a}
.x-home .cchip.on{box-shadow:inset 0 0 0 1.5px #fff}
.x-home .cchip svg{width:24px;height:24px}
.x-home .cchip em{font-style:normal;font-size:10.5px;font-weight:600;color:#f5f5f7}
.x-home .qrbox{display:flex;gap:12px;align-items:center;padding:12px;border-radius:16px;background:#141415;margin-bottom:12px}
.x-home .qr{display:grid;grid-template:repeat(13,1fr)/repeat(13,1fr);width:104px;height:104px;flex:0 0 104px;padding:7px;border-radius:10px;background:#fff}
.x-home .qr i{background:#000;border-radius:1px}
.x-home .qr b{border:5px solid #000;border-radius:4px;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 10px #000}
.x-home .qrbox small{display:block;color:#86868b;font-size:11px}
.x-home .qrbox b{display:block;font-size:16px;margin:2px 0 6px}
.x-home .addr{font-family:ui-monospace,Menlo,monospace}
.x-home .cst{position:relative;display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:12px;background:#141415;font-size:13px}
.x-home .cst .d{position:absolute;left:14px;color:#30d158;font-weight:600;opacity:0}
.x-home .sp{width:14px;height:14px;border-radius:50%;border:2px solid #444;border-top-color:#fff}
@keyframes xh-spin{to{transform:rotate(360deg)}}
.x-home .bonusrow{display:flex;justify-content:space-between;margin-top:18px;padding:14px;border-radius:14px;background:#141415;font-size:13.5px}
.x-home .bonusrow b{color:#30d158}
.x-home .grid3 span{transition:none}
.x-home .grid3 .on{background:#1a1a1a}
.x-home .screen h4 .fab{font-size:19px;margin-right:4px}
.x-home .svl{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border-radius:14px;background:#141415;box-shadow:inset 0 0 0 1px #2a2a2a;margin-bottom:7px}
.x-home .svl b{display:block;font-size:13.5px}
.x-home .svl small{color:#86868b;font-size:11px}
.x-home .svl em{font-style:normal;font-size:12px;font-weight:600}
.x-home .fld.fx{box-shadow:inset 0 0 0 1.5px #fff}
.x-home .sumr{display:flex;justify-content:space-between;padding:6px 2px;font-size:13px;color:#a1a1a6}
.x-home .sumr b{color:#fff}
.x-home .sumr.t{margin-top:4px;padding-top:10px;border-top:1px solid #222}
.x-home .sumr.t b{font:700 24px var(--d);letter-spacing:-.04em}
.x-home .o4 .ord{margin-top:20px}
.x-home .obr{width:0}
@keyframes xh-okp{from{transform:scale(.4);opacity:0}}
@media(max-width:900px){.x-home .phone{width:300px;height:620px}}
.x-home .stick{perspective:2200px;perspective-origin:50% 30%}
.x-home .mb3{--W:min(940px,86vw);position:relative;width:var(--W);height:calc(var(--W)*.63);transform-style:preserve-3d;
  transform:translateY(calc((1 - var(--q,0))*16%)) rotateX(calc(42deg - var(--q,0)*28deg)) scale(calc(.8 + var(--q,0)*.2));will-change:transform}
.x-home .mb-lid{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 100%;transform:rotateX(calc(-90deg + var(--q,0)*92deg))}
.x-home .mb-front,.x-home .mb-back{position:absolute;inset:0;border-radius:22px 22px 6px 6px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.x-home .mb-front{padding:12px 12px 26px;background:#0d0d0e;box-shadow:inset 0 0 0 1.5px #3a3a3d}
.x-home .mb-front .mbp-screen{height:100%;aspect-ratio:auto}
.x-home .mb-back{transform:rotateY(180deg);background:linear-gradient(160deg,#3b3b3e,#1c1c1e 55%,#2a2a2d);box-shadow:inset 0 0 0 1.5px #4a4a4e;display:grid;place-items:center}
.x-home .mb-back .gl{width:22%;color:#0d0d0e;opacity:.9;filter:drop-shadow(0 1px 0 rgba(255,255,255,.12))}
.x-home .mb-base{position:absolute;left:-4%;right:-4%;top:100%;height:calc(var(--W)*.66);transform-origin:50% 0;transform:rotateX(90deg);transform-style:preserve-3d;
  border-radius:4px 4px 26px 26px;background:linear-gradient(180deg,#2c2c2f,#232326 70%,#1d1d20);box-shadow:inset 0 0 0 1.5px #3d3d41}
.x-home .mb-kb{position:absolute;left:12%;right:12%;top:7%;height:46%;display:flex;flex-direction:column;gap:1.4%;padding:1.2%;border-radius:8px;background:#141415}
.x-home .kr{flex:1;display:flex;gap:1%}
.x-home .kr i{flex:1;border-radius:4px;background:linear-gradient(#0c0c0d,#050505);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.x-home .kr:last-child i:nth-child(5){flex:5.5}
.x-home .kr:first-child{flex:.6}
.x-home .mb-tp{position:absolute;left:31%;right:31%;top:58%;bottom:7%;border-radius:12px;background:#28282b;box-shadow:inset 0 0 0 1px #3e3e42}
.x-home .mb-edge{position:absolute;left:0;right:0;bottom:0;height:16px;transform-origin:50% 100%;transform:rotateX(-90deg);border-radius:0 0 18px 18px;background:linear-gradient(180deg,#3a3a3d,#141416)}
.x-home .mb-edge i{position:absolute;top:0;left:42%;right:42%;height:6px;border-radius:0 0 8px 8px;background:#0f0f10}
.x-home .mb-shadow{position:absolute;left:-6%;right:-6%;top:100%;height:calc(var(--W)*.66);transform-origin:50% 0;transform:rotateX(90deg) translateZ(-18px);border-radius:40px;background:radial-gradient(closest-side,rgba(255,255,255,.12),transparent);filter:blur(30px)}
.x-home .stage .mtoast{transform:translateY(16px)}
@media(max-width:900px){.x-home .stage{height:150vh!important;margin-top:20px}
.x-home .stage .stick{position:sticky;top:60px;height:calc(100vh - 60px);overflow:hidden}
.x-home .mb3{--W:92vw}
.x-home .mb3 .ui{grid-template-columns:1fr}
.x-home .mb3 .ui-side,.x-home .mb3 .ui-co{display:none}
.x-home .mb3 .ui-main{padding:10px;font-size:8px}
.x-home .mb3 .ui-main h3{font-size:12px;margin-bottom:6px}
.x-home .mb3 .ui-search{height:22px;margin-bottom:6px}
.x-home .mb3 .ui-plats span{width:22px;height:22px;font-size:10px}
.x-home .mb3 .ui-svc{padding:5px 8px}
.x-home .mb-front{padding:5px 5px 12px;border-radius:12px 12px 4px 4px}
.x-home .mtoast{right:6px;bottom:6px;padding:6px 8px;font-size:9px;gap:6px}
.x-home .mtoast span{width:18px;height:18px}
.x-home .cur{display:none}
.x-home .mb-edge{height:8px}}
@keyframes xh-w1{0%,12%{opacity:1;transform:none}13%,100%{opacity:0;transform:translateX(-14px)}}
@keyframes xh-w2{0%,13%{opacity:0;transform:translateX(14px)}14%,33%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateX(-14px)}}
@keyframes xh-w3{0%,33%{opacity:0;transform:translateX(14px)}34%,41%{opacity:1;transform:none}42%,100%{opacity:0;transform:translateX(-14px)}}
@keyframes xh-w4{0%,41%{opacity:0;transform:translateX(14px)}42%,49%{opacity:1;transform:none}50%,100%{opacity:0;transform:translateX(-14px)}}
@keyframes xh-w5{0%,50%{opacity:0;transform:translateX(14px)}51%,59%{opacity:1;transform:none}60%,100%{opacity:0;transform:translateX(-14px)}}
@keyframes xh-w6{0%,60%{opacity:0;transform:translateX(14px)}61%,71%{opacity:1;transform:none}72%,100%{opacity:0;transform:translateX(-14px)}}
@keyframes xh-w7{0%,71%{opacity:0;transform:translateX(14px)}72%,87%{opacity:1;transform:none}88%,100%{opacity:0;transform:translateX(-14px)}}
@keyframes xh-w8{0%,88%{opacity:0;transform:translateX(14px)}89%,98%{opacity:1;transform:none}99%,100%{opacity:0;transform:translateX(-14px)}}
@keyframes xh-a25{0%,4%{background:#1a1a1a;color:#fff}4.4%,100%{background:#fff;color:#000}}
@keyframes xh-sbox{0%,4.4%{opacity:.35}5%,100%{opacity:1}}
@keyframes xh-ty7{0%,17%{max-width:0}25%,100%{max-width:19ch}}
@keyframes xh-ty8{0%,53%{max-width:0}55%,100%{max-width:2ch}}
@keyframes xh-bp1{0%,10.6%,12.5%,100%{transform:none}11%{transform:scale(.94)}}
@keyframes xh-bp2{0%,30.6%,32.5%,100%{transform:none}31%{transform:scale(.94)}}
@keyframes xh-bp3{0%,57.6%,59.5%,100%{transform:none}58%{transform:scale(.94)}}
@keyframes xh-bpr{0%,69.6%,71.5%,100%{transform:none}70%{transform:scale(.94)}}
@keyframes xh-w3w{0%,38%{opacity:1}38.5%,100%{opacity:0}}
@keyframes xh-w3d{0%,38%{opacity:0}38.5%,100%{opacity:1}}
@keyframes xh-w7w{0%,82%{opacity:1}82.5%,100%{opacity:0}}
@keyframes xh-w7d{0%,82%{opacity:0}82.5%,100%{opacity:1}}
@keyframes xh-gbal{0%,42%{--bal:0}47%,89%{--bal:2500}95%,100%{--bal:5375}}
@keyframes xh-tp1{0%{opacity:0;left:85.1%;top:49.5%}1%{opacity:0;left:85.1%;top:49.5%;transform:scale(1.4)}3%{opacity:.95;transform:scale(1)}4%{transform:scale(.72)}6%{opacity:0;left:85.1%;top:49.5%;transform:scale(1.5)}8%{opacity:0;left:50%;top:75.5%;transform:scale(1.4)}10%{opacity:.95;transform:scale(1)}11%{transform:scale(.72)}13%{opacity:0;left:50%;top:75.5%;transform:scale(1.5)}28%{opacity:0;left:50%;top:64.5%;transform:scale(1.4)}30%{opacity:.95;transform:scale(1)}31%{transform:scale(.72)}33%{opacity:0;left:50%;top:64.5%;transform:scale(1.5)}50%{opacity:0;left:71%;top:27.1%;transform:scale(1.4)}52%{opacity:.95;transform:scale(1)}53%{transform:scale(.72)}55%{opacity:0;left:71%;top:27.1%;transform:scale(1.5)}55%{opacity:0;left:50%;top:76.4%;transform:scale(1.4)}57%{opacity:.95;transform:scale(1)}58%{transform:scale(.72)}60%{opacity:0;left:50%;top:76.4%;transform:scale(1.5)}67%{opacity:0;left:50%;top:66.9%;transform:scale(1.4)}69%{opacity:.95;transform:scale(1)}70%{transform:scale(.72)}72%{opacity:0;left:50%;top:66.9%;transform:scale(1.5)}100%{opacity:0}}
.x-home .scr.on .w1{animation:xh-w1 20s infinite}
.x-home .scr.on .w2{animation:xh-w2 20s infinite}
.x-home .scr.on .w3{animation:xh-w3 20s infinite}
.x-home .scr.on .w4{animation:xh-w4 20s infinite}
.x-home .scr.on .w5{animation:xh-w5 20s infinite}
.x-home .scr.on .w6{animation:xh-w6 20s infinite}
.x-home .scr.on .w7{animation:xh-w7 20s infinite}
.x-home .scr.on .w8{animation:xh-w8 20s infinite}
.x-home .scr.on .a25{animation:xh-a25 20s infinite}
.x-home .scr.on .w1 .sumbox{animation:xh-sbox 20s infinite}
.x-home .scr.on .ty7{animation:xh-ty7 20s steps(19) infinite}
.x-home .scr.on .ty8{animation:xh-ty8 20s steps(2) infinite}
.x-home .scr.on .b-pay1{animation:xh-bp1 20s infinite}
.x-home .scr.on .b-pay2{animation:xh-bp2 20s infinite}
.x-home .scr.on .b-pay3{animation:xh-bp3 20s infinite}
.x-home .scr.on .b-pr{animation:xh-bpr 20s infinite}
.x-home .scr.on .ds-s .w{animation:xh-w3w 20s infinite}
.x-home .scr.on .ds-s .d{animation:xh-w3d 20s infinite}
.x-home .scr.on .ds-s .sp{animation:xh-w3w 20s infinite,xh-spin .8s linear infinite}
.x-home .scr.on .c28-s .w{animation:xh-w7w 20s infinite}
.x-home .scr.on .c28-s .d{animation:xh-w7d 20s infinite}
.x-home .scr.on .c28-s .sp{animation:xh-w7w 20s infinite,xh-spin .8s linear infinite}
.x-home .scr.on .c-bal{animation:xh-gbal 20s cubic-bezier(.2,.8,.2,1) infinite}
.x-home .screen:has(.scr[data-s="1"].on) .t1{animation:xh-tp1 20s infinite}
.x-home .scr[data-s="1"] .v{padding-top:50px}
.x-home .v .balbar{position:static;display:inline-flex;margin:0 0 10px}
.x-home .seg{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:12px;background:#141415;margin-bottom:10px;font-size:12.5px}
.x-home .seg span{display:flex;align-items:center;justify-content:center;gap:6px;height:32px;border-radius:9px;color:#a1a1a6}
.x-home .seg .on{background:#2c2c2e;color:#fff}
.x-home .gw{padding:11px 12px;border-radius:14px;background:#141415;box-shadow:inset 0 0 0 1.5px #fff;font-size:12px}
.x-home .gw-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.x-home .gw em{font-style:normal;font-size:11px;color:#a1a1a6;padding:2px 7px;border-radius:6px;background:#232325}
.x-home .gw .brands{display:flex;align-items:center;gap:5px;font-size:20px}
.x-home .gw .brands svg{height:12px;width:auto}
.x-home .gw .brands svg:first-child{padding:2px 3px;background:#fff;border-radius:3px;height:9px}
.x-home .gw>b{display:block;font-size:12.5px;line-height:1.3}
.x-home .gw small{color:#a1a1a6;font-size:11px}
.x-home .gw .bn{background:rgba(48,209,88,.14);color:#30d158;font-weight:600}
.x-home .l28{display:flex;align-items:center;gap:6px;padding:3px 8px 3px 4px;border-radius:8px;background:#232325}
.x-home .l28 b{font-size:13px}
.x-home .m28{width:18px;height:18px}
.x-home .amt5{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-bottom:10px}
.x-home .amt5 span{height:30px;border-radius:9px;background:#1a1a1a;display:grid;place-items:center;font-size:11.5px;font-weight:600}
.x-home .sumbox{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border-radius:12px;overflow:hidden;background:#2a2a2a;margin-top:10px}
.x-home .sumbox span{padding:8px 10px;background:#141415}
.x-home .sumbox small{display:block;color:#86868b;font-size:10.5px}
.x-home .sumbox b{font-size:13.5px}
.x-home .sumbox .g b{color:#30d158}
.x-home .scr[data-s="1"] .bigbtn{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;height:46px}
.x-home .v.lt{background:#fff;color:#111}
.x-home .wh-top{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid #eee;margin-bottom:12px}
.x-home .wh-top small{display:block;color:#777;font-size:11px}
.x-home .wh-top>div b{font-size:13.5px}
.x-home .wh-logo{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#000;color:#fff;padding:7px}
.x-home .wh-p{margin-left:auto;font-size:17px}
.x-home .wh-x{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.x-home .wh-x span{display:flex;align-items:center;justify-content:center;gap:5px;height:40px;border-radius:8px;font-weight:600;font-size:14px}
.x-home .wh-x .ap{background:#000;color:#fff}
.x-home .wh-x .gp{background:#fff;color:#000;box-shadow:inset 0 0 0 1px #d0d0d0}
.x-home .wh-or{display:flex;align-items:center;gap:8px;margin:12px 0 4px;color:#888;font-size:11px}
.x-home .wh-or::before,.x-home .wh-or::after{content:"";flex:1;height:1px;background:#e6e6e6}
.x-home .wl{display:block;color:#555;font-size:11px;margin:8px 0 4px;font-weight:500}
.x-home .wf{display:flex;align-items:center;height:38px;padding:0 10px;border-radius:8px;box-shadow:inset 0 0 0 1px #d6d6d6;font-size:13px;color:#111}
.x-home .wf-n{border-radius:8px 8px 0 0}
.x-home .wf-n .ty{color:#111}
.x-home .wf-n .cb{margin-left:auto}
.x-home .wf-n .cb svg{height:12px;width:auto}
.x-home .wf2{display:grid;grid-template-columns:1fr 1fr}
.x-home .wf2 .wf{border-radius:0 0 0 8px;margin-top:-1px}
.x-home .wf2 .wf+.wf{border-radius:0 0 8px 0;margin-left:-1px}
.x-home .wbtn{height:44px;margin-top:14px;border-radius:8px;background:#111;color:#fff;display:grid;place-items:center;font-weight:600;font-size:14px}
.x-home .wh-f{margin:10px 0 0;text-align:center;color:#888;font-size:11px}
.x-home .wh-f b{color:#111}
.x-home .ds{margin-top:90px;padding:18px;border-radius:16px;box-shadow:0 0 0 1px #e3e3e3,0 20px 40px -20px rgba(0,0,0,.25)}
.x-home .ds-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.x-home .ds-h b{font-size:15px}
.x-home .ds-h svg{height:12px;width:auto}
.x-home .ds p{margin:0 0 14px;font-size:12.5px;color:#444;line-height:1.4}
.x-home .ds-s,.x-home .c28-s{position:relative;display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:10px;background:#f2f2f4;font-size:12.5px}
.x-home .ds-s .d,.x-home .c28-s .d{position:absolute;left:12px;color:#1a9e48;font-weight:600;opacity:0}
.x-home .sp.dk{border-color:#ccc;border-top-color:#111}
.x-home .v.k28{background:#1b1b1d;padding-left:10px;padding-right:10px}
.x-home .c28{border-radius:16px;background:#121213;box-shadow:inset 0 0 0 1px #2c2c2f;overflow:hidden;font-size:12px}
.x-home .c28-h{display:flex;align-items:center;gap:8px;padding:12px 14px}
.x-home .c28-h b{font-size:13px;margin-right:auto}
.x-home .c28-h i{color:#a1a1a6;font-size:12px;margin-left:8px}
.x-home .c28 .mk .m28,.x-home .c28-pw .m28{width:20px;height:20px}
.x-home .c28-h .tm{font:600 11px ui-monospace,Menlo,monospace;color:#a1a1a6}
.x-home .c28-o{padding:0 14px;color:#ddd;font-size:11.5px}
.x-home .c28-o small,.x-home .c28-l,.x-home .c28-t small,.x-home .st{font-size:9.5px;letter-spacing:.06em;color:#8e8e93}
.x-home .c28-d{padding:6px 14px 10px;color:#a1a1a6;font-size:11.5px}
.x-home .c28-t{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-top:1px solid #2c2c2f;border-bottom:1px solid #2c2c2f}
.x-home .c28-t b{font-size:15px;font-weight:500}
.x-home .c28-b{padding:12px 14px 14px;background:#1a1414}
.x-home .c28-b .st{color:#e5483d}
.x-home .c28-b h5{margin:4px 0 8px;font-size:16px;font-weight:500}
.x-home .c28-l{display:block;margin:8px 0 4px}
.x-home .c28-f{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border-radius:9px;background:#141416;box-shadow:inset 0 0 0 1px #2e2e31;font-size:12.5px}
.x-home .c28-f svg{width:16px;height:16px}
.x-home .c28-f.mono{font-family:ui-monospace,Menlo,monospace;justify-content:space-between}
.x-home .c28-btn{height:38px;margin-top:12px;border-radius:9px;background:#e5483d;color:#fff;display:grid;place-items:center;font-weight:500;font-size:13px}
.x-home .c28-pw{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px 0 0;color:#ddd;font-size:12px}
.x-home .c28-q{display:flex;gap:12px;align-items:center}
.x-home .c28-q .qr{width:92px;height:92px;flex-basis:92px;padding:6px}
.x-home .c28-q b{display:block;font-size:13px}
.x-home .c28-s{margin-top:10px;background:#141416;color:#ddd}
.x-home .c28-s .d{color:#30d158}
.x-home .ghead p{margin:-14px 0 0;color:#6e6e73;font-size:19px}
.x-home .trio{display:grid;grid-template-columns:repeat(3,320px);justify-content:center;gap:44px;padding:64px 22px 150px}
.x-home .tphone{margin:0}
.x-home .tphone .phone{box-shadow:0 50px 90px -40px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.06)}
.x-home .tphone figcaption{padding:26px 6px 0}
.x-home .tphone figcaption span{display:block;color:#86868b;font:600 13px var(--s);margin-bottom:6px}
.x-home .tphone figcaption b{display:block;color:#1d1d1f;font:700 24px/1.1 var(--d);letter-spacing:-.035em}
.x-home .tphone figcaption small{display:block;margin-top:6px;color:#6e6e73;font-size:15px;line-height:1.45}
.x-home .trio-dots{display:none}
@media(max-width:1120px){.x-home .trio{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:320px;justify-content:start;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:44px max(22px,calc(50vw - 160px)) 34px;scrollbar-width:none}
.x-home .trio::-webkit-scrollbar{display:none}
.x-home .tphone{scroll-snap-align:center}
.x-home .trio-dots{display:flex;justify-content:center;gap:8px;padding-bottom:90px}
.x-home .trio-dots i{width:7px;height:7px;border-radius:50%;background:#d2d2d7;transition:width .3s,background .3s}
.x-home .trio-dots .on{width:22px;border-radius:9px;background:#1d1d1f}
.x-home .ghead p{font-size:16px;padding:0 10px}}
.x-home .cc{text-align:left}
.x-home .cc .ci{font-size:30px;margin-bottom:18px}
.x-home .cc li{gap:16px;align-items:baseline}
.x-home .cc li b{text-align:right;white-space:nowrap}
.x-home .cnote{margin-top:26px;font-size:13px;line-height:1.5;color:#6e6e73}
.x-home .mb-front{background:linear-gradient(180deg,#1a1a1c,#0b0b0c);box-shadow:inset 0 0 0 1.5px #48484c,inset 0 0 0 3px #0b0b0c,0 0 80px -10px rgba(255,255,255,.08)}
.x-home .mb-front::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.07),transparent 40%);pointer-events:none}
.x-home .mb-base{background:linear-gradient(180deg,#3a3a3e,#2a2a2d 40%,#1f1f22);box-shadow:inset 0 0 0 1.5px #4b4b50,inset 0 2px 0 rgba(255,255,255,.12)}
.x-home .mb-edge{height:18px;background:linear-gradient(180deg,#56565b,#26262a 40%,#0e0e10)}
.x-home .mb-back{background:linear-gradient(160deg,#4a4a4e,#26262a 55%,#38383c)}
.x-home .mb-back .gl{color:#121214}
.x-home .mb-kb{background:#111113}
.x-home .kr i{background:linear-gradient(#141416,#08080a);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 1px 0 #000}
.x-home .mb-tp{background:linear-gradient(180deg,#333337,#2a2a2e);box-shadow:inset 0 0 0 1px #4a4a4f}
.x-home .stage{height:230vh}
.x-home .stick{perspective:1800px;perspective-origin:50% 20%}
.x-home .mb3{transform:translateY(calc(6% - var(--q,0)*2%)) rotateX(calc(52deg - var(--q,0)*36deg)) scale(calc(.78 + var(--q,0)*.2))}
.x-home .mb-lid{transform:rotateX(calc(-90deg + var(--q,0)*96deg))}
@media(max-width:900px){.x-home .stage{height:170vh!important}
.x-home .mb3{--W:94vw}
.x-home .stick{perspective:1100px}}
.x-home .mb3{--W:min(980px,86vw);height:calc(var(--W)*.65)}
.x-home .mb-front{padding:calc(var(--W)*.012) calc(var(--W)*.012) calc(var(--W)*.03);border-radius:calc(var(--W)*.024) calc(var(--W)*.024) calc(var(--W)*.008) calc(var(--W)*.008);
  background:#050505;box-shadow:inset 0 0 0 1px #3c3c3f,inset 0 0 0 calc(var(--W)*.004) #1d1d1f}
.x-home .mb-front .mbp-screen{border-radius:calc(var(--W)*.012) calc(var(--W)*.012) 2px 2px}
.x-home .mbp-notch{width:calc(var(--W)*.12);height:calc(var(--W)*.02);margin-left:calc(var(--W)*-.06);border-radius:0 0 calc(var(--W)*.008) calc(var(--W)*.008);background:#050505}
.x-home .mbp-notch::after{content:"";position:absolute;left:50%;top:38%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#2a3a55,#0a0a10 70%)}
.x-home .mb-front::before{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--W)*.03);border-radius:0 0 calc(var(--W)*.008) calc(var(--W)*.008);background:linear-gradient(#0a0a0a,#151517)}
.x-home .mb-back{border-radius:calc(var(--W)*.024) calc(var(--W)*.024) calc(var(--W)*.008) calc(var(--W)*.008);background:linear-gradient(160deg,#3a3a3d,#2b2b2e 50%,#323235);box-shadow:inset 0 0 0 1px #4a4a4e}
.x-home .mb-back .gl{width:16%;color:#1a1a1c;filter:drop-shadow(0 1px 0 rgba(255,255,255,.08))}
.x-home .mb-base{left:0;right:0;height:calc(var(--W)*.69);border-radius:2px 2px calc(var(--W)*.03) calc(var(--W)*.03);
  background:linear-gradient(180deg,#38383b,#2f2f32 30%,#2a2a2d);box-shadow:inset 0 0 0 1px #47474b,inset 0 1px 0 rgba(255,255,255,.14)}
.x-home .mb-hinge{position:absolute;left:8%;right:8%;top:0;height:2.2%;border-radius:0 0 6px 6px;background:linear-gradient(#0c0c0d,#1c1c1e)}
.x-home .mb-kb{left:16.5%;right:16.5%;top:5.5%;height:46%;gap:1.6%;padding:1%;border-radius:6px;background:#0c0c0d;box-shadow:inset 0 0 0 1px #1a1a1c}
.x-home .kr{gap:.9%}
.x-home .kr:first-child{flex:1}
.x-home .kr i{flex:1;border-radius:3px;background:linear-gradient(#1a1a1c,#0d0d0e);box-shadow:inset 0 0 0 .5px #262628,0 1px 0 #000}
.x-home .kr:last-child i:nth-child(5){flex:5.6}
.x-home .kr .tid{flex:1;border-radius:3px;background:radial-gradient(circle,#1f1f21 45%,#151517 47%,#0d0d0e 75%);box-shadow:inset 0 0 0 1px #2c2c2f}
.x-home .arw{flex:3;display:flex;gap:4%;align-items:flex-end}
.x-home .arw>i,.x-home .arw>span{flex:1}
.x-home .arw>i{height:48%;border-radius:3px;background:linear-gradient(#1a1a1c,#0d0d0e);box-shadow:inset 0 0 0 .5px #262628}
.x-home .arw>span{display:flex;flex-direction:column;gap:6%;height:100%}
.x-home .arw>span i{flex:1;border-radius:3px}
.x-home .mb-spk{position:absolute;top:5.5%;height:46%;width:9%;background:radial-gradient(circle,#0a0a0b 32%,transparent 36%) 0 0/7px 7px;opacity:.95}
.x-home .mb-spk.l{left:5%}
.x-home .mb-spk.r{right:5%}
.x-home .mb-tp{left:30.5%;right:30.5%;top:57%;bottom:6%;border-radius:calc(var(--W)*.012);background:linear-gradient(180deg,#323235,#2c2c2f);box-shadow:inset 0 0 0 1px #434347}
.x-home .mb-edge{height:calc(var(--W)*.016);border-radius:0 0 calc(var(--W)*.03) calc(var(--W)*.03);background:linear-gradient(180deg,#4a4a4e,#2a2a2d 45%,#0f0f10)}
.x-home .mb-edge i{left:44%;right:44%;height:45%;border-radius:0 0 10px 10px;background:linear-gradient(#141416,#26262a)}
@media(max-width:900px){.x-home .mb3{--W:94vw}
.x-home .mb-spk{background-size:4px 4px}
.x-home .kr i,.x-home .kr .tid,.x-home .arw>i,.x-home .arw>span i{border-radius:1.5px}
.x-home .mb-kb{border-radius:3px}}
.x-home .mb3{--W:min(880px,80vw,calc((100vh - 120px)*1.05))}
.x-home .mb3{margin-top:calc(var(--W)*-.16)}
.x-home .stage{height:170vh}
.x-home .mb-lid{transform:rotateX(16deg)}
.x-home .mb3{transform:translateY(calc((1 - var(--q,0))*6%)) rotateX(calc(-26deg + var(--q,0)*8deg)) scale(calc(.9 + var(--q,0)*.1))}
@media(max-width:900px){.x-home .stage{display:none!important}}
.x-home .stick{perspective:3200px;perspective-origin:50% 35%}
.x-home .mb3{--W:min(780px,62vw,calc((100vh - 150px)*.9))}
.x-home .mb3{margin-top:0;transform:translateY(calc(-17% + (1 - var(--q,0))*5%)) rotateX(calc(-19deg + var(--q,0)*6deg)) scale(calc(.95 + var(--q,0)*.05))}
.x-home .mb-lid{transform:rotateX(11deg)}
.x-home .mbp-screen{background:#000}
.x-home .mbp-screen::after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.02) 32%,transparent 46%)}
.x-home .mbp-notch{z-index:9}
.x-home .mac{position:absolute;left:0;top:0;width:1280px;height:800px;transform-origin:0 0;transform:scale(var(--ms,.6));overflow:hidden;
  background:radial-gradient(60% 70% at 22% 30%,#3a3d52 0%,transparent 60%),radial-gradient(55% 60% at 80% 75%,#2b3a4a 0%,transparent 62%),radial-gradient(40% 40% at 60% 20%,#4a3f55 0%,transparent 70%),#0d0e12;
  font:13px/1.4 -apple-system,"SF Pro Text",Inter,system-ui,sans-serif;color:#fff}
.x-home .mac-bar{display:flex;justify-content:space-between;align-items:center;height:26px;padding:0 14px 0 16px;background:rgba(20,20,24,.38);backdrop-filter:blur(30px);font-size:13px}
.x-home .mac-bar .ml{display:flex;gap:18px;padding-left:120px}
.x-home .mac-bar .ml span{color:rgba(255,255,255,.88)}
.x-home .mac-bar .mr{display:flex;gap:16px;align-items:center;font-size:12.5px}
.x-home .mac-bar .mr i{font-size:12px;opacity:.9}
.x-home .saf{position:absolute;left:64px;right:64px;top:44px;bottom:84px;border-radius:12px;overflow:hidden;background:#141416;box-shadow:0 0 0 .5px rgba(255,255,255,.22),0 30px 80px rgba(0,0,0,.6),0 8px 20px rgba(0,0,0,.4)}
.x-home .saf-tb{position:relative;display:flex;align-items:center;gap:14px;height:52px;padding:0 16px;background:#1f1f22;border-bottom:1px solid #000;color:#9b9ba1;font-size:14px}
.x-home .saf-tb .tl{display:flex;gap:8px;margin-right:6px}
.x-home .saf-tb .tl i{width:12px;height:12px;border-radius:50%;background:#ff5f57}
.x-home .saf-tb .tl i:nth-child(2){background:#febc2e}
.x-home .saf-tb .tl i:nth-child(3){background:#28c840}
.x-home .saf-tb .nv{display:flex;gap:18px}
.x-home .saf-tb .ac{display:flex;gap:20px;margin-left:auto}
.x-home .url{position:absolute;left:50%;width:420px;margin-left:-210px;height:32px;border-radius:9px;background:#2c2c30;display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;font-size:13.5px;letter-spacing:-.01em}
.x-home .url i{font-size:10px;color:#9b9ba1}
.x-home .saf-tabs{display:flex;height:32px;background:#1a1a1c;border-bottom:1px solid #000;font-size:12px;color:#9b9ba1}
.x-home .saf-tabs span{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;border-right:1px solid #000}
.x-home .saf-tabs .on{background:#141416;color:#fff}
.x-home .fav{display:grid;place-items:center;width:16px;height:16px;border-radius:4px;background:#000;padding:2px}
.x-home .fav .gl{width:100%}
.x-home .saf-body{position:absolute;left:0;right:0;top:85px;bottom:0}
.x-home .saf-body .ui{height:100%}
.x-home .saf-body .ui-side .wm{width:92px;padding:2px 8px 22px;color:#fff}
.x-home .dock{position:absolute;left:50%;bottom:8px;display:flex;gap:9px;padding:8px 10px;transform:translateX(-50%);border-radius:20px;background:rgba(60,60,70,.32);backdrop-filter:blur(30px);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.25)}
.x-home .dock i{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:linear-gradient(160deg,#5b5f6b,#2c2f37)}
.x-home .dock .d1{background:linear-gradient(160deg,#4a8df8,#1b5fd6)}
.x-home .dock .d2{background:linear-gradient(160deg,#f2f2f7,#c7c7cc)}
.x-home .dock .d3{background:linear-gradient(160deg,#5ee077,#24b246)}
.x-home .dock .d4{background:linear-gradient(160deg,#ffd862,#f6a623)}
.x-home .dock .d5{background:#000;box-shadow:inset 0 0 0 1px #333;padding:9px}
.x-home .dock .d6{background:linear-gradient(160deg,#a78bfa,#6d28d9)}
.x-home .dock .d7{background:linear-gradient(160deg,#8e8e93,#48484a)}
.x-home .dock .d5 .gl{color:#fff}
.x-home .mb-front{box-shadow:inset 0 0 0 1px #3c3c3f,inset 0 0 0 calc(var(--W)*.004) #1d1d1f,0 0 0 1.5px #2a2a2d}
.x-home .kr{min-height:0;min-width:0}
.x-home .kr i{min-width:0;flex-basis:0}
.x-home .arw{min-width:0;flex-basis:0}
.x-home .arw i{min-width:0}
.x-home .kr i,.x-home .arw i{display:flex;align-items:center;justify-content:center;font:500 calc(var(--W)*.0105) -apple-system,"SF Pro Text",Inter,sans-serif;font-style:normal;color:rgba(255,255,255,.62);line-height:1;overflow:hidden;white-space:nowrap}
.x-home .kr i.m{font-size:calc(var(--W)*.0068);justify-content:flex-start;align-items:flex-end;padding:0 0 .5em .6em;color:rgba(255,255,255,.5)}
.x-home .kr:first-child i{font-size:calc(var(--W)*.0065);color:rgba(255,255,255,.45)}
.x-home .arw i{font-size:calc(var(--W)*.0055);color:rgba(255,255,255,.45)}
.x-home .kr i{background:linear-gradient(180deg,#19191b,#0e0e10);box-shadow:inset 0 0 0 .5px #2a2a2d,inset 0 1px 0 rgba(255,255,255,.05),0 1px 1px #000}
.x-home .mac-bar{height:28px;font-size:13.5px}
.x-home .mac-bar .ml{padding-left:16px;gap:20px}
.x-home .mac-bar .ap{font-size:15px;margin-right:2px}
.x-home .mac-bar .ml b{font-weight:700}
.x-home .dock{gap:6px;padding:6px 8px 8px;border-radius:22px;background:rgba(80,80,92,.28);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.3),0 10px 30px rgba(0,0,0,.35)}
.x-home .dock i{position:relative;width:54px;height:54px;border-radius:13px;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.18),0 2px 6px rgba(0,0,0,.35);font-style:normal}
.x-home .dock i b{font-size:26px;color:#fff}
.x-home .dock i.on::after{content:"";position:absolute;bottom:-6px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:rgba(255,255,255,.75)}
.x-home .dock .d-find{background:linear-gradient(90deg,#57c2ff 50%,#e9eef6 50%)}
.x-home .dock .d-find b{color:#11335a!important}
.x-home .dock .d-saf{background:linear-gradient(180deg,#fff,#dfe3ea)}
.x-home .dock .d-saf b{color:#1a7cff!important;font-size:34px!important}
.x-home .dock .d-msg{background:linear-gradient(180deg,#6af07c,#1fc23a)}
.x-home .dock .d-mail{background:linear-gradient(180deg,#5fb6ff,#1572f0)}
.x-home .dock .d-mus{background:linear-gradient(180deg,#ff6b81,#f5294a)}
.x-home .dock .d-pho{background:linear-gradient(180deg,#fff,#e9e9ee)}
.x-home .dock .d-pho b{color:#f59e0b!important}
.x-home .dock .d-smm{background:#000;padding:10px}
.x-home .dock .d-smm .gl{color:#fff}
.x-home .dock .d-set{background:linear-gradient(180deg,#9a9aa1,#5c5c63)}
.x-home .dsep{width:1px;margin:6px 4px;background:rgba(255,255,255,.25)}
.x-home .dock .d-trash{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.1))}
.x-home .dock{gap:7px;padding:7px 9px 9px;border-radius:24px;background:rgba(110,90,140,.22);backdrop-filter:blur(40px) saturate(1.6);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.35),0 12px 40px rgba(0,0,0,.4)}
.x-home .dock i.dk{position:relative;display:block;width:56px;height:56px;padding:0;border-radius:13px;overflow:visible;background:none;box-shadow:none}
.x-home .dock i.dk>svg{display:block;width:100%;height:100%;border-radius:13px;box-shadow:0 0 0 .5px rgba(0,0,0,.25),0 3px 8px rgba(0,0,0,.35)}
.x-home .dock i.d-smm{background:#000;border-radius:13px;padding:11px;box-shadow:inset 0 0 0 1px #2a2a2c,0 3px 8px rgba(0,0,0,.35)}
.x-home .dock i.d-smm>svg{border-radius:0;box-shadow:none;color:#fff;height:auto}
.x-home .dock i.dk.on::after{content:"";position:absolute;bottom:-7px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:rgba(255,255,255,.8)}
.x-home .dock i.dk em{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#ff3b30;color:#fff;font:600 13px/22px -apple-system,Inter,sans-serif;font-style:normal;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.x-home .dsep{width:1px;margin:6px 3px;background:rgba(255,255,255,.28)}
.x-home .hw{display:grid;grid-template-columns:minmax(0,420px) 330px;justify-content:center;align-items:center;gap:90px;max-width:1000px;margin:0 auto;padding:70px 22px 150px}
.x-home .hw-steps{display:flex;flex-direction:column;gap:6px}
.x-home .hw-step{position:relative;display:grid;grid-template-columns:44px 1fr;gap:4px 12px;width:100%;padding:22px 22px 26px;border:0;border-radius:24px;background:transparent;text-align:left;color:#1d1d1f;cursor:pointer;transition:background .4s,opacity .4s}
.x-home .hw-step:not(.is-on){opacity:.42}
.x-home .hw-step:not(.is-on):hover{opacity:.75}
.x-home .hw-step.is-on{background:#fff;box-shadow:0 30px 60px -36px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.06)}
.x-home .hw-n{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#f2f2f7;color:#1d1d1f;font:700 15px var(--d);transition:background .4s,color .4s}
.x-home .hw-step.is-on .hw-n{background:#1d1d1f;color:#fff}
.x-home .hw-t b{display:block;font:700 24px/1.12 var(--d);letter-spacing:-.035em}
.x-home .hw-t small{display:block;margin-top:6px;color:#6e6e73;font-size:15px;line-height:1.45}
.x-home .hw-bar{position:absolute;left:78px;right:22px;bottom:12px;height:3px;border-radius:3px;background:#e5e5ea;overflow:hidden;opacity:0;transition:opacity .3s}
.x-home .hw-step.is-on .hw-bar{opacity:1}
.x-home .hw-bar em{display:block;height:100%;width:0;border-radius:3px;background:#1d1d1f}
.x-home .hw-step.is-run .hw-bar em{animation:xh-hw-fill var(--dur) linear forwards}
@keyframes xh-hw-fill{to{width:100%}}
.x-home .hw-stage{position:relative}
.x-home .hw-stage::before{content:"";position:absolute;inset:8% -14%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.08),transparent);z-index:-1}
.x-home .hw-stage .phone{box-shadow:0 60px 100px -40px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.06)}
.x-home .hw-scr{position:absolute;inset:0;opacity:0;transform:scale(.97);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.x-home .hw-scr.is-on{opacity:1;transform:none;pointer-events:auto}
@media(max-width:900px){.x-home .hw{grid-template-columns:1fr;gap:30px;padding:40px 18px 90px}
.x-home .hw-stage{order:-1;width:min(262px,68vw);margin:0 auto}
.x-home .hw-steps{flex-direction:row;gap:8px}
.x-home .hw-step{grid-template-columns:1fr;flex:1;min-width:0;padding:14px 12px 18px;border-radius:18px;text-align:center}
.x-home .hw-n{width:32px;height:32px;margin:0 auto 4px;border-radius:10px;font-size:13px}
.x-home .hw-t b{font-size:15px}
.x-home .hw-t small{display:none}
.x-home .hw-bar{left:14px;right:14px;bottom:8px}
.x-home .hw-cap{display:block;order:2;margin:-14px 0 0;min-height:44px;color:#6e6e73;font-size:15px;line-height:1.45;text-align:center}

}
.x-home .hw-cap{display:none}
.x-home .app-top span.lg{padding:0;background:none}
.x-home .app-top .lg svg{width:58px;height:auto;fill:#fff;color:#fff;display:block}
.x-home .wal{display:inline-flex;align-items:center;gap:6px;padding:3px 3px 3px 9px;border-radius:999px;background:#141415;box-shadow:inset 0 0 0 1px #2a2a2c;font-weight:600;font-size:11.5px}
.x-home .wal>i{font-size:10px;color:#a1a1a6}
.x-home .wal b{display:inline-flex;align-items:center;gap:4px;height:20px;min-width:20px;justify-content:center;padding:0 6px;border-radius:999px;background:#fff;color:#000;font-size:10px}
.x-home .app-top span.wal{padding:3px 3px 3px 9px;background:#141415}
.x-home .crumbs{display:flex;gap:6px;margin:0 0 10px}
.x-home .crumbs span{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:#141415;box-shadow:inset 0 0 0 1px #2a2a2c;font-size:11px;font-weight:600}
.x-home .crumbs i{font-size:11px}
.x-home .ysv{display:block;margin:0 0 6px;color:#6e6e73;font-size:9.5px;font-weight:700;letter-spacing:.08em}
.x-home .ysv u{text-decoration:none;color:#fff;letter-spacing:0;font-weight:600}
.x-home .mrow em small{display:block;color:#86868b;font-size:9px;font-weight:500;text-align:right}
.x-home .facts{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 10px}
.x-home .facts span{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;background:#141415;box-shadow:inset 0 0 0 1px #2a2a2c;font-size:10.5px;font-weight:600}
.x-home .facts i{font-size:9px;color:#a1a1a6}
.x-home .facts .ok i{color:#30d158}
.x-home .qchips{display:flex;gap:5px;margin:6px 0 4px}
.x-home .qchips span{padding:4px 9px;border-radius:999px;background:#141415;font-size:10.5px;font-weight:600;color:#a1a1a6}
.x-home .qchips .on{background:#fff;color:#000}
.x-home .mtab{position:absolute;left:10px;right:10px;bottom:12px;display:flex;justify-content:space-around;align-items:center;height:50px;border-radius:20px;background:rgba(28,28,30,.92);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.14);z-index:3}
.x-home .mtab span{display:flex;flex-direction:column;align-items:center;gap:3px;color:rgba(255,255,255,.55);font-size:8px;font-weight:600}
.x-home .mtab span i{font-size:13px}
.x-home .mtab .pl{color:#fff}
.x-home .mtab .pl b{display:grid;place-items:center;width:30px;height:20px;border-radius:8px;background:#fff;color:#000;font-size:10px}
.x-home .s1 .mtab{bottom:14px}
.x-home .svl.sel{box-shadow:inset 0 0 0 1.5px #fff;margin-bottom:8px}
.x-home .g-named span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;aspect-ratio:1.05}
.x-home .g-named small{font-size:9.5px;font-weight:600;color:#d2d2d7}
.x-home .g-fav{box-shadow:inset 0 0 0 1px rgba(255,214,10,.4)!important}
.x-home .g-fav i{color:#ffd60a}
.x-home .scr .v.o1,.x-home .scr .v.o2,.x-home .scr .v.o3{padding-bottom:70px}
.x-home .ui{grid-template-columns:200px 1fr 250px}
.x-home .ui-side{display:flex;flex-direction:column;gap:2px;padding:16px 10px}
.x-home .ui-side .wm{padding:2px 6px 14px}
.x-home .ui-side .wm svg{width:78px;height:auto;fill:#fff;color:#fff}
.x-home .ui-side a{gap:9px;padding:5px 6px;color:#f5f5f7;font-size:12px}
.x-home .ui-side a em{margin-left:auto;font-style:normal;font-size:10px;font-weight:700}
.x-home .ui-side a em.n{color:#86868b}
.x-home .ui-side a em.b{min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#0a84ff;color:#fff;display:grid;place-items:center}
.x-home .ui-new{justify-content:center;height:30px;margin:0 0 10px;border-radius:9px!important;background:linear-gradient(#fff,#e6e6eb)!important;color:#000!important;font-weight:650}
.x-home .tl{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;color:#fff;font-size:9px;box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.x-home .tl.ind{background:linear-gradient(#7d7bff,#4f4ccf)}
.x-home .tl.blu{background:linear-gradient(#3aa0ff,#0a6fe0)}
.x-home .tl.org{background:linear-gradient(#ffb340,#f08a00)}
.x-home .tl.pur{background:linear-gradient(#cf7dff,#9d3fd9)}
.x-home .tl.grn{background:linear-gradient(#4cd964,#23a83d)}
.x-home .tl.msg{background:linear-gradient(#5fdc6f,#28b43d)}
.x-home .ui-me{display:flex;align-items:center;gap:8px;margin-top:auto;padding:8px 6px;border-top:1px solid var(--line)}
.x-home .ui-me .av{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:linear-gradient(#a5abb8,#858a96);color:#fff;font-size:11px;font-weight:600}
.x-home .ui-me b{display:block;font-size:11.5px}
.x-home .ui-me small{color:#86868b;font-size:10px}
.x-home .ui-main{position:relative;padding:20px 22px;overflow:hidden}
.x-home .ui-top{position:absolute;right:16px;top:12px}
.x-home .ui-top .wal{font-size:11px}
.x-home .ui-top .wal b{padding:0 8px;font-size:10px}
.x-home .ui-main h3{margin:22px 0 12px;font-size:26px}
.x-home .ui-plats{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-bottom:14px}
.x-home .ui-plats span{width:auto;height:58px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:17px}
.x-home .ui-plats span small{font-size:9px;font-weight:600;color:#d2d2d7}
.x-home .ui-plats span.on small{color:#000}
.x-home .ui-lbl2{display:block;margin:0 0 6px;color:#6e6e73;font-size:9.5px;font-weight:700;letter-spacing:.08em}
.x-home .ui-svc>div{display:flex;align-items:center;gap:10px}
.x-home .ui-svc>div>i{font-size:18px}
.x-home .ui-svc b small{display:block;color:#86868b;font-size:9px;font-weight:500;text-align:right}
.x-home .ui-row{display:grid;grid-template-columns:1.6fr 1fr;gap:10px;margin-top:10px}
.x-home .ui-row .ui-lbl{margin:0 0 5px}
.x-home .ui-co{padding:20px 16px;gap:8px;background:#0d0d0e}
.x-home .ui-k{color:#6e6e73;font-size:9.5px;font-weight:700;letter-spacing:.08em}
.x-home .ui-sum{display:flex;align-items:center;gap:9px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.x-home .ui-sum>i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#fff;color:#000;font-size:16px}
.x-home .ui-sum b{display:block;font-size:11.5px}
.x-home .ui-sum small{color:#86868b;font-size:10px}
.x-home .ui-l{display:flex;justify-content:space-between;font-size:11px;color:#a1a1a6}
.x-home .ui-l b{color:#fff;font-weight:600}
.x-home .ui-co .t b{font-size:24px}
.x-home .ui-btn{display:flex!important;align-items:center;justify-content:center;gap:6px;font-size:12.5px;white-space:nowrap}
.x-home .ui-btn i{font-size:10px}
.x-home .ui-as{display:flex;flex-direction:column;gap:5px;color:#86868b;font-size:9.5px}
.x-home .ui-as i{width:12px;margin-right:5px}
.x-home .tl svg{width:12px;height:12px}
.x-home .ui-sub{margin:-8px 0 12px;color:#86868b;font-size:12px}
.x-home .ui-dsc{margin:10px 0 2px;padding:10px 12px;border-radius:12px;background:#111;box-shadow:inset 0 0 0 1px var(--line)}
.x-home .ui-dsc-h{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.x-home .ui-dsc-h>span{display:grid;place-items:center;width:18px;height:18px;border-radius:6px;background:#1c1c1e;color:#a1a1a6;font-size:8px}
.x-home .ui-dsc-h b{font-size:11.5px}
.x-home .ui-dsc-h em{margin-left:auto;padding:3px 8px;border-radius:999px;background:#1c1c1e;font-style:normal;font-size:9.5px;font-weight:600}
.x-home .ui-dsc-h em i{font-size:7px;margin-left:3px}
.x-home .ui-pills{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.x-home .ui-pills span{display:inline-flex;align-items:center;gap:5px;padding:4px 9px 4px 6px;border-radius:999px;background:#1a1a1c;box-shadow:inset 0 0 0 1px var(--line);font-size:10px;font-weight:600}
.x-home .ui-pills span i{display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#2a2a2c;color:#a1a1a6;font-size:7px}
.x-home .ui-pills span small{color:#86868b;font-weight:500;font-size:10px}
.x-home .ui-pills .ok i{background:rgba(48,209,88,.16);color:#30d158}
.x-home .ui-notes{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.x-home .ui-notes li{display:flex;gap:6px;align-items:center;color:#a1a1a6;font-size:10px}
.x-home .ui-notes i{display:grid;place-items:center;width:12px;height:12px;border-radius:50%;background:#2a2a2c;color:#fff;font-size:6px}
.x-home .ui-main h3{margin-top:18px}
.x-home .ycm{display:flex;gap:9px;align-items:flex-start;margin-top:9px}
.x-home .ycm>i{flex:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#ff8a65,#d81b60)}
.x-home .ycm>i.c2{background:linear-gradient(135deg,#64b5f6,#3949ab)}
.x-home .ycm b{display:block;color:#aaa;font-size:11px;font-weight:500}
.x-home .hero .ip .ycm p{margin:1px 0 0;color:#fff;font-size:12px;line-height:1.3}
.x-home .stage-head{max-width:760px;margin:0 auto;padding:0 22px;text-align:center}
.x-home .stage-head h2{margin:0 0 16px;font:700 clamp(40px,5.6vw,72px)/1 var(--d);letter-spacing:-.05em;word-spacing:.06em}
.x-home .stage-head p{max-width:560px;margin:0 auto;color:#86868b;font-size:clamp(17px,1.6vw,21px);line-height:1.45;letter-spacing:-.015em}
@media(min-width:901px){.x-home .stage{height:auto!important;margin-top:0!important;padding:110px 0 0}
.x-home .stick{position:relative!important;top:auto!important;height:auto!important;overflow:visible!important;padding:64px 0 calc(min(900px,72vw,(100vh - 120px)*1.05)*.34)}
.x-home .mb3{--W:min(900px,72vw,calc((100vh - 120px)*1.05));transform:translateY(calc((1 - var(--q,0))*8%)) rotateX(calc(-19deg + var(--q,0)*6deg)) scale(calc(.95 + var(--q,0)*.05))}

}
@media(prefers-reduced-motion:reduce){.x-home{animation:none!important;transition:none!important}
.x-home .rv{opacity:1;transform:none}
.x-home .mb3,.x-home .mb-lid{transform:none}}


/* fixes */
.x-home .final { padding-bottom: 120px; } .x-home-auth { max-width: 820px; margin: 0 auto; padding: 0 22px 100px; }
.x-home .eyebrow { display: none; }
.x-home .cat > .cnote { margin: 30px 0 0; }
.x-home .final h2 { margin-bottom: 48px; }
.x-home .cat { padding-bottom: 90px; } .x-home .faq { padding-bottom: 40px; } .x-home .final { padding-top: 110px; }
/* Google's sign-in frame is light; match its color-scheme so the browser doesn't paint a white backdrop. */
.g_id_signin iframe, #credential_picker_container iframe { color-scheme: light; }
.x-auth-card .g_id_signin { margin-top: 10px; }
.x-auth-card .checkbox { margin: 4px 0 18px; }
.x-auth-card .checkbox label { display: inline-flex; align-items: center; gap: 10px; padding: 0; min-height: 0; }
.x-auth-card .checkbox input[type="checkbox"] { position: static; flex: none; width: 18px; height: 18px; margin: 0; accent-color: #fff; }
/* Safari drops backdrop blur inside animated/clipped mockups: banners must not rely on it. */
.x-home .ban { background: rgba(46,46,50,.97); }
.x-home .mok { -webkit-backdrop-filter: blur(8px); }
.x-home .ui-plats span.on small { color: #1d1d1f !important; }
/* Login popup: 16px fields (no iOS zoom on focus); background locked while open. */
.x-auth .form-control, .x-auth input { font-size: 16px !important; }
html:has(.x-auth.is-open), html:has(.x-auth.is-open) body { overflow: hidden !important; }
@media (max-width: 900px) {
  .x-home .hero { padding-top: 76px; }
  .x-home .cat { padding-bottom: 40px; } .x-home .cat > .cnote { margin: 24px 0 0; }
  .x-home .faq { padding-top: 0; padding-bottom: 10px; } .x-home .final { padding-top: 72px; padding-bottom: 64px; }
}
/* Hero fits one screen on desktop: both columns centred, phone scaled to the window height. */
@media (min-width: 901px) {
  .x-home .hero { min-height: 100svh; display: grid; align-content: center; padding: 88px 22px 40px; }
  .x-home .hero-grid { width: 100%; }
  .x-home .hero .lock { align-self: center; }
}
@media (min-width: 901px) and (max-height: 960px) { .x-home .hero .ip { zoom: .9; } }
@media (min-width: 901px) and (max-height: 880px) { .x-home .hero .ip { zoom: .82; } }
@media (min-width: 901px) and (max-height: 800px) { .x-home .hero .ip { zoom: .74; } }
@media (min-width: 901px) and (max-height: 720px) { .x-home .hero .ip { zoom: .66; } }
@media (min-width: 901px) and (max-height: 640px) { .x-home .hero .ip { zoom: .58; } }
.x-home .hero h1 { word-spacing: .08em; }
.x-home button.b { border: 0; font: inherit; cursor: pointer; } .x-home button.b-o { background: transparent; color: #fff; } .x-home button.b-o:hover { background: rgba(255,255,255,.08); }
.x-home .white h2, .x-home .white h3, .x-home .tile:not(.dk) h3, .x-home .pcard.lt h3 { color: #1d1d1f; }
.x-home .tile.dk h3, .x-home .pcard.dk h3 { color: #fff; }
.x-home .stage { height: 135vh; }
@media (max-width: 900px) { .x-home .stage { height: auto; } }
.x-auth-card .row { margin: 0; }
.x-auth-card .row > div { float: none; width: 100%; padding: 0; }
.x-auth-card .form-inline .form-group { display: block; margin: 0 0 10px; }
.x-auth-card .form-inline .x-btn--primary { width: 100%; }
.x-auth-card .pull-right-middle { display: none; }
.x-auth-card .form-group__password { position: relative; }
.x-auth-card .forgot-password { position: absolute; top: 0; right: 0; color: #fff; font-size: 13.5px; font-weight: 500; }
.x-auth-card .g_id_signin { display: flex; justify-content: center; margin-top: 6px; }
/* login sheet */
.x-auth { position: fixed; inset: 0; z-index: 1200; display: none; place-items: center; padding: 16px; }
.x-auth.is-open { display: grid; }
.x-auth-scrim { position: absolute; inset: 0; border: 0; background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.x-auth-card { position: relative; width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 32px 28px 26px; border-radius: 30px; background: #111; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 40px 100px -20px #000; animation: x-auth-in .4s cubic-bezier(.2,.8,.2,1); color: #fff; }
@keyframes x-auth-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.x-auth-card h2 { margin: 0 0 4px; font: 700 28px var(--display); letter-spacing: -.04em; }
.x-auth-card > p { margin: 0 0 22px; color: #86868b; }
.x-auth-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #1c1c1e; color: #a1a1a6; font-size: 18px; cursor: pointer; }
.x-auth-card .form-group { margin-bottom: 14px; }
.x-auth-card .control-label { display: flex; justify-content: space-between; color: #a1a1a6; font-size: 13.5px; font-weight: 500; }
.x-auth-card .control-label a { color: #fff; font-weight: 500; }
.x-auth-card .form-control { background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); border-radius: 14px; min-height: 52px; }
.x-auth-card .x-btn--primary { width: 100%; min-height: 54px; margin-top: 6px; font-size: 16px; }
.x-auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: #6e6e73; font-size: 12.5px; }
.x-auth-or::before, .x-auth-or::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.12); }
.x-auth-google { display: flex; justify-content: center; min-height: 44px; }
.x-auth-foot { margin: 18px 0 0; text-align: center; color: #86868b; font-size: 14px; }
.x-auth-foot a { color: #fff; font-weight: 600; }
.x-auth-card .checkbox label { font-size: 14px; }
@media (max-width: 700px) { .x-auth { place-items: end center; padding: 0; } .x-auth-card { width: 100%; border-radius: 28px 28px 0 0; padding: 28px 20px calc(24px + env(safe-area-inset-bottom)); } }

/* ── Sign up ──────────────────────────────────────────────────────── */
.x-auth-page { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 460px); gap: 64px; align-items: center; max-width: 1160px; min-height: calc(100vh - 120px); margin: 0 auto; padding: 120px 24px 60px; }
.x-auth-side h1 { margin: 0 0 20px; font: 700 clamp(48px, 6vw, 84px)/.96 var(--display); letter-spacing: -.05em; }
.x-auth-lede { max-width: 460px; margin: 0 0 34px; color: var(--text-2); font-size: 19px; line-height: 1.5; }
.x-perks { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 18px; }
.x-perks li { display: flex; gap: 14px; align-items: flex-start; }
.x-perks li > span { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: var(--text); color: var(--bg); font-size: 11px; margin-top: 2px; }
.x-perks b { display: block; font-weight: 600; font-size: 16px; }
.x-perks div { color: var(--text-2); font-size: 15px; }
.x-auth-plats { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid var(--line); font-size: 22px; }
.x-auth-plats span { color: var(--text-3); font-size: 13.5px; font-weight: 500; }
.x-auth-box { padding: 34px 32px 30px; border-radius: 30px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2), 0 50px 100px -40px rgba(255,255,255,.06); }
.x-auth-box h2 { margin: 0 0 6px; font: 700 30px var(--display); letter-spacing: -.04em; }
.x-auth-sub { margin: 0 0 24px; color: var(--text-2); font-size: 15px; }
.x-auth-sub a { color: var(--text); font-weight: 600; }
.x-auth-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.x-auth-fields .form-group { grid-column: 1 / -1; margin-bottom: 14px; }
.x-auth-fields .x-f-first_name, .x-auth-fields .x-f-last_name { grid-column: auto; }
.x-auth-box .control-label { color: var(--text-2); font-size: 13.5px; font-weight: 500; }
.x-auth-box .form-control { min-height: 52px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); border-radius: 14px; }
.x-auth-box .x-check { margin: 4px 0 18px; font-size: 14px; }
.x-auth-box .x-check a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.x-auth-box .x-btn--lg { min-height: 56px; }
.x-auth-or { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; color: var(--text-3); font-size: 12.5px; }
.x-auth-or::before, .x-auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.x-auth-google { display: flex; justify-content: center; min-height: 44px; }
@media (max-width: 900px) {
  .x-auth-page { grid-template-columns: 1fr; gap: 28px; padding: 104px 16px 40px; min-height: 0; }
  .x-auth-side h1 { font-size: 46px; }
  .x-auth-lede { font-size: 17px; margin-bottom: 24px; }
  .x-perks, .x-auth-plats { display: none; }
  .x-auth-box { padding: 26px 20px 22px; border-radius: 26px; }
  .x-auth-fields { grid-template-columns: 1fr; }
}
/* Sign up: no empty band on top; form sits beside the heading; compact on phones */
.x-auth-page { align-items: start; min-height: 0; padding: 64px 24px 72px; }
.x-auth-side { padding-top: 40px; }
@media (max-width: 900px) {
  .x-auth-page { gap: 18px; padding: 28px 16px 48px; }
  .x-auth-side { padding-top: 0; }
  .x-auth-side h1 { margin-bottom: 10px; font-size: 38px; }
  .x-auth-side .x-auth-lede { margin-bottom: 0; font-size: 15px; }
  .x-auth-side .x-perks, .x-auth-side .x-auth-plats { display: none; }
  .x-auth-box > h2 { display: none; }
  .x-auth-box .x-auth-sub { margin-bottom: 16px; }
  .x-auth-fields { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; }
  .x-auth-fields > .form-group { grid-column: 1 / -1; }
  .x-auth-fields > .x-f-first_name, .x-auth-fields > .x-f-last_name { grid-column: auto; }
}

/* ── Add funds ────────────────────────────────────────────────────── */
.xf { max-width: 1120px; margin: 0 auto; }
.xf [hidden] { display: none !important; }
.xf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 8px 0 28px; }
.xf-head h1 { margin: 0; font: 700 clamp(34px, 4.4vw, 52px)/1 var(--display); letter-spacing: -.045em; }
.xf-head p { margin: 10px 0 0; color: var(--text-2); font-size: 17px; }
.xf-head-bal { text-align: right; }
.xf-head-bal span { display: block; color: var(--text-3); font-size: 13px; }
.xf-head-bal strong { font: 700 28px var(--display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }

.xf-alert { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; padding: 14px 16px; border-radius: 16px; font-size: 14.5px; }
.xf-alert i { margin-top: 3px; }
.xf-alert.is-ok { background: var(--ok-soft); color: var(--ok); }
.xf-alert.is-bad { background: var(--bad-soft); color: var(--bad); }
.xf-alert div { color: var(--text); }

.xf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.xf-main { display: grid; gap: 16px; margin: 0; }
.xf-step, .xf-sum { padding: 26px; border-radius: 28px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.xf-step-h { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.xf-step-h span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--text); color: var(--bg); font: 700 13px var(--font); }
.xf-step-h h2 { margin: 0; font: 650 19px var(--display); letter-spacing: -.025em; }

/* payment type */
.xf-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.xf-kind { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 18px 16px; border: 0; border-radius: 20px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-align: left; cursor: pointer; transition: box-shadow .2s var(--ease), transform .2s var(--ease), background .2s; }
.xf-kind:hover { background: var(--panel-3); }
.xf-kind:active { transform: scale(.985); }
.xf-kind.is-on { box-shadow: inset 0 0 0 2px var(--text); background: var(--panel-2); }
.xf-kind b { margin-top: 12px; font: 650 18px var(--display); letter-spacing: -.02em; }
.xf-kind small { color: var(--text-2); font-size: 13.5px; }
.xf-kind em { position: absolute; top: 16px; right: 16px; padding: 4px 9px; border-radius: 999px; background: var(--panel-3); color: var(--text-2); font: 600 11.5px var(--font); font-style: normal; }
.xf-kind em.is-ok { background: var(--ok-soft); color: var(--ok); }
.xf-marks { display: flex; align-items: center; gap: 6px; height: 30px; }
.xf-mk { display: grid; place-items: center; height: 26px; min-width: 40px; padding: 0 7px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); font-style: normal; }
.xf-mk svg { height: 12px; width: auto; max-width: 34px; }
.xf-mk.is-mc svg { height: 17px; }
.xf-mk.is-ap svg, .xf-mk.is-gp svg { height: 14px; }
.xf-mk.is-ic { background: var(--panel-3); color: var(--text); box-shadow: none; }
.xf-coins { gap: 0; }
.xf-coins i { width: 28px; height: 28px; margin-right: -6px; border-radius: 50%; box-shadow: 0 0 0 2.5px var(--panel-2); font-style: normal; }
.xf-coins svg { display: block; width: 100%; height: 100%; }

/* gateway choice */
.xf-gws { display: grid; gap: 8px; margin-top: 18px; }
.xf-sub { color: var(--text-3); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.xf-gw { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-align: left; cursor: pointer; transition: box-shadow .2s; }
.xf-gw.is-on { box-shadow: inset 0 0 0 1.5px var(--text); }
.xf-gw-logo { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 92px; height: 40px; padding: 0 10px; border-radius: 11px; background: var(--panel-3); font-size: 16px; }
.xf-gw-logo b { font: 700 15px var(--display); letter-spacing: -.02em; }
.xf-2328 { width: 20px; height: 20px; }
.xf-gw-logo.is-bin { color: #f0b90b; }
.xf-bin { height: 22px; width: auto; }
.xf-gw-t { flex: 1; min-width: 0; }
.xf-gw-t b { display: block; font-size: 14.5px; font-weight: 600; }
.xf-gw-t small { color: var(--text-2); font-size: 12.5px; }
.xf-gw em { padding: 3px 8px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font: 600 11.5px var(--font); font-style: normal; }
.xf-gw-ck { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-3); }
.xf-gw.is-on .xf-gw-ck { background: var(--text); box-shadow: inset 0 0 0 5px var(--text), inset 0 0 0 20px var(--bg); }

/* amount */
.xf-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.xf-chips button { height: 50px; border: 0; border-radius: 14px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: 600 16px var(--font); font-variant-numeric: tabular-nums; cursor: pointer; transition: background .15s, color .15s, transform .15s; }
.xf-chips button:hover { background: var(--panel-3); }
.xf-chips button:active { transform: scale(.96); }
.xf-chips button.is-on { background: var(--text); color: var(--bg); box-shadow: none; }
.xf-chips.is-quick { margin-top: 10px; }
.xf-chips.is-quick button { height: 40px; font-size: 14px; border-radius: 999px; }
.xf-field { display: flex; align-items: center; gap: 8px; height: 72px; margin: 0; padding: 0 20px; border-radius: 18px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line-2); cursor: text; transition: box-shadow .2s; }
.xf-field:focus-within { box-shadow: inset 0 0 0 1.5px var(--text), var(--ring); }
.xf-field span { color: var(--text-3); font: 600 30px var(--display); }
.xf-field input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; box-shadow: none !important; color: var(--text); font: 700 34px var(--display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; outline: 0; -moz-appearance: textfield; }
.xf-field input::-webkit-outer-spin-button, .xf-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.xf-field em { color: var(--text-3); font: 600 13px var(--font); font-style: normal; }
.xf-cpf { display: grid; gap: 6px; margin: 14px 0 0; color: var(--text-2); font-size: 13px; font-weight: 500; }

/* summary */
.xf-sum-rows div { display: flex; justify-content: space-between; padding: 6px 0; color: var(--text-2); font-size: 15px; }
.xf-sum-rows b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.xf-sum-rows .is-ok b, .xf-sum-rows .is-ok span { color: var(--ok); }
.xf-sum-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.xf-sum-total span { color: var(--text-2); font-size: 15px; }
.xf-sum-total strong { font: 700 34px var(--display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.xf-pay { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 58px; margin-top: 18px; border: 0; border-radius: 999px; background: var(--text); color: var(--bg); font: 650 17px var(--font); cursor: pointer; transition: opacity .2s, transform .15s; }
.xf-pay:active { transform: scale(.985); }
.xf-pay.is-idle { opacity: .45; }
.xf-pay.is-busy { opacity: .7; cursor: progress; }
.xf-pay i { font-size: 14px; }
.xf-fine { margin: 12px 0 0; text-align: center; color: var(--text-3); font-size: 12.5px; }
.xf-native { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* side */
.xf-side { position: sticky; top: calc(var(--top) + 20px); display: grid; gap: 14px; }
.xf-wallet { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 210px; padding: 22px; border-radius: 24px; color: #fff;
  background: radial-gradient(120% 90% at 100% 0%, #3a3a3e 0%, transparent 55%), linear-gradient(150deg, #1c1c1e, #050505 70%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 30px 60px -30px rgba(0,0,0,.8); }
.xf-wallet::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.07) 45%, transparent 60%); transform: translateX(-100%); animation: xf-shine 6s 1.2s ease-in-out infinite; }
@keyframes xf-shine { 30%, 100% { transform: translateX(100%); } }
.xf-wallet-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: auto; }
.xf-logo { height: 20px; width: auto; color: #fff; }
.xf-wallet-top span { padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.12); font: 600 11px var(--font); }
.xf-k { margin-top: 26px; color: rgba(255,255,255,.55); font-size: 12.5px; }
.xf-wallet-bal { font: 700 38px/1.1 var(--display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.xf-wallet-foot { display: flex; justify-content: space-between; margin-top: 14px; color: rgba(255,255,255,.6); font-size: 12.5px; }
.xf-notes { list-style: none; margin: 0; padding: 6px 18px; border-radius: 22px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.xf-notes li { display: flex; gap: 12px; padding: 14px 0; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.xf-notes li + li { border-top: 1px solid var(--line); }
.xf-notes li > span { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; background: var(--panel-3); color: var(--text); font-size: 13px; }
.xf-notes b { display: block; color: var(--text); font-weight: 600; font-size: 14px; }
.xf-notes a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.xf-help { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); font-size: 13.5px; }
.xf-help span { flex: 1; } .xf-help b { color: var(--text); font-weight: 600; }
.xf-help:hover { background: var(--panel-2); color: var(--text-2); }

.xf-empty { max-width: 520px; margin: 40px auto; padding: 40px 28px; text-align: center; border-radius: 28px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.xf-empty > span { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: var(--panel-3); font-size: 24px; }
.xf-empty h2 { margin: 18px 0 8px; font: 700 24px var(--display); letter-spacing: -.03em; }
.xf-empty p { margin: 0 0 22px; color: var(--text-2); }
.xf-custom { margin-top: 24px; padding: 22px; border-radius: 22px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); }

/* history */
.xf-hist { margin-top: 40px; }
.xf-hist-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.xf-hist-h h2 { margin: 0; font: 700 24px var(--display); letter-spacing: -.035em; }
.xf-hist-h span { color: var(--text-3); font-size: 13.5px; }
.xf-rows { border-radius: 24px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.xf-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.xf-row + .xf-row { border-top: 1px solid var(--line); }
.xf-row-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); font-size: 13px; }
.xf-row-t { flex: 1; min-width: 0; }
.xf-row-t b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14.5px; }
.xf-row-t small { color: var(--text-3); font-size: 12.5px; }
.xf-row-amt { font: 650 16px var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.xf-inv { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--panel-3); color: var(--text); font: 600 13px var(--font); cursor: pointer; }
.xf-inv:hover { background: var(--line-2); }
.xf-inv.is-off { opacity: .45; cursor: default; }
.xf-hist .pagination { margin: 18px 0 0; }

@media (max-width: 980px) {
  .xf-grid { grid-template-columns: 1fr; }
  .xf-side { position: static; grid-template-columns: 1fr; }
  .xf-side .xf-wallet { display: none; }
}
@media (max-width: 640px) {
  .xf-head { align-items: flex-start; flex-direction: column; gap: 14px; margin-bottom: 20px; }
  .xf-head-bal { text-align: left; }
  .xf-step, .xf-sum { padding: 20px 16px; border-radius: 24px; }
  .xf-chips { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .xf-chips button { height: 46px; font-size: 14.5px; border-radius: 12px; }
  .xf-chips.is-quick { grid-template-columns: repeat(5, 1fr); }
  .xf-field { height: 64px; }
  .xf-gw-logo { min-width: 72px; }
  .xf-row { flex-wrap: wrap; gap: 10px 12px; padding: 14px 16px; }
  .xf-row-t { flex-basis: calc(100% - 140px); }
  .xf-inv span { display: none; }
  .xf-inv { width: 34px; padding: 0; justify-content: center; }
}
@media (min-width: 981px) { .xf-head-bal { display: none; } }
.xf-mk.is-ap svg { height: 16px; }
@media (max-width: 640px) {
  .xf-row { flex-wrap: nowrap; }
  .xf-row-t { flex: 1 1 auto; }
  .xf-gw { gap: 10px; padding: 10px 12px; }
  .xf-gw-logo { min-width: 0; padding: 0 9px; }
  .xf-gw em { display: none; }
}
/* side: next steps + ways to pay (fills the column on desktop) */
.xf-card { padding: 18px 18px 16px; border-radius: 22px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.xf-card h3 { margin: 0 0 14px; font: 650 14px var(--font); letter-spacing: -.01em; }
.xf-flow ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.xf-flow ol::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1.5px; background: var(--line-2); }
.xf-flow ol::after { content: ""; position: absolute; left: 3px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); animation: xf-flow 4.5s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes xf-flow { 0%, 12% { top: 4px; } 40%, 52% { top: calc(50% - 4px); } 82%, 100% { top: calc(100% - 12px); } }
.xf-flow li { position: relative; display: flex; gap: 14px; font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.xf-flow li > span { position: relative; z-index: 1; width: 13px; height: 13px; flex: 0 0 13px; margin-top: 2px; border-radius: 50%; background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--line-3); }
.xf-flow b { display: block; color: var(--text); font-weight: 600; font-size: 13.5px; }
.xf-ways-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.xf-ways-row .xf-mk { height: 32px; min-width: 0; }
.xf-ways-coins { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.xf-ways-coins span { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: 10px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); font: 600 12.5px var(--font); }
.xf-ways-coins svg { width: 20px; height: 20px; }
@media (max-width: 980px) { .xf-flow, .xf-ways { display: none; } }
.xf-left { min-width: 0; }
.xf-left .xf-hist { margin-top: 28px; }
.xf-mk.is-ap svg { height: 20px; }
@media (max-width: 980px) { .xf-left { display: contents; } .xf-grid > .xf-side { order: 2; } .xf-left .xf-hist { order: 3; } }
@media (max-width: 980px) { .xf-head-bal { display: none; } }

/* the panel injects a per-method instruction box after the form */
.xf .instruction { margin: 16px 0 0; padding: 16px 18px; border-radius: 20px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.xf .instruction > .control-label { display: block; margin-bottom: 6px; color: var(--text-3); font-size: 12.5px; font-weight: 600; }
.xf .instruction .panel-body { padding: 0; border: 0; background: none; color: var(--text-2); text-align: left; font-size: 14px; line-height: 1.55; }
.xf .instruction.is-empty { display: none !important; }

/* long payment-method names must never widen the page */
.xf-grid { grid-template-columns: minmax(0, 1fr) 340px; }
.xf-grid > *, .xf-left > *, .xf-hist, .xf-rows, .xf-row { min-width: 0; }
@media (max-width: 980px) { .xf-grid { grid-template-columns: minmax(0, 1fr); } }
/* "What happens next": each step lights up in turn (no travelling dot). */
.xf-flow ol::after { display: none; }
.xf-flow li > span { animation: xf-node 6s var(--ease) infinite; }
.xf-flow li:nth-child(2) > span { animation-delay: 2s; } .xf-flow li:nth-child(3) > span { animation-delay: 4s; }
@keyframes xf-node { 0%, 30% { background: var(--ok); box-shadow: inset 0 0 0 1.5px var(--ok), 0 0 0 4px var(--ok-soft); } 36%, 100% { background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--line-3); } }
@media (prefers-reduced-motion: reduce) { .xf-flow li > span { animation: none; } }
/* Alerts the panel injects into the page (validation such as "Minimal amount"). */
.xf .alert { align-items: center; gap: 10px; margin: 0 0 16px; padding: 13px 14px 13px 16px; border-radius: 16px; font-size: 14.5px; line-height: 1.4; }
.xf .alert-danger { background: var(--bad-soft); box-shadow: inset 0 0 0 1px rgba(255,69,58,.22); color: var(--text); }
.xf .alert-danger::before { content: "\f06a"; flex: none; color: var(--bad); font: 900 15px "Font Awesome 5 Pro", "Font Awesome 5 Free"; }
.xf .alert-success::before { content: "\f058"; flex: none; color: var(--ok); font: 900 15px "Font Awesome 5 Pro", "Font Awesome 5 Free"; }
.xf .alert .close { position: static; order: 9; flex: none; margin: 0 0 0 auto; width: 26px; height: 26px; border-radius: 50%; font-size: 17px; color: var(--text-3); }
.xf .alert > div:empty { display: none; }
/* Payment history */
.xph { display: flex; flex-direction: column; gap: 20px; }
.xph h3 { margin: 0 0 10px 4px; color: var(--text-3); font: 650 12.5px var(--font); letter-spacing: .02em; }
.xph-card { border-radius: 22px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.xph-it + .xph-it { border-top: 1px solid var(--line); }
.xph-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; transition: background .2s; }
.xph-row:hover, .xph-it.is-open .xph-row { background: var(--panel-2); }
.xph-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 13px; background: var(--panel-3); color: var(--text); font-size: 15px; }
.is-crypto .xph-ic { background: rgba(247,147,26,.14); color: #f7931a; }
.is-card .xph-ic { background: rgba(10,132,255,.14); color: #64a8ff; }
.is-bonus .xph-ic { background: var(--ok-soft); color: var(--ok); }
.xph-t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.xph-t b { font-size: 14.5px; font-weight: 600; }
.xph-t small { color: var(--text-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.xph-row strong { font: 650 15.5px var(--font); font-variant-numeric: tabular-nums; }
.xph-row strong.is-pos { color: var(--ok); } .xph-row strong.is-neg { color: var(--text-2); }
.xph-chev { color: var(--text-3); font-size: 11px; transition: transform .25s var(--ease); }
.xph-it.is-open .xph-chev { transform: rotate(180deg); }
.xph-det { padding: 4px 18px 18px 72px; background: var(--panel-2); animation: xs-in .3s var(--ease) both; }
.xph-det dl { margin: 0; }
.xph-det dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.xph-det dl > div:first-child { border-top: 0; }
.xph-det dt { color: var(--text-3); font-weight: 500; } .xph-det dd { margin: 0; color: var(--text); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.xph-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); } .xph-ok i { font-size: 10px; }
.xph-rcpt { display: inline-flex; align-items: center; gap: 8px; height: 38px; margin-top: 12px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--panel-3); color: var(--text); font: 600 13px var(--font); cursor: pointer; }
.xph-rcpt:hover { background: var(--line-2); }
@media (max-width: 560px) { .xph-row { padding: 13px 14px; gap: 12px; } .xph-ic { width: 36px; height: 36px; border-radius: 11px; } .xph-det { padding: 4px 14px 16px; } }
/* The panel hides the native submit inline for every method; this button is our checkout control, so keep it visible. */
.xf .xf-pay[data-xf-pay] { display: flex !important; }
/* Removed by request: tips card and "What happens next" timeline. */
.xf-notes, .xf-flow { display: none !important; }

/* ── Orders ───────────────────────────────────────────────────────── */
.xo { max-width: 1180px; margin: 0 auto; }
.xo-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 8px 0 22px; }
.xo-head h1 { margin: 0; font: 700 clamp(34px, 4.4vw, 52px)/1 var(--display); letter-spacing: -.045em; }
.xo-head p { margin: 10px 0 0; color: var(--text-2); font-size: 17px; }
.xo-search { position: relative; display: flex; align-items: center; width: min(360px, 100%); height: 46px; margin: 0; padding: 0 16px; border-radius: 999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .2s; }
.xo-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--text), var(--ring); }
.xo-search > i { color: var(--text-3); font-size: 14px; }
.xo-search input { flex: 1; min-width: 0; height: 100%; padding: 0 10px; border: 0; background: none; box-shadow: none !important; color: var(--text); font-size: 15px; outline: 0; }
.xo-search-x { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--panel-3); color: var(--text-2); font-size: 11px; }

/* status tabs */
.xo-tabs { display: flex; gap: 6px; margin-bottom: 18px; padding: 4px; border-radius: 999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); overflow-x: auto; scrollbar-width: none; }
.xo-tabs::-webkit-scrollbar { display: none; }
.xo-tab { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; height: 38px; padding: 0 16px; border-radius: 999px; color: var(--text-2); font-size: 14px; font-weight: 550; white-space: nowrap; transition: background .2s, color .2s; }
.xo-tab:hover { color: var(--text); background: var(--panel-2); }
.xo-tab.is-on { background: var(--text); color: var(--bg); }
.xo-tab i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.xo-tab[data-st="pending"] i { background: var(--warn); } .xo-tab[data-st="inprogress"] i, .xo-tab[data-st="processing"] i { background: var(--info); }
.xo-tab[data-st="completed"] i { background: var(--ok); } .xo-tab[data-st="partial"] i { background: #ff9f0a; } .xo-tab[data-st="canceled"] i { background: var(--bad); }

/* rows */
.xo-list { border-radius: 26px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.xo-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 190px 96px 150px auto; align-items: center; gap: 18px; padding: 16px 20px; transition: background .2s; }
.xo-row + .xo-row { border-top: 1px solid var(--line); }
.xo-row:hover { background: var(--panel-2); }
.xo-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--panel-3); font-size: 19px; --mono-ink: var(--text); }
.xo-main { min-width: 0; }
.xo-svc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.xo-link { display: flex; align-items: center; gap: 4px; margin-top: 3px; min-width: 0; }
.xo-link-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: 13px; }
.xo-copy { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border: 0; border-radius: 8px; background: none; color: var(--text-3); font-size: 12.5px; cursor: pointer; }
.xo-copy:hover { background: var(--panel-3); color: var(--text); }
.xo-copy.is-copied { color: var(--ok); }
.xo-meta { color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.xo-prog-top { display: flex; align-items: baseline; gap: 2px; font-variant-numeric: tabular-nums; }
.xo-prog-top span { font-weight: 650; font-size: 14.5px; }
.xo-prog-top small { color: var(--text-3); font-size: 12.5px; }
.xo-bar { display: block; height: 5px; margin: 7px 0 6px; border-radius: 9px; background: var(--panel-3); overflow: hidden; }
.xo-bar i { display: block; height: 100%; width: 0; border-radius: 9px; background: var(--text); transition: width 1.1s var(--ease) .15s; }
.xo.is-in .xo-bar i { width: var(--w, 0); }
.xo-start { color: var(--text-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.xo-charge strong { display: block; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.xo-charge small { color: var(--text-3); font-size: 11.5px; }

/* status chip */
.xo-chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--panel-3); color: var(--text-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.xo-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.xo-s-pending .xo-chip { background: var(--warn-soft); color: var(--warn); }
.xo-s-run .xo-chip, .xo-s-proc .xo-chip { background: var(--info-soft); color: var(--info); }
.xo-s-run .xo-chip i, .xo-s-proc .xo-chip i { animation: xo-pulse 1.6s infinite; }
@keyframes xo-pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
.xo-s-done .xo-chip { background: var(--ok-soft); color: var(--ok); }
.xo-s-partial .xo-chip { background: rgba(255,159,10,.15); color: #ff9f0a; }
.xo-s-cancel .xo-chip { background: var(--bad-soft); color: var(--bad); }
.xo-s-run .xo-bar i, .xo-s-proc .xo-bar i { background: var(--info); }
.xo-s-done .xo-bar i { background: var(--ok); }
.xo-s-partial .xo-bar i { background: #ff9f0a; }
.xo-s-cancel .xo-bar i { background: var(--bad); }
.xo-reason { display: block; margin-top: 5px; color: var(--text-3); font-size: 11.5px; line-height: 1.35; }

/* actions */
.xo-acts { display: flex; justify-content: flex-end; gap: 6px; }
.xo-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--panel-3); color: var(--text); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.xo-btn:hover { color: var(--text); background: var(--line-2); }
.xo-btn.is-main { background: var(--text); color: var(--bg); }
.xo-btn.is-main:hover { color: var(--bg); opacity: .9; }
.xo-btn.is-off { opacity: .5; cursor: default; }
.xo-btn i { font-size: 11px; }
.xo-refilling { display: inline-flex; align-items: center; gap: 6px; color: var(--info); font-size: 12.5px; font-weight: 600; }

.xo-empty { padding: 64px 24px; text-align: center; border-radius: 26px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.xo-empty > span { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--panel-3); font-size: 24px; }
.xo-empty h2 { margin: 18px 0 8px; font: 700 24px var(--display); letter-spacing: -.03em; }
.xo-empty p { margin: 0 0 22px; color: var(--text-2); }
.xo-pages { margin-top: 20px; }

@media (max-width: 1100px) {
  .xo-row { grid-template-columns: 44px minmax(0, 1fr) 150px 80px 130px; }
  .xo-acts { grid-column: 2 / -1; justify-content: flex-start; }
  .xo-acts:empty { display: none; }
}
@media (max-width: 700px) {
  .xo-head { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 16px; }
  .xo-search { width: 100%; }
  .xo-tabs { margin: 0 -16px 14px; padding: 0 16px; border-radius: 0; background: none; box-shadow: none; }
  .xo-tab { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
  .xo-tab.is-on { box-shadow: none; }
  .xo-list { display: grid; gap: 10px; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
  .xo-row { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "ic main status" "prog prog charge" "acts acts acts"; gap: 12px 12px; padding: 16px; border-radius: 22px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
  .xo-row + .xo-row { border-top: 0; }
  .xo-row:hover { background: var(--panel); }
  .xo-ic { grid-area: ic; width: 40px; height: 40px; border-radius: 12px; font-size: 17px; align-self: start; }
  .xo-main { grid-area: main; }
  .xo-status { grid-area: status; align-self: start; text-align: right; }
  .xo-prog { grid-area: prog; padding-top: 12px; border-top: 1px solid var(--line); }
  .xo-prog::after { content: ""; display: table; clear: both; }
  .xo-acts { grid-area: acts; justify-content: stretch; }
  .xo-acts .xo-btn { flex: 1; justify-content: center; height: 38px; }
  .xo-charge { grid-area: charge; align-self: stretch; padding-top: 12px; border-top: 1px solid var(--line); text-align: right; }
  .xo-chip { height: 26px; padding: 0 9px; font-size: 11.5px; }
}
.xo-row { grid-template-columns: 44px minmax(0, 1fr) 190px 96px 150px 112px; }
.xo-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) { .xo-row { grid-template-columns: 44px minmax(0, 1fr) 150px 80px 130px; } }
@media (max-width: 700px) {
  .xo-row { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "ic main status" "reason reason reason" "prog prog charge" "acts acts acts"; }
  .xo-status { display: contents; }
  .xo-chip { grid-area: status; align-self: start; justify-self: end; }
  .xo-reason { grid-area: reason; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--bad-soft); color: var(--text-2); font-size: 12.5px; }
  .xo-row:not(:has(.xo-reason)) { grid-template-areas: "ic main status" "prog prog charge" "acts acts acts"; }
}
@media (max-width: 700px) { .xo-reason { text-align: left; } }
.xo-pct { margin-left: auto; color: var(--text-2); font: 650 12.5px var(--font); font-style: normal; font-variant-numeric: tabular-nums; }
.xo-row[data-status*="complet"] .xo-pct { color: var(--ok); }
.xo-start[hidden] { display: none; }
/* Status filters on phones: edge-to-edge swipe row with soft edges and snapping. */
.xo-tab.is-on { background: var(--text) !important; background-image: none !important; color: var(--bg); box-shadow: none; }
@media (max-width: 760px) {
  .xo-tabs { gap: 8px; scroll-snap-type: x proximity; scroll-padding: 0 16px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .xo-tabs.is-scrolled { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 36px), transparent); }
  .xo-tabs.is-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); }
  .xo-tab { scroll-snap-align: start; height: 36px; padding: 0 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; }
  .xo-tabs::after { content: ""; flex: 0 0 8px; }
}
/* Phones: every status visible at once — chips wrap into rows, no sideways scrolling. */
@media (max-width: 760px) {
  .xo-tabs, .xo-tabs.is-scrolled, .xo-tabs.is-end { flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; overflow: visible; scroll-snap-type: none; -webkit-mask-image: none; mask-image: none; }
  .xo-tabs::after { display: none; }
  .xo-tab { height: 34px; padding: 0 12px; gap: 6px; font-size: 13px; }
  .xo-tab i { width: 6px; height: 6px; }
}
@media (max-width: 350px) { .xo-tab { padding: 0 10px; font-size: 12.5px; } }

/* ── Support (tickets): Messages-for-Mac style two-pane window ─────── */
.xs { max-width: 1240px; margin: 0 auto; }
.xs-app { display: grid; grid-template-columns: 360px minmax(0, 1fr); min-height: calc(100vh - var(--top) - 72px); border-radius: 30px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -50px rgba(0,0,0,.9); overflow: hidden; }
.xs-logo { display: block; width: 100%; height: auto; }

/* left: conversations */
.xs-inbox { display: flex; flex-direction: column; min-width: 0; background: var(--bg-2); border-right: 1px solid var(--line); }
.xs-inbox-h { padding: 22px 18px 12px; }
.xs-inbox-h h2 { margin: 0 0 14px; font: 700 26px var(--display); letter-spacing: -.04em; }
.xs-search { display: flex; align-items: center; gap: 8px; height: 38px; margin: 0; padding: 0 12px; border-radius: 11px; background: var(--panel-3); color: var(--text-3); font-size: 13px; }
.xs-search input, .xs-search input:focus { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0 !important; background: none !important; box-shadow: none !important; color: var(--text); outline: 0; font-size: 14.5px; }
.xs-list { flex: 1; overflow-y: auto; padding: 4px 10px 14px; }
.xs-conv { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: 14px; color: var(--text); transition: background .15s; }
.xs-conv:hover { background: var(--panel-2); color: var(--text); }
.xs-conv + .xs-conv::before { content: ""; position: absolute; top: 0; left: 68px; right: 12px; height: 1px; background: var(--line); }
.xs-conv:hover::before, .xs-conv:hover + .xs-conv::before { opacity: 0; }
.xs-ti { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 13px; background: linear-gradient(160deg, var(--panel-3), var(--panel-2)); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255,255,255,.06); color: var(--text); font-size: 16px; }
.xs-conv.is-new .xs-ti { background: var(--text); color: var(--bg); box-shadow: none; }
.xs-conv-t { flex: 1; min-width: 0; }
.xs-conv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.xs-conv-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 550; }
.xs-conv.is-new .xs-conv-top b { font-weight: 700; }
.xs-conv-top time { flex: 0 0 auto; color: var(--text-3); font-size: 12.5px; }
.xs-conv.is-new time { color: #0a84ff; font-weight: 600; }
.xs-conv-sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.xs-conv-sub small { color: var(--text-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.xs-st { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--panel-3); color: var(--text-2); font-size: 11.5px; font-weight: 600; }
.xs-st::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.xs-s-open .xs-st { background: var(--info-soft); color: var(--info); }
.xs-s-replied .xs-st { background: var(--ok-soft); color: var(--ok); }
.xs-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; }
.xs-conv.is-new .xs-dot { background: #0a84ff; }
.xs-none { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 40px 24px; text-align: center; }
.xs-none b { font: 650 17px var(--display); }
.xs-none small { max-width: 240px; color: var(--text-3); font-size: 13.5px; }
.xs-none a { color: #0a84ff; font-size: 14px; }
.xs-bubbles { display: flex; flex-direction: column; gap: 6px; width: 150px; margin-bottom: 14px; }
.xs-bubbles i { display: block; height: 22px; border-radius: 12px; background: var(--panel-3); animation: xs-bub 3.6s var(--ease) infinite; }
.xs-bubbles i:nth-child(1) { width: 70%; }
.xs-bubbles i:nth-child(2) { width: 55%; align-self: flex-end; background: #0a84ff; animation-delay: .5s; }
.xs-bubbles i:nth-child(3) { width: 45%; animation-delay: 1s; }
@keyframes xs-bub { 0%, 10% { opacity: 0; transform: translateY(6px); } 22%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.xs-pages { margin: 6px 14px 14px; }

/* right: compose pane */
.xs-pane { display: flex; flex-direction: column; min-width: 0; padding: 40px clamp(24px, 4vw, 56px) 30px; background: radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,.05), transparent 60%); }
.xs-hero { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 28px; }
.xs-appicon { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 18px; padding: 15px; border-radius: 22px; background: linear-gradient(160deg, #2c2c2e, #050505); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.12), 0 20px 40px -18px rgba(0,0,0,.8); color: #fff; }
.xs-hero h2 { margin: 0; font: 700 clamp(30px, 3.4vw, 40px)/1.05 var(--display); letter-spacing: -.045em; }
.xs-hero p { max-width: 420px; margin: 10px 0 14px; color: var(--text-2); font-size: 16px; }
.xs-live { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-size: 12.5px; font-weight: 600; }
.xs-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: xo-pulse 2s infinite; }
.xs-form { display: flex; flex-direction: column; flex: 1; width: 100%; max-width: 680px; margin: 0 auto; }
.xs-alert { border-radius: 14px; }
.xs-topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.xs-topics:empty { display: none; }
.xs-topics button { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 120px; padding: 14px; border: 0; border-radius: 18px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-align: left; cursor: pointer; transition: box-shadow .2s, transform .15s, background .2s; }
.xs-topics button:hover { background: var(--panel-3); }
.xs-topics button:active { transform: scale(.98); }
.xs-topics button.is-on { box-shadow: inset 0 0 0 2px var(--text); }
.xs-tc-ic { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: auto; border-radius: 11px; background: var(--panel-3); font-size: 14px; transition: background .2s, color .2s; }
.xs-topics button.is-on .xs-tc-ic { background: var(--text); color: var(--bg); }
.xs-topics b { margin-top: 12px; font-size: 14.5px; font-weight: 650; }
.xs-topics small { color: var(--text-3); font-size: 12px; line-height: 1.35; }
.xs-tc-ck { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-3); }
.xs-topics button.is-on .xs-tc-ck { background: var(--text); box-shadow: inset 0 0 0 4.5px var(--text), inset 0 0 0 18px var(--bg); }
.has-topics .xs-cat > label, .has-topics .xs-cat > select { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.xs-cat { margin-bottom: 0; }
.xs-helper { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--panel-2); color: var(--text-2); font-size: 13px; }
.xs-helper:empty { display: none; }
.xs-fields:not(:empty) { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.xs-form .form-group { margin-bottom: 14px; }
.xs-form .control-label { color: var(--text-2); font-size: 13px; font-weight: 550; }
.xs-form .form-control { min-height: 48px; border-radius: 14px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line-2); }
.ticket-order-helper { margin-top: 6px; color: var(--text-3); font-size: 12px; }
.ticket-field-invalid { box-shadow: inset 0 0 0 1.5px var(--bad) !important; }
.xs-msg { margin-top: auto; }
.xs-msg .control-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.xs-msg textarea.form-control { min-height: 150px; padding: 16px 18px; border-radius: 22px; background: var(--bg); font-size: 15px; line-height: 1.5; resize: none; }
.xs-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.xs-send { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 8px 0 20px; border: 0; border-radius: 999px; background: #0a84ff; color: #fff; font: 650 15px var(--font); cursor: pointer; box-shadow: 0 10px 24px -10px rgba(10,132,255,.7); transition: transform .15s, filter .2s; }
.xs-send i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.22); font-size: 13px; }
.xs-send:hover { filter: brightness(1.08); color: #fff; }
.xs-send:active { transform: scale(.97); }
.tickets-uploader .btn, .tickets-uploader button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); font-size: 13.5px; }
.tickets-uploader .btn:hover { color: var(--text); background: var(--panel-3); }
.xs-custom { margin-top: 20px; padding: 22px; border-radius: 22px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); }

@media (max-width: 980px) {
  .xs-app { display: flex; flex-direction: column-reverse; min-height: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
  .xs-pane { padding: 6px 0 0; background: none; }
  .xs-hero { margin-bottom: 20px; }
  .xs-appicon { width: 64px; height: 64px; border-radius: 18px; padding: 13px; }
  .xs-form { padding: 18px 16px 16px; border-radius: 26px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
  .xs-inbox { margin-top: 18px; border: 0; border-radius: 26px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
  .xs-inbox-h { padding: 18px 16px 10px; }
  .xs-list { overflow: visible; padding: 2px 6px 10px; }
}
@media (max-width: 560px) {
  .xs-topics { grid-template-columns: 1fr 1fr; gap: 8px; }
  .xs-topics button { min-height: 108px; padding: 12px; }
  .xs-fields:not(:empty) { grid-template-columns: 1fr; }
  .xs-msg textarea.form-control { min-height: 130px; }
}

/* ── Conversation (viewticket) ── */
.xc { position: relative; display: flex; flex-direction: column; max-width: 860px; min-height: calc(100vh - var(--top) - 90px); margin: 0 auto; border-radius: 28px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.xc-head { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 12px 16px; background: color-mix(in srgb, var(--panel) 80%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); border-bottom: 1px solid var(--line); }
.xc-back { display: inline-flex; align-items: center; gap: 6px; justify-self: start; color: #0a84ff; font-size: 15px; }
.xc-back:hover { color: #0a84ff; opacity: .8; }
.xc-who { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; max-width: 420px; text-align: center; }
.xc-av { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); color: #fff; padding: 10px; }
.xc-av.is-sm { width: 30px; height: 30px; flex: 0 0 30px; padding: 6px; align-self: flex-end; margin-bottom: 20px; }
.xc-who b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.xc-who small { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 12px; }
.xc-who small i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.xc-lock { justify-self: end; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--text-3); font-size: 12px; }

.xc-thread { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 20px 18px 24px; }
.xc-day { align-self: center; margin: 14px 0 10px; color: var(--text-3); font-size: 12px; font-weight: 600; }
.xc-msg { display: flex; gap: 8px; max-width: 78%; animation: xc-in .35s var(--ease) both; }
@keyframes xc-in { from { opacity: 0; transform: translateY(8px); } }
.xc-msg.is-me { align-self: flex-end; justify-content: flex-end; }
.xc-msg.is-them { align-self: flex-start; }
.xc-col { display: flex; flex-direction: column; min-width: 0; }
.xc-msg.is-me .xc-col { align-items: flex-end; }
.xc-bub { position: relative; padding: 9px 14px 10px; border-radius: 20px; font-size: 15px; line-height: 1.42; overflow-wrap: anywhere; }
.xc-msg.is-me .xc-bub { background: #0a84ff; color: #fff; border-bottom-right-radius: 6px; }
.xc-msg.is-them .xc-bub { background: var(--panel-3); color: var(--text); border-bottom-left-radius: 6px; }
.xc-msg.is-grouped .xc-bub { border-radius: 20px; }
.xc-msg.is-grouped .xc-meta { display: none; }
.xc-msg.is-them.is-grouped .xc-av { visibility: hidden; margin-bottom: 0; }
.xc-msg.is-grouped + .xc-msg { margin-top: 0; }
.xc-msg:not(.is-grouped) { margin-bottom: 10px; }
.xc-text a { color: inherit; text-decoration: underline; }
.xc-meta { margin-top: 4px; padding: 0 6px; color: var(--text-3); font-size: 11px; }
.xc-files { display: grid; gap: 6px; margin-top: 8px; }
.xc-img { display: block; max-width: 260px; border-radius: 14px; overflow: hidden; }
.xc-img img { display: block; width: 100%; height: auto; }
.xc-file { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; padding: 8px 12px; border-radius: 12px; background: rgba(0,0,0,.18); color: inherit; font-size: 13px; }
.xc-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.xc-compose { position: sticky; bottom: 0; z-index: 5; margin: 0; padding: 10px 14px 12px; background: color-mix(in srgb, var(--panel) 82%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); border-top: 1px solid var(--line); }
.xc-bar { display: flex; align-items: flex-end; gap: 8px; }
.xc-upload .btn, .xc-upload button { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 50%; overflow: hidden; font-size: 0; }
.xc-field { flex: 1; margin: 0; }
.xc-field textarea.form-control { min-height: 38px; max-height: 200px; padding: 8px 16px; border-radius: 20px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 15px; line-height: 1.4; resize: none; }
.xc-send { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border: 0; border-radius: 50%; background: #0a84ff; color: #fff; font-size: 15px; cursor: pointer; transition: transform .15s, opacity .2s; }
.xc-send:active { transform: scale(.92); }
.xc-hint { display: block; margin-top: 6px; text-align: center; color: var(--text-3); font-size: 11px; }
.xc-hint kbd { padding: 1px 5px; border-radius: 5px; background: var(--panel-3); box-shadow: none; color: var(--text-2); font: 600 10.5px var(--font); }
.xc-alert { margin-bottom: 8px; border-radius: 14px; }
.xc-closed { padding: 16px 20px; border-top: 1px solid var(--line); text-align: center; color: var(--text-2); font-size: 14px; }
.xc-closed i { color: var(--ok); margin-right: 6px; }
.xc-closed a { color: #0a84ff; }

.xc-lightbox { position: fixed; inset: 0; z-index: 2000; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 30px; background: rgba(0,0,0,.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.xc-lightbox.is-open { display: flex; }
.xc-lightbox img { max-width: 100%; max-height: calc(100vh - 120px); border-radius: 14px; }
.xc-lightbox span { color: rgba(255,255,255,.7); font-size: 13px; }
.xc-lb-x { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; }

@media (max-width: 700px) {
  .xc { min-height: calc(100vh - 170px); margin: -18px -16px 0; border-radius: 0; box-shadow: none; background: var(--bg); }
  .xc-msg { max-width: 86%; }
  .xc-compose { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); border-radius: 22px; margin: 0 8px; border: 1px solid var(--line); }
  .xc-hint { display: none; }
}
/* iMessage tails, short times, delivered */
.xc { --xc-bg: var(--panel); }
.xc-thread { background: var(--xc-bg); }
.xc-msg.is-me .xc-bub, .xc-msg.is-them .xc-bub { border-radius: 20px; }
.xc-msg:not(.is-grouped) .xc-bub::before, .xc-msg:not(.is-grouped) .xc-bub::after { content: ""; position: absolute; bottom: 0; height: 20px; }
.xc-msg.is-me:not(.is-grouped) .xc-bub::before { right: -7px; width: 20px; background: #0a84ff; border-bottom-left-radius: 16px 14px; }
.xc-msg.is-me:not(.is-grouped) .xc-bub::after { right: -26px; width: 26px; background: var(--xc-bg); border-bottom-left-radius: 10px; }
.xc-msg.is-them:not(.is-grouped) .xc-bub::before { left: -7px; width: 20px; background: var(--panel-3); border-bottom-right-radius: 16px 14px; }
.xc-msg.is-them:not(.is-grouped) .xc-bub::after { left: -26px; width: 26px; background: var(--xc-bg); border-bottom-right-radius: 10px; }
.xc-bub > * { position: relative; z-index: 1; }
.xc-msg.is-me .xc-meta { padding-right: 4px; }
.xc-delivered { display: block; margin-top: 3px; padding-right: 4px; color: var(--text-3); font-size: 11px; font-weight: 600; text-align: right; }
.xc-upload .btn, .xc-upload button { display: grid !important; place-items: center; }
@media (max-width: 700px) { .xc { --xc-bg: var(--bg); } }
.xc-av.is-sm { position: relative; z-index: 2; }
.xc-upload .btn, .xc-upload button { display: block !important; width: 38px; height: 38px; padding: 0; text-align: center; line-height: 38px; }
@media (max-width: 700px) {
  .xc-head { grid-template-columns: 44px minmax(0, 1fr) 44px; padding: 10px 8px; }
  .xc-back span { display: none; }
  .xc-back { width: 40px; height: 40px; justify-content: center; font-size: 20px; }
  .xc-thread { padding: 16px 14px 110px; }
}
/* The page already reserves room below the thread for the floating composer and tab bar; the thread only needs a small gap. */
@media (max-width: 700px) { .xc-compose { position: fixed; left: 8px; right: 8px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); margin: 0; } .xc-thread { padding-bottom: 14px; } }
.xs-tc-ic { margin-bottom: 0; }
.xs-topics b { margin-top: 14px; }
.xc-av { border-radius: 14px; background: linear-gradient(160deg, #2c2c2e, #050505); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.12); padding: 9px; }
.xc-av.is-sm { border-radius: 9px; padding: 6px; }
/* live send / receive */
.xc-msg { animation: none; }
.xc-msg.is-sending { animation: xc-send .45s cubic-bezier(.2,1.2,.4,1) both; }
.xc-msg.is-sending .xc-bub { opacity: .72; }
.xc-msg.is-arrived.is-me { animation: none; }
.xc-msg.is-arrived.is-them { animation: xc-recv .5s cubic-bezier(.2,1,.4,1) both; }
@keyframes xc-send { from { opacity: 0; transform: translateY(40px) scale(.92); transform-origin: 100% 100%; } }
@keyframes xc-recv { from { opacity: 0; transform: translateY(10px) scale(.94); transform-origin: 0 100%; } }
.xc-delivered { animation: xc-fade .4s .1s both; }
@keyframes xc-fade { from { opacity: 0; } }
/* iMessage photos: standalone, no bubble; files as their own bubble */
.xc-files { display: flex; flex-direction: column; gap: 4px; margin: 0 0 4px; }
.xc-msg.is-me .xc-files { align-items: flex-end; }
.xc-photo { display: block; max-width: min(280px, 62vw); border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); background: var(--panel-3); transition: transform .2s var(--ease); }
.xc-photo:active { transform: scale(.98); }
.xc-photo img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; }
.xc-bub.xc-file { display: flex; align-items: center; gap: 10px; max-width: 280px; padding: 10px 14px 10px 10px; color: inherit; text-decoration: none; }
.xc-file-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; background: rgba(255,255,255,.18); font-size: 16px; }
.xc-msg.is-them .xc-file-ic { background: var(--panel-2); }
.xc-file-t { min-width: 0; }
.xc-file-t b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.xc-file-t small { opacity: .7; font-size: 12px; }
.xc-msg.is-me .xc-bub.xc-file { background: #0a84ff; color: #fff; }
.xc-msg.is-them .xc-bub.xc-file { background: var(--panel-3); }
.xc-files .xc-bub.xc-file::before, .xc-files .xc-bub.xc-file::after { display: none; }
/* Desktop: chat as a Messages-for-Mac window with conversations on the left */
.xc-side { display: none; }
@media (min-width: 981px) {
  .xcw { display: grid; grid-template-columns: 340px minmax(0, 1fr); max-width: 1240px; height: calc(100vh - var(--top) - 56px); min-height: 560px; margin: 0 auto; border-radius: 30px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -50px rgba(0,0,0,.9); overflow: hidden; }
  .xc-side { display: flex; flex-direction: column; min-width: 0; background: var(--bg-2); border-right: 1px solid var(--line); }
  .xc-side-h { display: flex; align-items: center; justify-content: space-between; padding: 20px 18px 12px; }
  .xc-side-h h2 { margin: 0; font: 700 24px var(--display); letter-spacing: -.04em; }
  .xc-new { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #0a84ff; font-size: 15px; }
  .xc-new:hover { background: var(--panel-3); color: #0a84ff; }
  .xc-side-search { margin: 0 14px 10px; }
  .xc-side-list { flex: 1; overflow-y: auto; padding: 0 8px 12px; }
  .xc-side-list .xs-conv { padding: 10px 10px; }
  .xc-side-list .xs-conv.is-current { background: #0a84ff; color: #fff; }
  .xc-side-list .xs-conv.is-current::before, .xc-side-list .xs-conv.is-current + .xs-conv::before { opacity: 0; }
  .xc-side-list .xs-conv.is-current time, .xc-side-list .xs-conv.is-current small { color: rgba(255,255,255,.75); }
  .xc-side-list .xs-conv.is-current .xs-st { background: rgba(255,255,255,.2); color: #fff; }
  .xc-side-list .xs-conv.is-current .xs-ti { background: rgba(255,255,255,.2); color: #fff; box-shadow: none; }
  .xc-side-list .xs-conv[hidden] { display: none; }
  .xc-side-none { margin: 30px 16px; text-align: center; color: var(--text-3); font-size: 13.5px; }
  .xc-skel { display: grid; gap: 10px; padding: 6px 10px; }
  .xc-skel i { display: block; height: 58px; border-radius: 14px; background: linear-gradient(90deg, var(--panel-2), var(--panel-3), var(--panel-2)); background-size: 200% 100%; animation: xc-shim 1.4s linear infinite; }
  @keyframes xc-shim { to { background-position: -200% 0; } }
  .xcw .xc { max-width: none; min-height: 0; height: 100%; margin: 0; border-radius: 0; box-shadow: none; overflow: hidden; }
  .xcw .xc-thread { overflow-y: auto; }
  .xcw .xc-back { visibility: hidden; }
}
/* "New message" row pinned at the top of the conversation list */
.xs-newconv .xs-ti { color: #0a84ff; }
.xs-newconv.is-current { background: #0a84ff; color: #fff; }
.xs-newconv.is-current:hover { background: #0a84ff; color: #fff; }
.xs-newconv.is-current .xs-ti { background: rgba(255,255,255,.2); color: #fff; box-shadow: none; }
.xs-newconv.is-current small { color: rgba(255,255,255,.78); }
.xs-newconv.is-current + .xs-conv::before { opacity: 0; }
.xs-newconv .xs-conv-top b { font-weight: 650; }
@media (min-width: 981px) { .xcw .xc-back { visibility: visible; } }
.xs-none { padding-top: 30px; }

/* panel uploader (real markup: #uploader-button with a paperclip svg) */
.tickets-uploader .files-wrapper { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tickets-uploader #uploader-button { display: inline-flex !important; align-items: center; gap: 8px; height: 40px !important; padding: 0 14px !important; border-radius: 999px !important; background: var(--panel-2) !important; box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); cursor: pointer; }
.tickets-uploader #uploader-button:hover { color: var(--text); background: var(--panel-3) !important; }
.tickets-uploader #uploader-button svg { width: 18px; height: 18px; }
.tickets-uploader #uploader-button a { color: inherit; text-decoration: none; }
.xc-upload #uploader-button { width: 38px; height: 38px !important; padding: 0 !important; justify-content: center; font-size: 0; }
.xc-upload #uploader-button a > :not(svg) { display: none; }
.xc-upload .btn, .xc-upload button { width: auto; text-align: left; line-height: normal; }
/* compact topics: 4 cards + "More topics" */
.xs-topics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.xs-more-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; margin: -6px 0 14px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); font: 600 13px var(--font); cursor: pointer; }
.xs-more-btn em { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--panel-3); color: var(--text); font: 650 11px/20px var(--font); font-style: normal; }
.xs-more-btn:hover, .xs-more-btn.is-open { color: var(--text); }
.xs-more { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; animation: x-fade-in .25s var(--ease); }
.xs-more[hidden] { display: none; }
.xs-more button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); font: 550 13.5px var(--font); cursor: pointer; }
.xs-more button.is-on { background: var(--text); color: var(--bg); box-shadow: none; }
.xs-more button i { font-size: 12px; }
.xs.is-opening .xs-pane { opacity: .5; transition: opacity .2s; }
@media (max-width: 560px) { .xs-topics { grid-template-columns: 1fr 1fr; } }
/* Wide desktop: the Messages app uses the room instead of floating in the middle. */
@media (min-width: 1500px) { .xs, .xcw { max-width: 1640px; } }
/* Attachments in the chat composer: chips on their own row above the message box. */
.xc-bar { flex-wrap: wrap; }
.xc-bar::before { content: ""; order: -1; flex: 0 0 100%; height: 0; }
.xc-bar > .xc-upload, .xc-upload > .files-wrapper { display: contents; }
.xc-upload .files-item, .xc-upload .files-loader { order: -2; display: inline-flex !important; align-items: center; gap: 8px; max-width: 100%; height: 34px; margin: 0 0 4px; padding: 0 6px 0 12px; border-radius: 999px; background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font-size: 12.5px; line-height: 1; white-space: nowrap; animation: x-fade-in .2s var(--ease); }
.xc-upload .files-item .file-link { overflow: hidden; text-overflow: ellipsis; color: var(--text) !important; text-decoration: none !important; font-weight: 600; }
.xc-upload .files-item .files-label { margin: 0 !important; color: var(--bad); }
.xc-upload .files-item .paperclip { color: var(--text-3); }
.xc-upload .files-item svg { width: 16px; height: 16px; }
.xc-upload .files-item .remove { display: inline-grid !important; place-items: center; width: 22px !important; height: 22px !important; padding: 0 !important; border-radius: 50% !important; background: var(--panel-2) !important; color: var(--text-2) !important; font-size: 12px !important; line-height: 1 !important; }
.xc-upload .files-item .remove svg { width: 12px; height: 12px; }
.xc-upload .files-loader { width: 34px; padding: 0; justify-content: center; }
.xc-upload .files-loader svg { width: 20px; height: 20px; }
.xc-upload .files-loader a { display: grid; place-items: center; }
.xc-upload .files-droparea { display: none; }
.xc-msg.is-sending .xc-bub { opacity: .7; }
.xc-upload .files-item .remove { border: 0 !important; box-shadow: none !important; outline: 0; }
/* Desktop: the window fits the screen; the inbox and the form scroll on their own, Send stays right under the fields. */
@media (min-width: 981px) {
  .xs-app { height: calc(100vh - var(--top) - 48px); min-height: 640px; }
  .xs-inbox { min-height: 0; overflow: hidden; }
  .xs-pane { min-height: 0; overflow-y: auto; }
  .xs-form { flex: 0 0 auto; }
}
.xs-msg { margin-top: 6px; }
.xs-msg textarea, .xs-msg .form-control { min-height: 130px; }
/* Subcategory cards */
.xs-sub-native { display: none !important; }
.xs-subs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 2px 0 4px; }
.xs-subs button { display: flex; align-items: flex-start; gap: 10px; min-height: 64px; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-align: left; cursor: pointer; transition: background .2s, box-shadow .2s, transform .15s; }
.xs-subs button:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.xs-subs button:active { transform: scale(.98); }
.xs-subs button > i { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--panel-3); color: var(--text-2); font-size: 13px; }
.xs-subs button span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xs-subs button b { font-size: 14px; font-weight: 650; }
.xs-subs button small { color: var(--text-3); font-size: 12px; line-height: 1.35; }
.xs-subs button.is-on { background: var(--text); color: var(--bg); box-shadow: none; }
.xs-subs button.is-on > i { background: var(--bg); color: var(--text); }
.xs-subs button.is-on small { color: color-mix(in srgb, var(--bg) 60%, transparent); }
/* Fields side by side no more: each field gets the full width so labels and helpers breathe. */
.xs-fields .form-group { margin-bottom: 16px; }
.xs-fields .ticket-order-helper, .xs-fields .help-block { margin-top: 6px; color: var(--text-3); font-size: 12.5px; }
/* Recent order quick-picks under the Order ID field */
.xs-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.xs-recent small { margin-right: 2px; color: var(--text-3); font-size: 12px; font-weight: 600; }
.xs-recent button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 0; border-radius: 999px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); font-size: 12px; cursor: pointer; }
.xs-recent button b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.xs-recent button.is-on { background: var(--text); color: var(--bg); box-shadow: none; } .xs-recent button.is-on b { color: var(--bg); }
/* Phones: short inbox with "Show all" */
.xs-conv.xs-clip { display: none !important; }
.xs-showall { display: block; width: calc(100% - 8px); height: 44px; margin: 8px 4px 0; border: 0; border-radius: 14px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: 600 14px var(--font); cursor: pointer; }
.xs-showall[hidden] { display: none; }
@media (max-width: 560px) { .xs-subs { grid-template-columns: 1fr 1fr; } .xs-subs button { min-height: 0; padding: 11px 12px; } .xs-subs button small { display: none; } .xs-subs button > i { width: 26px; height: 26px; } }
.xs-fields:not(:empty) { grid-template-columns: minmax(0, 1fr); }
/* Once a topic is picked the header steps back so the message box and Send stay in view. */
.xs-hero { transition: margin .3s var(--ease); }
.xs.is-picked .xs-hero .xs-appicon, .xs.is-picked .xs-hero > p, .xs.is-picked .xs-hero .xs-live { display: none; }
.xs.is-picked .xs-hero h2 { margin-bottom: 18px; font-size: 28px; }
@media (min-width: 981px) {
  .xs-pane .xs-foot { position: sticky; bottom: -30px; z-index: 2; margin: 0 -8px -30px; padding: 14px 8px 30px; background: linear-gradient(to bottom, transparent, var(--panel) 24%); }
}
@media (min-width: 981px) { .xs-msg textarea, .xs-msg .form-control { min-height: 104px; } }
/* Desktop chat: the window is one fixed-height row; the thread scrolls inside it and the composer stays visible. */
@media (min-width: 981px) {
  .xcw { grid-template-rows: minmax(0, 1fr); }
  .xcw .xc { display: flex; flex-direction: column; height: auto; min-height: 0; }
  .xcw .xc-side { min-height: 0; }
  .xcw .xc-thread { flex: 1 1 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  .xcw .xc-compose { position: relative; flex: none; }
}
.xc-thread { overflow-x: hidden; }
@media (max-width: 700px) { .xc:not(:has(.xc-compose)) .xc-thread { padding-bottom: 24px; } }
/* Attach button (panel markup: #uploader-button > a.paperclip > svg) — iMessage-style */
.xc-upload #uploader-button { display: grid !important; place-items: center !important; width: 36px !important; height: 36px !important; min-width: 36px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: var(--panel-3) !important; box-shadow: none !important; color: var(--text) !important; cursor: pointer; transition: background .2s, transform .15s; align-self: center !important; }
.xc-upload #uploader-button:hover { background: var(--line-2) !important; }
.xc-upload #uploader-button:active { transform: scale(.92); }
.xc-upload #uploader-button a, .xc-upload #uploader-button .paperclip { display: grid !important; place-items: center !important; width: 100%; height: 100%; color: inherit !important; pointer-events: none; }
.xc-upload #uploader-button svg { width: 19px !important; height: 19px !important; fill: currentColor !important; color: var(--text) !important; opacity: 1 !important; transform: rotate(-45deg); }
.xc-bar { align-items: center !important; }
.xc-upload #uploader-button svg { width: 24px !important; height: 24px !important; transform: none; }
/* Attach: crisp centred "+" (iMessage). The panel's own button stays underneath, so uploads keep working. */
.xc-upload #uploader-button { position: relative !important; width: 34px !important; height: 34px !important; min-width: 34px; background: var(--panel-3) !important; }
.xc-upload #uploader-button svg, .xc-upload #uploader-button a { visibility: hidden !important; }
.xc-upload #uploader-button::before, .xc-upload #uploader-button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: var(--text); }
.xc-upload #uploader-button::after { transform: rotate(90deg); }
.xc-upload #uploader-button:hover::before, .xc-upload #uploader-button:hover::after { background: #fff; }

/* The always-rendered empty state shows only when no real conversation is listed
   (untouched welcome tickets are skipped in the template). */
.xs-list:has(.xs-conv:not(.xs-newconv)) .xs-none-auto { display: none; }

/* Mia's photo replaces the logo for her messages and the chat header. */
.xc-av.is-mia, .xc-av.is-mia.is-sm { padding: 0; overflow: hidden; border-radius: 50%; background: #111; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.xc-av.is-mia img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Below desktop the page itself scrolls: keep the conversation header pinned under the top bar.
   overflow: clip keeps the card's rounded corners without breaking position: sticky. */
@media (max-width: 980px) {
  .xc { overflow: clip; }
  .xc-head { top: var(--x-top-h, 60px); z-index: 6; }
}
/* Phones: an open conversation is full screen, like a messaging app. The site's top bar and
   tab bar step aside, the header becomes one compact row and the composer sits at the bottom. */
@media (max-width: 700px) {
  body:has(.xc-head) .x-top, body:has(.xc-head) .x-tabbar { display: none; }
  body:has(.xc-head) .x-main { padding: 0 0 calc(22px + env(safe-area-inset-bottom, 0px)); }
  body:has(.xc-head) .xc { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .xc-head { top: 0; padding: max(6px, env(safe-area-inset-top, 0px)) 6px 6px; grid-template-columns: 40px minmax(0, 1fr) 40px; }
  .xc-who { display: grid; grid-template-columns: auto minmax(0, auto); grid-template-rows: auto auto; column-gap: 10px; row-gap: 0; align-items: center; justify-content: center; text-align: left; }
  .xc-who .xc-av { grid-row: 1 / 3; width: 34px; height: 34px; padding: 7px; border-radius: 10px; }
  .xc-who b { grid-column: 2; font-size: 15px; line-height: 1.25; }
  .xc-who small { grid-column: 2; font-size: 11.5px; line-height: 1.3; }
  .xc-compose { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
}
/* Phones: conversation list and the new-message form are separate screens (see initSupportViews). */
.xs-back { display: none; }
@media (max-width: 700px) {
  .xs[data-xs-view="list"] .xs-pane { display: none; }
  .xs[data-xs-view="new"] .xs-inbox { display: none; }
  .xs[data-xs-view="new"]:not([data-xs-noconv]) .xs-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 6px 2px; color: #0a84ff; font-size: 16px; font-weight: 500; }
  .xs[data-xs-view="new"] .xs-back i { font-size: 15px; }
}
/* iPhone Safari: sticky inside the card is unreliable while its toolbars slide, so on phones the
   conversation header is fixed like the composer, and the page can't pan sideways. */
@media (max-width: 700px) {
  html:has(.xc-head), body:has(.xc-head) { overflow-x: hidden; max-width: 100%; }
  body:has(.xc-head) .xc { max-width: 100vw; }
  .xc-head { position: fixed; left: 0; right: 0; top: 0; z-index: 40; }
  .xc-thread { padding-top: calc(66px + env(safe-area-inset-top, 0px)); touch-action: pan-y; }
}

/* ── Services ─────────────────────────────────────────────────────── */
.xv { max-width: 1180px; margin: 0 auto; }
.xv [hidden] { display: none !important; }
.xv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 8px 0 22px; }
.xv-head h1 { margin: 0; font: 700 clamp(34px, 4.4vw, 52px)/1 var(--display); letter-spacing: -.045em; }
.xv-head p { margin: 10px 0 0; color: var(--text-2); font-size: 17px; }
.xv-head p b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.xv-cur-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font-weight: 600; }

/* sticky search + platform rail */
.xv-bar { position: sticky; top: calc(var(--top) + 8px); z-index: 20; display: grid; gap: 10px; margin: 0 -8px 18px; padding: 8px; border-radius: 26px; background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); }
.xv-search { display: flex; align-items: center; gap: 12px; height: 54px; margin: 0; padding: 0 18px; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); cursor: text; transition: box-shadow .2s; }
.xv-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--text), var(--ring); }
.xv-search > i { color: var(--text-3); }
.xv-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0 !important; background: none !important; box-shadow: none !important; color: var(--text); font-size: 16px; outline: 0; }
.xv-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.xv-search kbd { padding: 2px 8px; border-radius: 7px; background: var(--panel-3); box-shadow: none; color: var(--text-3); font: 600 12px var(--font); }
.xv-plats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); padding-right: 40px; }
.xv-plats::-webkit-scrollbar { display: none; }
.xv-plats button { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); font: 550 13.5px var(--font); cursor: pointer; transition: background .2s, color .2s; --mono-ink: var(--text-2); }
.xv-plats button i { font-size: 15px; }
.xv-plats button em { color: var(--text-3); font: 600 11.5px var(--font); font-style: normal; font-variant-numeric: tabular-nums; }
.xv-plats button:hover { color: var(--text); background: var(--panel-2); }
.xv-plats button.is-on { background: var(--text); color: var(--bg); box-shadow: none; }
.xv-plats button.is-on em { color: color-mix(in srgb, var(--bg) 60%, transparent); }

/* categories */
.xv-cat { margin-bottom: 26px; content-visibility: auto; contain-intrinsic-size: auto 600px; }
.xv-cat-h { display: flex; align-items: center; gap: 12px; margin: 0 4px 10px; }
.xv-cat-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; background: var(--panel-3); font-size: 16px; --mono-ink: var(--text); }
.xv-cat-ic img { max-width: 20px; max-height: 20px; }
.xv-cat-h h2 { margin: 0; font: 650 18px var(--display); letter-spacing: -.02em; }
.xv-n { padding: 2px 9px; border-radius: 999px; background: var(--panel-2); color: var(--text-3); font: 600 12px var(--font); font-variant-numeric: tabular-nums; }
.xv-rows { border-radius: 22px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }

/* service row */
.xv-svc { display: grid; grid-template-columns: auto minmax(0, 1fr) 130px auto; align-items: center; gap: 16px; padding: 14px 18px; transition: background .15s; }
.xv-svc + .xv-svc { border-top: 1px solid var(--line); }
.xv-svc:hover { background: var(--panel-2); }
.xv-svc:not(:has(.xv-fav)) { grid-template-columns: minmax(0, 1fr) 130px auto; }
.xv-fav { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: none; color: var(--text-3); font-size: 15px; cursor: pointer; }
.xv-fav:hover { background: var(--panel-3); color: var(--text); }
.xv-fav.favorite-active, .xv-fav:has(.fas) { color: #ffd60a; }
.xv-main { min-width: 0; }
.xv-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.xv-name b { margin-right: 4px; font-size: 15px; font-weight: 600; line-height: 1.35; }
.xv-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 7px; background: var(--panel-3); color: var(--text-2); font-size: 11.5px; font-weight: 550; white-space: nowrap; }
.xv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 7px; color: var(--text-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.xv-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.xv-meta i { font-size: 11px; }
.xv-id { height: 22px; padding: 0 7px; border: 0; border-radius: 7px; background: none; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); font: 600 11.5px var(--font); font-variant-numeric: tabular-nums; cursor: pointer; }
.xv-id:hover { color: var(--text); }
.xv-id.is-copied { color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.xv-more { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0; border: 0; background: none; color: var(--text-2); font: 600 12px var(--font); cursor: pointer; }
.xv-more i { font-size: 9px; transition: transform .25s var(--ease); }
.xv-more.is-open i { transform: rotate(180deg); }
.xv-desc { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: var(--panel-2); color: var(--text-2); font-size: 13px; line-height: 1.55; animation: x-fade-in .25s var(--ease); }
@keyframes x-fade-in { from { opacity: 0; transform: translateY(-4px); } }
.xv-rate { text-align: right; }
.xv-rate strong { display: block; font: 700 18px var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.xv-rate small { color: var(--text-3); font-size: 11.5px; }
.xv-go { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--panel-3); color: var(--text); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background .2s, color .2s; }
.xv-go i { font-size: 11px; transition: transform .2s var(--ease); }
.xv-svc:hover .xv-go { background: var(--text); color: var(--bg); }
.xv-go:hover i { transform: translateX(3px); }

.xv-empty { padding: 60px 24px; text-align: center; border-radius: 26px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.xv-empty > span { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: var(--panel-3); font-size: 22px; }
.xv-empty h2 { margin: 16px 0 6px; font: 700 22px var(--display); letter-spacing: -.03em; }
.xv-empty p { margin: 0 0 20px; color: var(--text-2); }
.xv-custom { margin-top: 20px; padding: 22px; border-radius: 22px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); }

@media (max-width: 700px) {
  .xv-head { flex-direction: column; align-items: flex-start; margin-bottom: 14px; }
  .xv-bar { top: 60px; margin: 0 -16px 14px; padding: 8px 16px; border-radius: 0; }
  .xv-search { height: 50px; border-radius: 16px; }
  .xv-search kbd { display: none; }
  .xv-svc, .xv-svc:not(:has(.xv-fav)) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main fav" "rate go"; gap: 12px; padding: 14px 16px; }
  .xv-fav { grid-area: fav; align-self: start; }
  .xv-main { grid-area: main; }
  .xv-rate { grid-area: rate; display: flex; align-items: baseline; gap: 6px; text-align: left; }
  .xv-go { grid-area: go; height: 36px; background: var(--text); color: var(--bg); }
}
.xv-plats button:hover { --mono-ink: var(--text); }
.xv-plats button.is-on { --mono-ink: var(--bg); }
.xv-cat { content-visibility: visible; contain-intrinsic-size: none; animation: x-fade-in .3s var(--ease); }
.xv-skel { display: grid; gap: 10px; }
.xv-skel i { display: block; height: 76px; border-radius: 18px; background: linear-gradient(90deg, var(--panel), var(--panel-2), var(--panel)); background-size: 200% 100%; animation: xv-shim 1.4s linear infinite; }
@keyframes xv-shim { to { background-position: -200% 0; } }
.xv-more-rows { height: 1px; }
.xv-noscript { padding: 20px; color: var(--text-2); }
/* details popup: card on desktop, bottom sheet on phones */
html.xv-locked { overflow: hidden; }
.xv-name { cursor: pointer; }
.xv-sheet { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; padding: 24px; }
.xv-sheet-scrim { position: absolute; inset: 0; border: 0; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); opacity: 0; transition: opacity .26s var(--ease); cursor: default; }
.xv-sheet-card { position: relative; width: min(560px, 100%); max-height: min(760px, calc(100dvh - 48px)); overflow-y: auto; overscroll-behavior: contain; padding: 26px 26px 22px; border-radius: 30px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2), 0 50px 120px -30px rgba(0,0,0,.9); opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .26s var(--ease), transform .32s var(--ease); }
.xv-sheet.is-open .xv-sheet-scrim { opacity: 1; }
.xv-sheet.is-open .xv-sheet-card { opacity: 1; transform: none; }
.xv-grab { display: none; }
.xv-sheet-x { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--panel-3); color: var(--text-2); cursor: pointer; }
.xv-sheet-x:hover { color: var(--text); }
.xv-sh-head { display: flex; align-items: center; gap: 14px; padding-right: 40px; }
.xv-sh-ic { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px; border-radius: 16px; background: linear-gradient(160deg, var(--panel-3), var(--panel-2)); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 24px; --mono-ink: var(--text); }
.xv-sh-ic img { max-width: 28px; max-height: 28px; }
.xv-sh-head small { color: var(--text-3); font-size: 12.5px; font-weight: 550; }
.xv-sh-head h3 { margin: 2px 0 0; font: 700 21px/1.2 var(--display); letter-spacing: -.03em; }
.xv-sh-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.xv-sh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 18px 0 16px; }
.xv-sh-stats div { padding: 12px 14px; border-radius: 16px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.xv-sh-stats small { display: block; color: var(--text-3); font-size: 11.5px; }
.xv-sh-stats b { display: block; margin-top: 3px; font: 700 17px var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.xv-sh-stats div:first-child b { font-size: 20px; }
.xv-sh-kv { margin: 0 0 14px; border-radius: 18px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.xv-sh-kv div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 11px 16px; font-size: 13.5px; }
.xv-sh-kv div + div { border-top: 1px solid var(--line); }
.xv-sh-kv dt { color: var(--text-3); font-weight: 500; }
.xv-sh-kv dd { margin: 0; color: var(--text); }
.xv-sh-notes { padding: 14px 16px; border-radius: 18px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.xv-sh-notes b { display: block; margin-bottom: 8px; font-size: 13.5px; }
.xv-sh-notes ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.xv-sh-notes li { position: relative; padding-left: 16px; color: var(--text-2); font-size: 13px; line-height: 1.45; }
.xv-sh-notes li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); }
.xv-sh-foot { position: sticky; bottom: -22px; display: flex; gap: 10px; margin: 18px -26px -22px; padding: 14px 26px 22px; background: linear-gradient(transparent, var(--panel) 30%); }
.xv-sh-id { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--panel-3); color: var(--text); font: 600 14px var(--font); cursor: pointer; white-space: nowrap; }
.xv-sh-go { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 16px; font-weight: 650; }
.xv-sh-go:hover { color: var(--bg); opacity: .92; }
.xv-sh-go i { font-size: 13px; }
@media (max-width: 700px) {
  .xv-sheet { place-items: end center; padding: 0; }
  .xv-sheet-card { width: 100%; max-height: 88dvh; padding: 10px 18px 0; border-radius: 28px 28px 0 0; transform: translateY(100%); transition: opacity .2s, transform .36s cubic-bezier(.2,.9,.2,1); }
  .xv-sheet.is-open .xv-sheet-card { transform: none; }
  .xv-grab { display: block; width: 38px; height: 5px; margin: 0 auto 14px; border-radius: 3px; background: var(--line-3); }
  .xv-sheet-x { top: 18px; right: 14px; width: 30px; height: 30px; }
  .xv-sh-head h3 { font-size: 19px; }
  .xv-sh-stats { grid-template-columns: 1fr 1fr; }
  .xv-sh-kv div { grid-template-columns: 110px minmax(0, 1fr); }
  .xv-sh-foot { bottom: 0; margin: 16px -18px 0; padding: 12px 18px calc(16px + env(safe-area-inset-bottom, 0px)); }
}
/* details: fact tiles */
.xv-sh-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.xv-sh-kv div { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "ic dt" "ic dd"; align-items: center; gap: 1px 12px; padding: 12px 14px; border-radius: 16px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.xv-sh-kv div + div { border-top: 0; }
.xv-kv-ic { grid-area: ic; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--panel-3); color: var(--text); font-size: 14px; }
.xv-sh-kv dt { grid-area: dt; color: var(--text-3); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.xv-sh-kv dd { grid-area: dd; color: var(--text); font: 600 14.5px/1.3 var(--display); letter-spacing: -.01em; }
.xv-sh-kv .is-on .xv-kv-ic { background: var(--ok-soft); color: var(--ok); }
.xv-sh-kv .is-off .xv-kv-ic { background: var(--panel-3); color: var(--text-3); }
.xv-sh-kv .is-off dd { color: var(--text-2); }
.xv-sh-head h3 { font-size: 22px; line-height: 1.18; letter-spacing: -.035em; }
.xv-sh-stats b { font-weight: 700; letter-spacing: -.03em; }
.xv-sh-notes li { font-size: 13.5px; color: var(--text-2); }
@media (max-width: 700px) { .xv-sh-kv { grid-template-columns: 1fr; } }
.xv-sh-kv div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.xv-sh-desc { margin: 16px 0 4px; }
/* Favorite: star pops with a small burst; a toast says where favorites go. */
.xv-fav { position: relative; }
.xv-fav.favorite-active, .xv-fav.favorite-active [data-favorite-icon] { color: #ffd60a; }
.xv-fav.is-pop [data-favorite-icon] { animation: xv-star .5s cubic-bezier(.2,1.6,.4,1); }
.xv-fav.is-pop::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,214,10,.7); animation: xv-burst .5s ease-out forwards; pointer-events: none; }
@keyframes xv-star { 0% { transform: scale(1); } 40% { transform: scale(1.45) rotate(-12deg); } 100% { transform: scale(1); } }
@keyframes xv-burst { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.x-favtoast { position: fixed; left: 50%; bottom: 28px; z-index: 4000; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px; border-radius: 18px; background: color-mix(in srgb, var(--panel-3) 94%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 50px -16px rgba(0,0,0,.8); color: var(--text); opacity: 0; transform: translate(-50%, 16px); transition: opacity .25s, transform .35s var(--ease); pointer-events: none; }
.x-favtoast.is-on { opacity: 1; transform: translate(-50%, 0); }
.x-favtoast > i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(255,214,10,.16); color: #ffd60a; font-size: 14px; }
.x-favtoast span { display: flex; flex-direction: column; } .x-favtoast b { font-size: 14px; } .x-favtoast small { color: var(--text-3); font-size: 12px; }
@media (max-width: 760px) { .x-favtoast { bottom: calc(86px + env(safe-area-inset-bottom)); } }

/* ── Account ──────────────────────────────────────────────────────── */
.xa { max-width: 1080px; margin: 0 auto; }
.xa-head { margin: 8px 0 24px; }
.xa-head h1 { margin: 0; font: 700 clamp(34px, 4.4vw, 52px)/1 var(--display); letter-spacing: -.045em; }
.xa-head p { margin: 10px 0 0; color: var(--text-2); font-size: 17px; }
.xa-alert { position: relative; display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; padding: 13px 16px; border-radius: 16px; font-size: 14px; }
.xa-alert.is-ok { background: var(--ok-soft); color: var(--ok); }
.xa-alert.is-bad { background: var(--bad-soft); color: var(--bad); }
.xa-alert > div, .xa-alert > span { color: var(--text); }
.xa-alert i { margin-top: 3px; }
.xa-alert .close { position: absolute; top: 8px; right: 12px; color: var(--text-2); opacity: 1; text-shadow: none; }

.xa-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 28px; align-items: start; }
.xa-side { position: sticky; top: calc(var(--top) + 20px); display: grid; gap: 14px; }
.xa-id { display: flex; flex-direction: column; align-items: center; padding: 26px 20px 18px; border-radius: 26px; text-align: center; background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.07), transparent 60%), var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.xa-avatar { display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 14px; border-radius: 50%; color: #fff; font: 700 30px var(--display); letter-spacing: -.03em; box-shadow: 0 0 0 4px var(--panel), 0 0 0 5px var(--line-2), 0 18px 40px -16px rgba(0,0,0,.8); text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.xa-id b { font: 700 19px var(--display); letter-spacing: -.025em; }
.xa-id small { max-width: 100%; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font-size: 13px; }
.xa-id-bal { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 18px; padding: 12px 12px 12px 16px; border-radius: 16px; background: var(--panel-2); text-align: left; }
.xa-id-bal span { color: var(--text-3); font-size: 12.5px; }
.xa-id-bal strong { margin-left: auto; font: 700 17px var(--display); font-variant-numeric: tabular-nums; }
.xa-id-bal a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--text); color: var(--bg); font-size: 12px; }
.xa-nav { display: grid; padding: 6px; border-radius: 22px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.xa-nav a { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px; border-radius: 14px; color: var(--text-2); font-size: 14.5px; font-weight: 550; transition: background .15s, color .15s; }
.xa-nav a i:first-child { width: 18px; text-align: center; font-size: 14px; }
.xa-nav a:hover { background: var(--panel-2); color: var(--text); }
.xa-nav a.is-on { background: var(--panel-3); color: var(--text); }
.xa-nav-go { margin-left: auto; font-size: 11px; color: var(--text-3); }

.xa-main { display: grid; gap: 30px; min-width: 0; }
.xa-sec { scroll-margin-top: calc(var(--top) + 20px); }
.xa-sec > h2 { margin: 0 0 10px 6px; font: 650 13px var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.xa-group { border-radius: 24px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.xa-row { display: flex; align-items: center; gap: 14px; margin: 0; padding: 16px 18px; }
.xa-group > * + * { border-top: 1px solid var(--line); }
.xa-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: var(--panel-3); color: var(--text); font-size: 15px; }
.xa-row-t { flex: 1; min-width: 0; margin: 0; font-weight: normal; }
.xa-row-t small { display: block; color: var(--text-3); font-size: 12.5px; font-weight: 500; }
.xa-row-t b { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15.5px; font-weight: 600; }
.xa-row-t em { display: block; margin-top: 4px; color: var(--text-3); font-size: 12px; font-style: normal; }
.xa-mini { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--panel-3); color: var(--text); font: 600 13px var(--font); cursor: pointer; transition: background .15s, transform .15s; }
.xa-mini:hover { background: var(--line-2); }
.xa-mini:active { transform: scale(.97); }
.xa-mini.is-main { background: var(--text); color: var(--bg); }
.xa-mini.is-done { background: var(--ok-soft); color: var(--ok); }
.xa-mini.is-warn { background: var(--bad-soft); color: var(--bad); }
.xa-mini i { font-size: 12px; }
.xa-link { color: var(--text); transition: background .15s; }
.xa-link:hover { background: var(--panel-2); color: var(--text); }
.xa-chev { color: var(--text-3); font-size: 12px; transition: transform .25s var(--ease); }

/* expandable password row */
.xa-exp { display: block; padding: 0; }
.xa-exp > summary { display: flex; align-items: center; gap: 14px; padding: 16px 18px; list-style: none; cursor: pointer; }
.xa-exp > summary::-webkit-details-marker { display: none; }
.xa-exp > summary:hover { background: var(--panel-2); }
.xa-exp[open] .xa-chev { transform: rotate(180deg); }
.xa-form { display: grid; gap: 14px; margin: 0; }
.xa-exp .xa-form { padding: 4px 18px 20px 72px; animation: x-fade-in .25s var(--ease); }
.xa-pad { padding: 18px; }
.xa-field { display: grid; gap: 7px; margin: 0; font-weight: normal; }
.xa-field > span:first-child { color: var(--text-2); font-size: 13px; font-weight: 550; }
.xa-field .form-control, .xa-field textarea { min-height: 48px; border-radius: 14px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line-2); }
.xa-pw { position: relative; display: block; }
.xa-pw .form-control { padding-right: 48px; }
.xa-pw button { position: absolute; top: 50%; right: 6px; width: 36px; height: 36px; margin-top: -18px; border: 0; border-radius: 10px; background: none; color: var(--text-3); cursor: pointer; }
.xa-pw button:hover { color: var(--text); background: var(--panel-3); }
.xa-meter { display: flex; align-items: center; gap: 5px; }
.xa-meter i { flex: 1; height: 4px; border-radius: 4px; background: var(--panel-3); transition: background .25s; }
.xa-meter em { width: 52px; text-align: right; color: var(--text-3); font: 600 11.5px var(--font); font-style: normal; }
.xa-meter[data-s="1"] i:nth-child(-n+1) { background: var(--bad); }
.xa-meter[data-s="2"] i:nth-child(-n+2) { background: #ff9f0a; }
.xa-meter[data-s="3"] i:nth-child(-n+3) { background: var(--warn); }
.xa-meter[data-s="4"] i { background: var(--ok); }
.xa-match { min-height: 16px; font-size: 12px; color: var(--text-3); }
.xa-match.is-ok { color: var(--ok); } .xa-match.is-bad { color: var(--text-3); }
.xa-btn { justify-self: start; height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--text); color: var(--bg); font: 650 14.5px var(--font); cursor: pointer; transition: opacity .2s, transform .15s; }
.xa-btn:hover { opacity: .9; }
.xa-btn:active { transform: scale(.98); }

/* 2FA */
.xa-2fa { flex-wrap: wrap; }
.xa-2fa .xa-row-t b { display: flex; align-items: center; gap: 10px; white-space: normal; }
.xa-2fa-copy { color: var(--text-2); font-size: 13px; font-weight: 400; line-height: 1.4; }
.xa-badge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--panel-3); color: var(--text-2); font-size: 11.5px; font-weight: 700; }
.xa-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.xa-badge.is-on { background: var(--ok-soft); color: var(--ok); }
.xa-2fa-forms { display: contents; }
.xa-2fa-forms form { margin: 0; }
.xa-code { flex-basis: 100%; padding: 4px 0 4px 54px; }
.xa-code p { margin: 0; color: var(--text-2); font-size: 13.5px; }
.xa-2fa-forms .xa-alert { flex-basis: 100%; margin: 0 0 0 54px; }

/* preferences */
.xa-pref { position: relative; }
.xa-select { display: block; width: 100%; height: 30px; margin-top: 2px; padding: 0 26px 0 0; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2386868b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 4px center no-repeat; color: var(--text); font: 600 15.5px var(--font); outline: 0; -webkit-appearance: none; appearance: none; cursor: pointer; }
.xa-select option { background: var(--panel); color: var(--text); }
.xa-pref.is-saving::after { content: "Saving…"; position: absolute; right: 18px; color: var(--text-3); font-size: 12.5px; }

/* API key */
.xa-key { display: block; margin-top: 4px; }
.xa-key input { width: 100%; height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font: 500 13.5px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .02em; outline: 0; }
.xa-key input.is-masked { -webkit-text-security: disc; letter-spacing: .12em; }
.xa-key-acts { display: flex; gap: 6px; align-self: flex-end; margin-bottom: 20px; }
.xa-api .xa-row { align-items: flex-start; }
.xa-api .xa-row > .xa-ic { margin-top: 2px; }
.xa-api-foot { justify-content: space-between; align-items: center !important; background: var(--panel-2); }
.xa-api-foot p { margin: 0; color: var(--text-2); font-size: 13px; }
.xa-api-foot p i { margin-right: 6px; color: var(--text-3); }
.xa-api > .xa-alert { margin: 14px; border-top: 0; }

/* change email modal */
.xa-modal .modal-content { border: 0; border-radius: 26px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 100px -30px #000; }
.xa-modal .modal-header { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 26px 6px; border: 0; text-align: center; }
.xa-modal .modal-header .close { position: absolute; top: 16px; right: 18px; color: var(--text-2); opacity: 1; text-shadow: none; }
.xa-modal-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--panel-3); font-size: 20px; }
.xa-modal .modal-title { font: 700 21px var(--display); letter-spacing: -.03em; }
.xa-modal .modal-body { padding: 14px 26px 6px; }
.xa-modal .modal-body label { color: var(--text-2); font-size: 13px; font-weight: 550; }
.xa-modal .form-control { min-height: 48px; border-radius: 14px; }
.xa-modal .modal-footer { display: flex; gap: 10px; padding: 14px 26px 24px; border: 0; }
.xa-modal .modal-footer .btn { flex: 1; height: 48px; border-radius: 999px; font-weight: 650; }

@media (max-width: 900px) {
  .xa-grid { grid-template-columns: 1fr; gap: 22px; }
  .xa-side { position: static; }
  .xa-nav { display: flex; overflow-x: auto; scrollbar-width: none; padding: 5px; }
  .xa-nav::-webkit-scrollbar { display: none; }
  .xa-nav a { flex: 0 0 auto; height: 38px; font-size: 13.5px; }
  .xa-nav-go { display: none; }
}
@media (max-width: 560px) {
  .xa-row, .xa-exp > summary { padding: 14px 14px; gap: 12px; }
  .xa-ic { width: 36px; height: 36px; flex-basis: 36px; border-radius: 11px; }
  .xa .xa-mini:has(span) span { display: none; }
  .xa .xa-mini:has(span) { width: 36px; padding: 0; justify-content: center; }
  .xa-exp .xa-form { padding: 4px 14px 18px; }
  .xa-code, .xa-2fa-forms .xa-alert { padding-left: 0; margin-left: 0; }
  .xa-2fa .xa-row-t b { flex-direction: column; align-items: flex-start; gap: 6px; }
  .xa-key-acts { margin-bottom: 0; align-self: center; }
  .xa-api .xa-row:first-child { flex-wrap: wrap; }
  .xa-api .xa-row:first-child .xa-row-t { flex-basis: calc(100% - 50px); }
  .xa-api .xa-key-acts { margin-left: 50px; }
  .xa-api-foot { flex-direction: column; align-items: stretch !important; }
  .xa-api-foot .xa-mini { width: auto; padding: 0 16px; justify-content: center; }
  .xa-api-foot .xa-mini span { display: inline; }
}
.xa .xa-select, .xa .xa-select:focus { height: 30px !important; min-height: 0 !important; padding: 0 26px 0 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background-color: transparent !important; }
/* ── Account v2: profile header + security checkup ── */
.xa-head { display: none; }
.xa-hero { display: flex; align-items: center; gap: 22px; margin: 4px 0 26px; padding: 24px 26px; border-radius: 28px; background: radial-gradient(90% 140% at 0% 0%, rgba(255,255,255,.06), transparent 55%), var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.xa-hero .xa-avatar { width: 84px; height: 84px; flex: 0 0 84px; margin: 0; font-size: 30px; background: linear-gradient(150deg, #3a3a3c, #0e0e0f) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.14), 0 18px 40px -18px rgba(0,0,0,.9); }
.xa-hero-t { flex: 1; min-width: 0; }
.xa-hero-t h1 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 clamp(26px, 3vw, 34px)/1.1 var(--display); letter-spacing: -.04em; }
.xa-hero-t p { margin: 4px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: 15px; }
.xa-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.xa-chips span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--panel-3); color: var(--text-2); font-size: 12px; font-weight: 600; }
.xa-chips i { font-size: 10px; }
.xa-chips .is-ok { background: var(--ok-soft); color: var(--ok); }
.xa-chips .is-warn { background: rgba(255,159,10,.15); color: #ff9f0a; }
.xa-hero-bal { display: flex; align-items: center; gap: 18px; padding: 14px 14px 14px 20px; border-radius: 20px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.xa-hero-bal small { display: block; color: var(--text-3); font-size: 12.5px; }
.xa-hero-bal strong { font: 700 26px/1.1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.xa-hero-add { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 14px; font-weight: 650; white-space: nowrap; }
.xa-hero-add:hover { color: var(--bg); opacity: .92; }
.xa-hero-add i { font-size: 12px; }
.xa-grid { grid-template-columns: minmax(0, 1fr) 300px; }
.xa-side { order: 2; }
.xa-check { padding: 20px; border-radius: 24px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); --p: 0; --rc: var(--ok); }
.xa-check.is-good { --rc: #64d2ff; } .xa-check.is-low { --rc: #ff9f0a; }
.xa-check-h { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.xa-check-h small { display: block; color: var(--text-3); font-size: 12.5px; }
.xa-check-h b { font: 700 19px var(--display); letter-spacing: -.025em; }
.xa-ring { position: relative; display: grid; place-items: center; width: 64px; height: 64px; flex: 0 0 64px; }
.xa-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.xa-ring circle { fill: none; stroke: var(--panel-3); stroke-width: 4.5; }
.xa-ring .xa-ring-v { stroke: var(--rc); stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: calc(119.4 - 119.4 * var(--p) / 100); transition: stroke-dashoffset 1.2s var(--ease); }
.xa-ring b { font: 700 14px var(--display); font-variant-numeric: tabular-nums; }
.xa-check ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.xa-check li { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 13.5px; }
.xa-check li i { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; font: 900 9px "Font Awesome 5 Pro", "Font Awesome 5 Free"; }
.xa-check li.is-ok i { background: var(--ok-soft); color: var(--ok); } .xa-check li.is-ok i::before { content: "\f00c"; }
.xa-check li.is-todo i { background: rgba(255,159,10,.16); color: #ff9f0a; } .xa-check li.is-todo i::before { content: "\f12a"; }
.xa-check li.is-info i { background: var(--panel-3); color: var(--text-2); } .xa-check li.is-info i::before { content: "\f129"; }
.xa-check li.is-todo span { color: var(--text); }
.xa-check-go { display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; margin-top: 16px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 13.5px; font-weight: 650; }
.xa-check-go:hover { color: var(--bg); opacity: .92; }
.xa-check-go i { font-size: 11px; }
.xa-help { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
.xa-help:hover { background: var(--panel-2); color: var(--text); }
.xa-help > span { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; background: var(--panel-3); }
.xa-help div { flex: 1; } .xa-help b { display: block; font-size: 14px; } .xa-help small { color: var(--text-3); font-size: 12.5px; }
.xa-help > i { color: var(--text-3); font-size: 11px; }

@media (max-width: 560px) {
  .xa-api .xa-row:first-child { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "ic t" ". acts"; gap: 10px 12px; }
  .xa-api .xa-row:first-child > .xa-ic { grid-area: ic; }
  .xa-api .xa-row:first-child .xa-row-t { grid-area: t; flex-basis: auto; }
  .xa-api .xa-key-acts { grid-area: acts; margin: 0; align-self: start; }
}

/* small screens (kept last so it wins over the desktop grid above) */
@media (max-width: 900px) {
  .xa-grid { grid-template-columns: minmax(0, 1fr); }
  .xa-side { order: 0; position: static; }
  .xa-hero { flex-wrap: wrap; gap: 16px; padding: 20px; }
  .xa-hero .xa-avatar { width: 68px; height: 68px; flex-basis: 68px; font-size: 24px; }
  .xa-hero-bal { flex-basis: 100%; justify-content: space-between; }
}
@media (max-width: 560px) {
  .xa-hero-t h1 { font-size: 24px; }
  .xa-hero-t p { font-size: 14px; }
  .xa-hero-bal strong { font-size: 22px; }
  .xa-hero-add { height: 42px; padding: 0 16px; }
}
.xa-device .xa-row-t em { display: flex; align-items: center; gap: 7px; }
.xa-live { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
/* Very narrow phones (320px): nothing in Account may force the page wider. */
.xa, .xa-sec, .xa-group, .xa-row, .xa-row > * { min-width: 0; max-width: 100%; }
.xa-row b, .xa-row small, .xa-row code, .xa-row span { overflow-wrap: anywhere; }
@media (max-width: 360px) { .xa-row { flex-wrap: wrap; } .xa-key-acts { margin-left: 0 !important; } }
/* Checkup icons use Font Awesome classes (no hand-coded glyphs) */
.xa-check li i { font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free" !important; font-weight: 900 !important; font-size: 9px !important; font-style: normal; }
.xa-check li i::before { content: normal; }
.xa-check li i.fa-check::before { content: "\f00c"; } .xa-check li i.fa-exclamation::before { content: "\f12a"; } .xa-check li i.fa-info::before { content: "\f129"; }

/* ── Notifications ────────────────────────────────────────────────── */
.xn { max-width: 860px; }
.xn-head { margin: 4px 0 24px; }
.xn-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; color: var(--text-2); font-size: 14px; font-weight: 550; }
.xn-back:hover { color: var(--text); }
.xn-back i { font-size: 11px; }
.xn-head h1 { margin: 0; font: 700 clamp(34px, 4.4vw, 48px)/1 var(--display); letter-spacing: -.045em; }
.xn-head p { margin: 10px 0 0; color: var(--text-2); font-size: 17px; }
.xn-connect { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 26px; }
.xn-card { display: flex; flex-direction: column; align-items: flex-start; padding: 22px; border-radius: 24px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.xn-card .alert { width: 100%; border-radius: 14px; }
.xn-card-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; font-size: 19px; color: #fff; }
.xn-card-ic.is-mail { background: linear-gradient(160deg, #5ac8fa, #0a84ff); }
.xn-card-ic.is-tg { background: linear-gradient(160deg, #37bbfe, #1e96d4); }
.xn-card h2 { margin: 14px 0 4px; font: 650 17px var(--display); letter-spacing: -.02em; }
.xn-card p { margin: 0 0 16px; color: var(--text-2); font-size: 14px; line-height: 1.45; }
.xn-card form { margin-top: auto; }

.xn-prefs { margin: 0; }
.xn-cols { display: flex; align-items: center; gap: 10px; padding: 0 18px 10px 72px; color: var(--text-3); font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.xn-cols > span:first-child { flex: 1; }
.xn-col { width: 76px; text-align: center; }
.xn-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.xn-list > .xn-row + .xn-row { border-top: 1px solid var(--line); }
.xn-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
.xn-toggles { display: flex; gap: 10px; }
.xn-sw { position: relative; display: grid; place-items: center; width: 76px; margin: 0; cursor: pointer; font-weight: normal; }
.xn-sw-l { display: none; }
.xn-sw input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.xn-sw i { position: relative; display: block; width: 51px; height: 31px; border-radius: 999px; background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--line-2); transition: background .25s var(--ease); }
.xn-sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.3), 0 1px 1px rgba(0,0,0,.16); transition: transform .28s cubic-bezier(.3,1.3,.5,1); }
.xn-sw input:checked + i { background: var(--ok); box-shadow: none; }
.xn-sw input:checked + i::after { transform: translateX(20px); }
.xn-sw input:focus-visible + i { box-shadow: var(--ring); }
.xn-sw.is-off { cursor: not-allowed; opacity: .4; }

.xn-save { position: sticky; bottom: 20px; z-index: 30; display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 10px 10px 20px; border-radius: 999px; background: color-mix(in srgb, var(--panel-2) 88%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 50px -20px rgba(0,0,0,.9); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .25s var(--ease), transform .3s var(--ease); }
.xn-save.is-on { opacity: 1; transform: none; pointer-events: auto; }
.xn-save span { flex: 1; color: var(--text-2); font-size: 14px; }
.xn-save .xa-btn { height: 42px; }
.xn-empty { display: flex; align-items: center; gap: 14px; padding: 20px; }
.xn-empty b { display: block; font-size: 15px; } .xn-empty small { color: var(--text-3); font-size: 13px; }

@media (max-width: 640px) {
  .xn-cols { display: none; }
  .xn-row { flex-wrap: wrap; padding: 14px 16px; }
  .xn-toggles { flex-basis: 100%; flex-direction: column; gap: 0; padding-left: 54px; }
  .xn-sw { display: flex; justify-content: space-between; width: 100%; padding: 8px 0; }
  .xn-sw + .xn-sw { border-top: 1px solid var(--line); }
  .xn-sw-l { display: block; color: var(--text-2); font-size: 14px; }
  .xn-save { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}
.xn-card-ic { --mono-ink: #fff; }
.xn-card-ic.is-tg { background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); font-size: 24px; }

/* ── Mass order ───────────────────────────────────────────────────── */
.xm { max-width: 1180px; margin: 0 auto; }
.xm [hidden] { display: none !important; }
.xm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 8px 0 22px; }
.xm-head h1 { margin: 0; font: 700 clamp(34px, 4.4vw, 52px)/1 var(--display); letter-spacing: -.045em; }
.xm-head p { margin: 10px 0 0; color: var(--text-2); font-size: 17px; }
.xm-mode { display: flex; padding: 4px; border-radius: 999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.xm-mode button { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--text-2); font: 600 13.5px var(--font); cursor: pointer; transition: background .2s, color .2s; }
.xm-mode button.is-on { background: var(--text); color: var(--bg); }
.xm-mode i { font-size: 11px; }
.xm-result { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 14px 16px; border-radius: 20px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.xm-result > div { flex: 1; } .xm-result b { display: block; font-size: 15px; } .xm-result small { color: var(--text-2); font-size: 13px; }
.xm-result-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; font-size: 14px; }
.xm-result.is-ok .xm-result-ic { background: var(--ok); color: #000; } .xm-result.is-bad .xm-result-ic { background: var(--bad); color: #fff; }

.xm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; margin: 0; }
.xm-main { display: grid; gap: 14px; min-width: 0; }
.xm-groups { display: grid; gap: 14px; }
.xm-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 190px; padding: 24px; border: 1.5px dashed var(--line-3); border-radius: 26px; background: var(--panel); color: var(--text); cursor: pointer; transition: border-color .2s, background .2s, transform .15s; }
.xm-add:hover { border-color: var(--text-2); background: var(--panel-2); }
.xm-add:active { transform: scale(.99); }
.xm-add > span { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 10px; border-radius: 16px; background: var(--text); color: var(--bg); font-size: 18px; }
.xm-add b { font: 650 18px var(--display); letter-spacing: -.02em; }
.xm-add small { color: var(--text-3); font-size: 13.5px; }
.xm-add.is-more { flex-direction: row; min-height: 0; gap: 12px; padding: 14px 18px; border-radius: 20px; }
.xm-add.is-more > span { width: 34px; height: 34px; margin: 0; border-radius: 11px; font-size: 13px; }
.xm-add.is-more b { font-size: 15px; } .xm-add.is-more small { display: none; }

.xm-g { padding: 18px; border-radius: 26px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); animation: x-fade-in .3s var(--ease); transition: opacity .2s, transform .2s; }
.xm-g.is-leaving { opacity: 0; transform: scale(.98); }
.xm-g-h { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.xm-opt-ic { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; background: var(--panel-3); font-size: 18px; --mono-ink: var(--text); }
.xm-g-t { flex: 1; min-width: 0; }
.xm-g-t small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font-size: 12px; }
.xm-g-t b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15.5px; font-weight: 650; }
.xm-g-rate { text-align: right; } .xm-g-rate strong { display: block; font: 700 16px var(--display); } .xm-g-rate small { color: var(--text-3); font-size: 11px; }
.xm-icon { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 11px; background: var(--panel-3); color: var(--text-2); cursor: pointer; }
.xm-icon:hover { color: var(--text); background: var(--line-2); }
.xm-g-qty { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; padding: 14px 0; }
.xm-g-qty label { display: grid; gap: 6px; margin: 0; font-weight: normal; }
.xm-g-qty label span, .xm-links > span { color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.xm-g-qty input { width: 150px; height: 44px; padding: 0 14px; border: 0; border-radius: 13px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font: 650 16px var(--font); font-variant-numeric: tabular-nums; outline: 0; }
.xm-g-qty input:focus { box-shadow: inset 0 0 0 1.5px var(--text); }
.xm-g-qty > small { flex-basis: 100%; color: var(--text-3); font-size: 12px; }
.xm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.xm-chips button { height: 44px; padding: 0 14px; border: 0; border-radius: 13px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); font: 600 13.5px var(--font); cursor: pointer; }
.xm-chips button.is-on { background: var(--text); color: var(--bg); box-shadow: none; }
.xm-links { display: grid; gap: 6px; margin: 0; font-weight: normal; }
.xm-links em { margin-left: 6px; color: var(--text-3); font-style: normal; font-weight: 500; }
.xm-links textarea { min-height: 128px; padding: 14px 16px; border: 0; border-radius: 16px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font: 13.5px/1.6 ui-monospace, "SF Mono", Menlo, monospace; resize: vertical; outline: 0; }
.xm-links textarea:focus { box-shadow: inset 0 0 0 1.5px var(--text), var(--ring); }
.xm-rows { display: grid; gap: 4px; margin-top: 10px; }
.xm-rows:empty { display: none; }
.xm-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 80px 110px; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--panel-2); font-size: 13px; animation: x-fade-in .2s var(--ease); }
.xm-row > i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); font-size: 9px; }
.xm-row.is-bad { background: var(--bad-soft); } .xm-row.is-bad > i { background: var(--bad); color: #fff; }
.xm-row-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; }
.xm-row-q { text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.xm-row-c { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.xm-row.is-bad .xm-row-c { color: var(--bad); font-weight: 600; font-size: 12px; }
.xm-more { margin: 4px 0 0; color: var(--text-3); font-size: 12.5px; text-align: center; }

.xm-raw { padding: 20px; border-radius: 26px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.xm-raw-l { display: grid; gap: 4px; margin: 0 0 12px; font: 650 16px var(--display); }
.xm-raw-l small { color: var(--text-3); font: 400 13px var(--font); } .xm-raw-l code { padding: 1px 6px; border-radius: 6px; background: var(--panel-3); color: var(--text); font-size: 12px; }
.xm-raw textarea { min-height: 300px; border-radius: 16px; background: var(--bg); font: 13.5px/1.6 ui-monospace, "SF Mono", Menlo, monospace; }

/* summary */
.xm-sum { position: sticky; top: calc(var(--top) + 20px); padding: 22px; border-radius: 26px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.xm-sum h2 { margin: 0 0 14px; font: 650 17px var(--display); letter-spacing: -.02em; }
.xm-sum-empty { margin: 0; padding: 22px 0; text-align: center; color: var(--text-3); font-size: 13.5px; }
.xm-sum-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 13.5px; }
.xm-sum-row + .xm-sum-row { border-top: 1px solid var(--line); }
.xm-sum-row span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; color: var(--text); font-weight: 550; --mono-ink: var(--text); }
.xm-sum-row span small { flex-basis: 100%; padding-left: 24px; color: var(--text-3); font-size: 12px; font-weight: 400; }
.xm-sum-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.xm-sum-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.xm-sum-total span { color: var(--text-2); font-size: 14px; }
.xm-sum-total strong { font: 700 28px var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.xm-sum-warn { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--bad-soft); color: var(--bad); font-size: 13px; }
.xm-go { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 54px; margin-top: 16px; border: 0; border-radius: 999px; background: var(--text); color: var(--bg); font: 650 16px var(--font); cursor: pointer; transition: opacity .2s, transform .15s; }
.xm-go:disabled { opacity: .4; cursor: default; }
.xm-go:not(:disabled):active { transform: scale(.98); }
.xm-go.is-busy { opacity: .7; cursor: progress; }
.xm-go i { font-size: 13px; }
.xm-fine { margin: 10px 0 0; text-align: center; color: var(--text-3); font-size: 12px; }

/* picker */
.xm-pick-card { width: min(640px, 100%); display: flex; flex-direction: column; height: min(720px, calc(100dvh - 48px)); max-height: none; overflow: hidden; }
.xm-pick-card h3 { margin: 0 0 14px; font: 700 21px var(--display); letter-spacing: -.03em; }
.xm-pick-search { height: 48px; margin-bottom: 10px; }
.xm-pick-card .xv-plats { margin-bottom: 10px; }
.xm-pick-list { flex: 1; overflow-y: auto; margin: 0 -10px; padding: 0 10px; overscroll-behavior: contain; }
.xm-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 14px; background: none; color: var(--text); text-align: left; cursor: pointer; }
.xm-opt:hover { background: var(--panel-2); }
.xm-opt-t { flex: 1; min-width: 0; } .xm-opt-t b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.xm-opt-t small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font-size: 12px; }
.xm-opt em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .xm-opt em small { color: var(--text-3); font-weight: 500; font-size: 11px; }
.xm-pick-none { padding: 30px 10px; text-align: center; color: var(--text-3); font-size: 13.5px; }

@media (max-width: 980px) {
  .xm-grid { grid-template-columns: minmax(0, 1fr); }
  .xm-sum { position: static; }
}
@media (max-width: 640px) {
  .xm-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .xm-g { padding: 14px; border-radius: 22px; }
  .xm-g-rate { display: none; }
  .xm-g-qty input { width: 120px; }
  .xm-chips button { height: 40px; padding: 0 11px; }
  .xm-row { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .xm-row-q { display: none; }
  .xm-pick-card { height: 90dvh; }
}
.xm-main, .xm-groups { grid-template-columns: minmax(0, 1fr); } .xm-g, .xm-add, .xm-raw { min-width: 0; }

/* ── Refunds / Refills / Drip-feed / Subscriptions ────────────────── */
/* refunds */
.xr-explain { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; padding: 18px 20px; border-radius: 22px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.xr-explain-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; background: var(--ok-soft); color: var(--ok); font-size: 16px; }
.xr-explain > div { flex: 1; } .xr-explain b { display: block; font-size: 15px; margin-bottom: 2px; }
.xr-explain p { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.xr-explain em { font-style: normal; font-weight: 600; } .xr-explain em.is-cancel { color: var(--bad); } .xr-explain em.is-partial { color: #ff9f0a; }
.xr-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 120px; align-items: center; gap: 16px; padding: 14px 20px; }
.xo-list > .xr-row + .xr-row { border-top: 1px solid var(--line); }
.xr-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--ok-soft); color: var(--ok); font-size: 15px; }
.xr-order { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-size: 15px; font-weight: 600; }
.xr-order i { font-size: 10px; color: var(--text-3); transition: transform .2s var(--ease); }
.xr-order:hover { color: var(--text); } .xr-order:hover i { transform: translateX(3px); }
.xr-main small { display: block; margin-top: 2px; color: var(--text-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.xr-row.is-cancel .xo-chip { background: var(--bad-soft); color: var(--bad); }
.xr-row.is-partial .xo-chip { background: rgba(255,159,10,.15); color: #ff9f0a; }
.xr-amt { text-align: right; color: var(--ok); font: 700 17px var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* refills reuse order rows; the order link sits where progress would be */
.xf-refill { grid-template-columns: 44px minmax(0, 1fr) 160px 150px !important; }
.xf-refill .xo-prog .xr-order { font-size: 14px; }
/* drip-feed + subscriptions cards */
.xd-list { display: grid; gap: 12px; }
.xd-card { border-radius: 24px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.xd-h { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.xd-h .xo-main { flex: 1; }
.xd-stats { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.xd-stats > div { padding: 12px 18px; background: var(--panel); }
.xd-stats small { display: block; color: var(--text-3); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.xd-stats b { display: block; margin-top: 3px; font: 650 15px var(--display); font-variant-numeric: tabular-nums; }
.xd-stats b span { color: var(--text-3); font-weight: 500; }
.xd-stats b a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-3); }
.xd-runs .xo-bar { margin: 8px 0 0; }
.xd-list.is-in .xo-bar i { width: var(--w, 0); }
.xd-acts { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--panel-2); }
.xd-acts small { flex: 1; color: var(--text-3); font-size: 12.5px; }
@media (max-width: 1100px) { .xf-refill { grid-template-columns: 44px minmax(0, 1fr) 150px !important; } .xf-refill .xo-status { grid-column: 2 / -1; } }
@media (max-width: 700px) {
  .xr-explain { flex-wrap: wrap; } .xr-explain .xa-mini { margin-left: 60px; }
  .xr-row { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "ic main amt" "ic chip amt"; gap: 4px 12px; padding: 14px 16px; }
  .xr-ic { grid-area: ic; width: 40px; height: 40px; } .xr-main { grid-area: main; } .xr-row .xo-chip { grid-area: chip; justify-self: start; height: 24px; } .xr-amt { grid-area: amt; width: auto; }
  .xo-list:has(.xr-row) { display: block; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); border-radius: 22px; overflow: hidden; }
  .xf-refill { grid-template-areas: "ic main status" "prog prog prog" !important; grid-template-columns: 40px minmax(0, 1fr) auto !important; }
  .xf-refill .xo-prog { grid-area: prog; padding-top: 10px; border-top: 1px solid var(--line); }
  .xd-h { flex-wrap: wrap; } .xd-h .xo-chip { order: -1; margin-left: auto; }
  .xd-stats { grid-template-columns: 1fr 1fr; } .xd-runs { grid-column: 1 / -1; }
}
@media (max-width: 700px) { .xd-h { flex-wrap: nowrap; align-items: flex-start; } .xd-h .xo-chip { order: 0; margin-left: 0; height: 24px; padding: 0 8px; font-size: 11px; } }

/* ── Shared: eyebrow + pill buttons ───────────────────────────────── */
.xaf-eyebrow { display: inline-block; color: var(--text-3); font-size: 13px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.xaf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--panel-3); color: var(--text); font: 650 14.5px var(--font); white-space: nowrap; cursor: pointer; transition: opacity .2s, transform .15s, background .2s; }
.xaf-btn:hover { color: var(--text); background: var(--line-2); }
.xaf-btn:active { transform: scale(.97); }
.xaf-btn.is-main { background: var(--text); color: var(--bg); }
.xaf-btn.is-main:hover { color: var(--bg); opacity: .9; }
.xaf-btn.is-done { background: var(--ok); color: #000; }
.xaf-btn i { font-size: 13px; }

/* ── Affiliates ───────────────────────────────────────────────────── */
.xaf { max-width: 1040px; margin: 0 auto; display: grid; gap: 22px; }
.xaf > * { min-width: 0; }
.xaf-hero { padding: 48px 40px 34px; border-radius: 32px; text-align: center; background: radial-gradient(60% 80% at 50% 0%, rgba(255,255,255,.08), transparent 70%), var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.xaf-hero h1 { margin: 12px 0 14px; font: 700 clamp(38px, 5.4vw, 64px)/1 var(--display); letter-spacing: -.05em; }
.xaf-hero h1 span { color: var(--text-3); }
.xaf-hero > p { max-width: 520px; margin: 0 auto 28px; color: var(--text-2); font-size: 17px; line-height: 1.5; }
.xaf-link { display: flex; align-items: center; gap: 10px; max-width: 640px; margin: 0 auto; padding: 8px 8px 8px 20px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 50px -30px rgba(0,0,0,.9); }
.xaf-link > i { color: var(--text-3); font-size: 13px; }
.xaf-link span[data-xaf-link] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font: 500 15px ui-monospace, "SF Mono", Menlo, monospace; }
.xaf-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 820px; margin: 34px auto 0; padding: 0; list-style: none; text-align: left; }
.xaf-steps li { position: relative; padding: 0 18px; }
.xaf-steps li + li { border-left: 1px solid var(--line); }
.xaf-steps span { display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 10px; border-radius: 50%; background: var(--panel-3); color: var(--text); font: 700 12.5px var(--font); }
.xaf-steps b { display: block; font-size: 15px; } .xaf-steps small { display: block; margin-top: 3px; color: var(--text-3); font-size: 13px; line-height: 1.45; }
.xaf-dash { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.xaf-wallet { position: relative; display: flex; flex-direction: column; min-height: 220px; padding: 26px; border-radius: 28px; overflow: hidden; color: #fff; background: radial-gradient(120% 90% at 100% 0%, #3a3a3e 0%, transparent 55%), linear-gradient(150deg, #1c1c1e, #050505 70%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 30px 60px -30px rgba(0,0,0,.8); }
.xaf-wallet::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.07) 45%, transparent 60%); transform: translateX(-100%); animation: xf-shine 6s 1.2s ease-in-out infinite; pointer-events: none; }
.xaf-wallet-top { display: flex; justify-content: space-between; align-items: center; }
.xaf-wallet-top small { color: rgba(255,255,255,.6); font-size: 13px; }
.xaf-wallet-top span { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: 11.5px; font-weight: 600; }
.xaf-wallet strong { margin: 14px 0 auto; font: 700 52px/1 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.xaf-wallet-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.xaf-wallet-foot > span { color: rgba(255,255,255,.6); font-size: 13px; } .xaf-wallet-foot b { color: #fff; }
.xaf-wallet-foot em { color: rgba(255,255,255,.55); font-size: 12.5px; font-style: normal; }
.xaf-wallet .xaf-btn.is-main { background: #fff; color: #000; }
.xaf-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.xaf-tiles > div { display: flex; flex-direction: column; justify-content: space-between; padding: 20px; border-radius: 22px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.xaf-tiles small { color: var(--text-3); font-size: 13px; font-weight: 550; }
.xaf-tiles b { margin-top: 14px; font: 700 32px/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.xaf-custom { padding: 26px; border-radius: 26px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); line-height: 1.6; }
.xaf-pay h2 { margin: 0 0 12px 4px; font: 700 22px var(--display); letter-spacing: -.03em; }
.xaf-pay-list { border-radius: 24px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.xaf-pay-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.xaf-pay-row + .xaf-pay-row { border-top: 1px solid var(--line); }
.xaf-pay-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--panel-3); font-size: 12px; }
.xaf-pay-row > div { flex: 1; } .xaf-pay-row b { display: block; font: 650 16px var(--display); } .xaf-pay-row small { color: var(--text-3); font-size: 12.5px; }

/* ── API docs ─────────────────────────────────────────────────────── */
.xapi { max-width: 1180px; margin: 0 auto; }
.xapi-hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; margin: 8px 0 22px; }
.xapi-hero h1 { margin: 12px 0 14px; font: 700 clamp(36px, 4.6vw, 56px)/1.02 var(--display); letter-spacing: -.05em; }
.xapi-hero-t p { margin: 0 0 24px; color: var(--text-2); font-size: 17px; line-height: 1.5; }
.xapi-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.xapi-win { border-radius: 20px; background: #0b0b0c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 40px 80px -40px rgba(0,0,0,.9); overflow: hidden; }
.xapi-win-h { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 6px 8px 6px 16px; border-bottom: 1px solid rgba(255,255,255,.07); color: #a1a1a6; font-size: 12.5px; }
.xapi-win-h b { flex: 1; font-weight: 600; letter-spacing: .02em; }
.xapi-dots { display: flex; gap: 6px; } .xapi-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .xapi-dots i:nth-child(2) { background: #febc2e; } .xapi-dots i:nth-child(3) { background: #28c840; }
.xapi-tabs { flex: 1; display: flex; gap: 4px; }
.xapi-tabs button { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: #8e8e93; font: 600 12.5px var(--font); cursor: pointer; }
.xapi-tabs button.is-on { background: rgba(255,255,255,.1); color: #fff; }
.xapi-copy { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border: 0; border-radius: 9px; background: rgba(255,255,255,.07); color: #a1a1a6; cursor: pointer; }
.xapi-copy:hover { color: #fff; } .xapi-copy.is-done { background: rgba(48,209,88,.18); color: #30d158; }
.xapi-win pre { margin: 0; padding: 18px 20px; border: 0; border-radius: 0; background: none; color: #e5e5ea; font: 13px/1.7 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre; overflow-x: auto; }
.xapi-win pre i { font-style: normal; }
.xapi-win pre .k { color: #9cdcfe; } .xapi-win pre .s { color: #ffb86c; } .xapi-win pre .n { color: #bd93f9; } .xapi-win pre .b { color: #ff79c6; } .xapi-win pre .c { color: #ff7ab2; } .xapi-win pre .f { color: #6ae0b2; }
.xapi-base { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 18px; padding: 10px 12px 10px 14px; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.xapi-base > code { padding: 0; background: none; color: var(--text); font: 600 14px ui-monospace, "SF Mono", Menlo, monospace; }
.xapi-base .xapi-copy { background: var(--panel-3); color: var(--text-2); }
.xapi-base-sep { flex: 1; }
.xapi-base-meta { display: inline-flex; align-items: center; gap: 7px; color: var(--text-3); font-size: 13px; }
.xapi-base-meta code { padding: 1px 6px; border-radius: 6px; background: var(--panel-3); color: var(--text); font-size: 12px; }
.xapi-verb { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 7px; background: var(--ok-soft); color: var(--ok); font: 700 11.5px ui-monospace, Menlo, monospace; letter-spacing: .05em; }
.xapi-nav { position: sticky; top: calc(var(--top) + 8px); z-index: 10; display: flex; gap: 6px; margin: 0 -8px 22px; padding: 8px; overflow-x: auto; scrollbar-width: none; border-radius: 22px; background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.xapi-nav::-webkit-scrollbar { display: none; }
.xapi-nav a { flex: 0 0 auto; height: 38px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); font-size: 13.5px; font-weight: 600; }
.xapi-nav a:hover { color: var(--text); } .xapi-nav a.is-on { background: var(--text); color: var(--bg); box-shadow: none; }
.xapi-m { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 0; margin-bottom: 18px; border-radius: 28px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; scroll-margin-top: calc(var(--top) + 80px); }
.xapi-m-doc { padding: 26px 28px; }
.xapi-m-doc h2 { margin: 0 0 16px; font: 700 24px var(--display); letter-spacing: -.035em; }
.xapi-seg { display: inline-flex; gap: 4px; margin-bottom: 14px; padding: 4px; border-radius: 12px; background: var(--panel-2); }
.xapi-seg button { height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--text-2); font: 600 13px var(--font); cursor: pointer; }
.xapi-seg button.is-on { background: var(--text); color: var(--bg); }
.xapi-params { margin: 0; }
.xapi-params[hidden] { display: none !important; }
.xapi-params > div { padding: 12px 0; }
.xapi-params > div + div { border-top: 1px solid var(--line); }
.xapi-params dt { font: 600 13.5px ui-monospace, "SF Mono", Menlo, monospace; color: var(--text); }
.xapi-params dd { margin: 3px 0 0; color: var(--text-2); font-size: 14px; }
.xapi-m-code { display: grid; gap: 1px; align-content: start; padding: 18px; background: var(--bg-2); border-left: 1px solid var(--line); }
.xapi-m-code .xapi-win + .xapi-win { margin-top: 12px; }
.xapi-m-code .xapi-win { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
html[data-theme="light"] .xapi-win { background: #111113; }
@media (max-width: 900px) {
  .xaf-dash { grid-template-columns: 1fr; }
  .xapi-hero { grid-template-columns: 1fr; gap: 24px; }
  .xapi-m { grid-template-columns: 1fr; } .xapi-m-code { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .xaf-hero { padding: 32px 18px 24px; border-radius: 26px; }
  .xaf-link { flex-wrap: wrap; padding: 10px; border-radius: 22px; }
  .xaf-link span[data-xaf-link] { flex-basis: calc(100% - 30px); padding: 4px 0; }
  .xaf-link .xaf-btn { flex: 1; height: 44px; }
  .xaf-steps { grid-template-columns: 1fr; gap: 16px; }
  .xaf-steps li { display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; padding: 0; } .xaf-steps li + li { border: 0; }
  .xaf-steps span { grid-row: span 2; margin: 0; }
  .xaf-wallet strong { font-size: 42px; } .xaf-wallet-foot { flex-direction: column; align-items: stretch; } .xaf-wallet-foot .xaf-btn { width: 100%; }
  .xaf-tiles b { font-size: 26px; }
  .xapi-m-doc { padding: 20px; } .xapi-m-code { padding: 12px; }
  .xapi-base-sep { display: none; }
}
.xaf-hero h1, .xapi-hero h1 { letter-spacing: -.028em; }
/* long example responses scroll inside their panel */
.xapi-m-code .xapi-win pre { max-height: 380px; overflow: auto; }
.xapi-m-code .xapi-win pre::-webkit-scrollbar { width: 8px; height: 8px; } .xapi-m-code .xapi-win pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 8px; }
.xapi { overflow-x: clip; }
@media (max-width: 640px) { .xapi-hero h1 { font-size: 38px; } }
/* Order types as wrapping pills (the panel can have many); nothing clips. */
.xapi-seg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; padding: 0; border-radius: 0; background: none; }
.xapi-seg button { height: 32px; padding: 0 13px; border-radius: 999px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); font: 600 12.5px var(--font); white-space: nowrap; transition: background .2s, color .2s; }
.xapi-seg button:hover { color: var(--text); }
.xapi-seg button.is-on { background: var(--text); color: var(--bg); box-shadow: none; }
.xapi-m-doc, .xapi-m-code, .xapi-win { min-width: 0; }
@media (min-width: 981px) { .xapi-m-doc { position: sticky; top: calc(var(--top) + 20px); align-self: start; } }
.xapi-params > div { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 14px; align-items: baseline; }
.xapi-params dd { margin: 0; }
@media (max-width: 640px) { .xapi-params > div { grid-template-columns: 1fr; gap: 3px; } .xapi-win pre { font-size: 12px; padding: 14px 16px; } }
/* One continuous card per method; code side tinted inside the same outline. */
.xapi-m { box-shadow: none; border: 1px solid var(--line); }
@media (min-width: 981px) { .xapi-m-doc { position: static; } }
/* Method menu: wraps on desktop, swipes with soft edges on phones. */
@media (min-width: 981px) { .xapi-nav { flex-wrap: wrap; overflow: visible; } }
@media (max-width: 980px) { .xapi-nav { -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 28px), transparent); } }
/* Optional parameters get a quiet tag instead of "(optional)" in the name. */
.xapi-params dt .xapi-opt { margin-left: 8px; padding: 2px 7px; border-radius: 6px; background: var(--panel-3); color: var(--text-3); font: 600 10.5px var(--font); letter-spacing: .02em; text-transform: uppercase; vertical-align: 1px; }

/* ── Child panel ──────────────────────────────────────────────────── */
.xcp { max-width: 1120px; margin: 0 auto; display: grid; gap: 22px; }
.xcp > * { min-width: 0; }
.xcp-hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; padding: 40px; border-radius: 32px; background: radial-gradient(70% 90% at 100% 0%, rgba(255,255,255,.07), transparent 60%), var(--panel); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.xcp-hero h1 { margin: 12px 0 14px; font: 700 clamp(36px, 4.4vw, 54px)/1.02 var(--display); letter-spacing: -.03em; }
.xcp-hero-t p { margin: 0 0 22px; color: var(--text-2); font-size: 17px; line-height: 1.5; }
.xcp-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.xcp-pills span { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--panel-3); color: var(--text); font-size: 13.5px; font-weight: 600; }
.xcp-pills i { font-size: 12px; color: var(--text-2); }
/* browser mockup (always dark, like a screenshot) */
.xcp-browser { border-radius: 18px; background: #0d0d0e; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 40px 80px -30px rgba(0,0,0,.9); overflow: hidden; transform: perspective(1400px) rotateY(-8deg) rotateX(3deg); transform-origin: 0 50%; color: #fff; --mono-ink: #fff; }
.xcp-b-bar { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 14px; background: #1c1c1e; border-bottom: 1px solid #000; }
.xcp-b-url { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; height: 28px; max-width: 300px; margin: 0 auto; border-radius: 8px; background: #2c2c2e; color: #fff; font-size: 12.5px; }
.xcp-b-url i { font-size: 9px; color: #8e8e93; }
.xcp-b-url span { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity .2s; }
.xcp-b-body { display: grid; grid-template-columns: 120px 1fr; min-height: 250px; }
.xcp-b-body aside { display: grid; align-content: start; gap: 8px; padding: 14px 10px; border-right: 1px solid #1f1f22; }
.xcp-b-body aside > i { height: 9px; border-radius: 5px; background: #222225; } .xcp-b-body aside > i.is-on { background: #3a3a3d; }
.xcp-b-brand { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: 12px; }
.xcp-b-brand span { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 7px; background: #fff; color: #000; font: 800 12px var(--display); text-transform: uppercase; }
.xcp-b-brand em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-weight: 700; }
.xcp-b-main { display: grid; align-content: start; gap: 9px; padding: 14px 16px; }
.xcp-b-h { display: flex; justify-content: space-between; align-items: center; } .xcp-b-h b { font: 700 15px var(--display); } .xcp-b-h span { padding: 3px 9px; border-radius: 999px; background: #1f1f22; font-size: 11px; font-weight: 600; }
.xcp-b-plats { display: flex; gap: 6px; font-size: 13px; } .xcp-b-plats i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #1c1c1e; } .xcp-b-plats i:first-child { background: #fff; --mono-ink: #000; }
.xcp-b-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 34px; padding: 0 10px; border-radius: 9px; background: #161618; box-shadow: inset 0 0 0 1px #222; }
.xcp-b-row span { height: 8px; width: 55%; border-radius: 4px; background: #2c2c2e; } .xcp-b-row em { font-style: normal; font-size: 11px; font-weight: 700; }
.xcp-b-row.is-on { box-shadow: inset 0 0 0 1.5px #fff; }
.xcp-b-btn { display: grid; place-items: center; height: 32px; margin-top: 4px; border-radius: 999px; background: #fff; color: #000; font-size: 12px; font-weight: 700; }
.xcp-custom { padding: 24px; border-radius: 24px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); line-height: 1.6; }
/* setup timeline */
.xcp-setup { margin: 0; border-radius: 30px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.xcp-setup-h { padding: 28px 32px 6px; } .xcp-setup-h h2 { margin: 0; font: 700 26px var(--display); letter-spacing: -.03em; } .xcp-setup-h p { margin: 6px 0 0; color: var(--text-2); font-size: 15px; }
.xcp-setup > .xa-alert { margin: 16px 32px 0; }
.xcp-step { position: relative; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; padding: 26px 32px; }
.xcp-step + .xcp-step { border-top: 1px solid var(--line); }
.xcp-step-l { position: relative; padding-left: 46px; }
.xcp-n { position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--text); color: var(--bg); font: 700 13.5px var(--font); }
.xcp-step-l b { display: block; font: 650 17px var(--display); letter-spacing: -.02em; } .xcp-step-l small { display: block; margin-top: 4px; color: var(--text-3); font-size: 13.5px; line-height: 1.45; }
.xcp-step-r { display: grid; gap: 14px; }
.xcp-step-r .form-control { min-height: 50px; border-radius: 14px; background-color: var(--field); box-shadow: inset 0 0 0 1px var(--line-2); }
.xcp-dom { position: relative; display: block; } .xcp-dom i { position: absolute; left: 16px; top: 50%; margin-top: -7px; color: var(--text-3); font-size: 14px; } .xcp-dom input { padding-left: 42px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 15px; }
.xcp-ns { padding: 14px; border-radius: 16px; background: var(--panel-2); }
.xcp-ns p { margin: 0 0 10px; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.xcp-ns-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.xcp-ns-list button { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-3); cursor: pointer; text-align: left; transition: box-shadow .2s; }
.xcp-ns-list small { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; } .xcp-ns-list code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 0; background: none; color: var(--text); font: 500 13px ui-monospace, "SF Mono", Menlo, monospace; }
.xcp-ns-list button:hover { box-shadow: inset 0 0 0 1px var(--line-3); } .xcp-ns-list button.is-done { box-shadow: inset 0 0 0 1.5px var(--ok); color: var(--ok); }
.xcp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.xcp-pay { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 32px; border-top: 1px solid var(--line); background: var(--panel-2); }
.xcp-pay small { display: block; color: var(--text-3); font-size: 12.5px; } .xcp-pay strong { font: 700 30px/1.1 var(--display); letter-spacing: -.035em; }
.xcp-pay .xaf-btn { height: 54px; padding: 0 28px; font-size: 16px; }

/* ── Service updates ──────────────────────────────────────────────── */
.xu-list { border-radius: 26px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.xu-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 20px; }
.xu-row + .xu-row { border-top: 1px solid var(--line); }
.xu-main b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 600; }
.xu-main small { color: var(--text-3); font-size: 12.5px; } .xu-main small a { color: var(--text-2); }
.xu-tag { max-width: 340px; padding: 6px 12px; border-radius: 12px; background: var(--panel-3); color: var(--text-2); font-size: 13px; font-weight: 550; line-height: 1.35; text-align: right; }
.xu-tag.is-up { background: var(--bad-soft); color: var(--bad); } .xu-tag.is-down { background: var(--ok-soft); color: var(--ok); }
.xu-tag.is-new { background: var(--info-soft); color: var(--info); } .xu-tag.is-off { background: var(--panel-3); color: var(--text-3); }

/* ── Blog ─────────────────────────────────────────────────────────── */

/* ── Reading layout for content pages ─────────────────────────────── */
.x-prose { color: var(--text-2); font-size: 17px; line-height: 1.75; }
.x-prose > :first-child { margin-top: 0; }
.x-prose h1, .x-prose h2, .x-prose h3, .x-prose h4 { color: var(--text); font-family: var(--display); letter-spacing: -.025em; line-height: 1.2; }
.x-prose h2 { margin: 2em 0 .6em; font-size: 28px; } .x-prose h3 { margin: 1.6em 0 .5em; font-size: 21px; } .x-prose h4 { margin: 1.4em 0 .4em; font-size: 17px; }
.x-prose p { margin: 0 0 1.1em; } .x-prose strong, .x-prose b { color: var(--text); }
.x-prose a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-3); } .x-prose a:hover { text-decoration-color: var(--text); }
.x-prose ul, .x-prose ol { margin: 0 0 1.2em; padding-left: 1.3em; } .x-prose li { margin: .35em 0; } .x-prose li::marker { color: var(--text-3); }
.x-prose img { max-width: 100%; height: auto; border-radius: 18px; }
.x-prose blockquote { margin: 1.4em 0; padding: 14px 20px; border: 0; border-left: 3px solid var(--text); border-radius: 0 14px 14px 0; background: var(--panel); color: var(--text); font-size: 17px; }
.x-prose table { width: 100%; margin: 1.2em 0; border-collapse: collapse; font-size: 15px; } .x-prose th, .x-prose td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; } .x-prose th { color: var(--text); }
.x-prose hr { margin: 2em 0; border: 0; border-top: 1px solid var(--line); }
.x-prose code { padding: 2px 6px; border-radius: 6px; background: var(--panel-3); color: var(--text); font-size: .88em; }

@media (max-width: 980px) { .xcp-hero { grid-template-columns: 1fr; padding: 28px; } .xcp-browser { transform: none; } .xcp-step { grid-template-columns: 1fr; gap: 16px; } }
@media (max-width: 640px) {
  .xu-row { grid-template-columns: 40px minmax(0, 1fr); padding: 14px 16px; } .xu-tag { grid-column: 2; justify-self: start; text-align: left; max-width: none; }

  .xcp-two, .xcp-ns-list { grid-template-columns: 1fr; } .xcp-hero { padding: 22px 18px; } .xcp-b-body { grid-template-columns: 90px 1fr; } .xcp-setup-h, .xcp-step { padding-left: 20px; padding-right: 20px; } .xcp-pay { flex-direction: column; align-items: stretch; padding: 18px 20px; } .xcp-pay .xaf-btn { width: 100%; }
  .x-prose { font-size: 16px; }
}
/* ── Content pages (terms, privacy, faq…) ─────────────────────────── */
.x-doc { max-width: 780px; margin: 0 auto; }
.x-doc-h { margin: 10px 0 28px; }
.x-doc-h h1 { margin: 0; font: 700 clamp(34px, 4.6vw, 52px)/1.05 var(--display); letter-spacing: -.035em; }
.x-doc-body { padding: 34px 38px; border-radius: 28px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 640px) { .x-doc-body { padding: 22px 20px; border-radius: 22px; } }
/* ── Single-card pages: 2FA, reset/set password, confirm email ────── */
.x-solo { display: grid; place-items: center; min-height: calc(100vh - 260px); padding: 110px 16px 60px; }
.x-solo-card { width: min(440px, 100%); padding: 34px 30px 28px; border-radius: 30px; text-align: center; background: radial-gradient(90% 60% at 50% 0%, rgba(255,255,255,.07), transparent 65%), var(--panel); box-shadow: inset 0 0 0 1px var(--line-2), 0 50px 100px -40px rgba(0,0,0,.9); }
.x-solo-ic { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 18px; border-radius: 20px; background: linear-gradient(160deg, #3a3a3c, #0e0e0f); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.14); color: #fff; font-size: 24px; }
.x-solo-ic.is-mail { background: linear-gradient(160deg, #5ac8fa, #0a84ff); }
.x-solo-card h1 { margin: 0 0 8px; font: 700 28px/1.15 var(--display); letter-spacing: -.03em; }
.x-solo-card > p, .x-solo-card form > p { margin: 0 0 6px; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.x-solo-card .xa-form { margin-top: 22px; text-align: left; }
.x-solo-card .form-control { min-height: 50px; border-radius: 14px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line-2); }
.x-solo-code { text-align: center; font: 700 26px ui-monospace, "SF Mono", Menlo, monospace !important; letter-spacing: .4em; }
.x-solo-go { width: 100%; height: 52px; margin-top: 4px; font-size: 15.5px; }
.x-solo-acts { display: grid; gap: 8px; margin-top: 22px; } .x-solo-acts .xaf-btn { width: 100%; height: 50px; }
.x-solo-captcha { display: flex; justify-content: center; }
.x-solo-foot { margin: 20px 0 0; color: var(--text-3); font-size: 13.5px; } .x-solo-foot a { color: var(--text); font-weight: 600; }
.x-solo-card .xa-alert { text-align: left; }
.is-auth .x-solo { padding-top: 40px; }
/* ── Child panel motion ───────────────────────────────────────────── */
@property --xcp-p { syntax: "<integer>"; inherits: false; initial-value: 252; }
@property --xcp-t { syntax: "<integer>"; inherits: false; initial-value: 12640; }
.xcp-browser { position: relative; }
.xcp-cur { position: absolute; z-index: 3; width: 20px; height: 20px; left: 80%; top: 30%; animation: xcp-cur 10s cubic-bezier(.65,0,.35,1) infinite; }
.xcp-cur svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
@keyframes xcp-cur { 0% { left: 80%; top: 30%; } 18% { left: 52%; top: 49%; } 22% { left: 52%; top: 49%; transform: scale(.82); } 25% { transform: none; } 42% { left: 64%; top: 86%; } 46% { left: 64%; top: 86%; transform: scale(.82); } 49% { transform: none; } 70%, 100% { left: 80%; top: 30%; } }
.xcp-browser .xcp-b-row.is-on { animation: xcp-sel 10s infinite; }
@keyframes xcp-sel { 0%, 21% { box-shadow: inset 0 0 0 1px #222; } 22%, 100% { box-shadow: inset 0 0 0 1.5px #fff; } }
.xcp-browser .xcp-b-btn { animation: xcp-press 10s infinite; }
@keyframes xcp-press { 0%, 45% { transform: none; } 46% { transform: scale(.94); } 48%, 100% { transform: none; } }
.xcp-toast { position: absolute; z-index: 4; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px; background: #1c1c1e; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 20px 40px -10px #000; color: #fff; font-size: 12px; opacity: 0; transform: translateY(14px); animation: xcp-toast 10s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes xcp-toast { 0%, 49% { opacity: 0; transform: translateY(14px); } 53%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(-6px); } }
.xcp-toast > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #30d158; color: #000; font-size: 11px; }
.xcp-toast b { display: block; } .xcp-toast small { color: #a1a1a6; } .xcp-toast em { color: #30d158; font-style: normal; font-weight: 700; }

.xcp-how > header { margin: 10px 4px 16px; } .xcp-how h2 { margin: 8px 0 0; font: 700 clamp(28px, 3.4vw, 38px) var(--display); letter-spacing: -.03em; }
.xcp-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.xcp-card { position: relative; padding: 18px 20px 22px; border-radius: 26px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.xcp-card .xcp-n { position: static; margin: 18px 0 10px; }
.xcp-card h3 { margin: 0 0 6px; font: 650 18px var(--display); letter-spacing: -.02em; } .xcp-card p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.xcp-anim { position: relative; height: 176px; padding: 16px; border-radius: 18px; background: #0b0b0c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); color: #fff; overflow: hidden; --mono-ink: #fff; font-size: 12.5px; }
/* 1: domain */
.xcp-a1-url { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; margin-bottom: 12px; border-radius: 10px; background: #1c1c1e; } .xcp-a1-url i { font-size: 10px; color: #8e8e93; }
.xcp-a1-url span { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 0; border-right: 1.5px solid #fff; animation: xcp-type 10s steps(13) infinite; font-family: ui-monospace, Menlo, monospace; }
@keyframes xcp-type { 0%, 4% { max-width: 0; } 22%, 100% { max-width: 14ch; border-color: transparent; } }
.xcp-a1-ns { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 12px; margin-bottom: 6px; border-radius: 9px; background: #161618; opacity: 0; animation: xcp-ns1 10s infinite; }
.xcp-a1-ns + .xcp-a1-ns { animation-name: xcp-ns2; }
.xcp-a1-ns span { color: #8e8e93; font-weight: 700; font-size: 10.5px; } .xcp-a1-ns b { flex: 1; font-weight: 600; } .xcp-a1-ns i { color: #30d158; }
@keyframes xcp-ns1 { 0%, 26% { opacity: 0; transform: translateY(6px); } 31%, 100% { opacity: 1; transform: none; } }
@keyframes xcp-ns2 { 0%, 36% { opacity: 0; transform: translateY(6px); } 41%, 100% { opacity: 1; transform: none; } }
.xcp-a1-live { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(48,209,88,.16); color: #30d158; font-weight: 700; opacity: 0; transform: scale(.8); animation: xcp-live 10s cubic-bezier(.2,1.4,.4,1) infinite; }
.xcp-a1-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
@keyframes xcp-live { 0%, 48% { opacity: 0; transform: scale(.8); } 53%, 100% { opacity: 1; transform: none; } }
/* 2: prices */
.xcp-a2-svc { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; font-size: 13px; } .xcp-a2-svc i { font-size: 18px; }
.xcp-a2-row { display: flex; justify-content: space-between; align-items: center; height: 38px; padding: 0 12px; margin-bottom: 6px; border-radius: 10px; background: #161618; } .xcp-a2-row span { color: #8e8e93; }
.xcp-a2-row b { font: 700 15px var(--display); font-variant-numeric: tabular-nums; }
.xcp-a2-row.is-you { box-shadow: inset 0 0 0 1.5px #fff; }
.xcp-a2-price { counter-reset: p var(--xcp-p); animation: xcp-price 10s cubic-bezier(.2,.8,.2,1) infinite; }
.xcp-a2-price::before { content: "$2." counter(p, decimal-leading-zero); }
@keyframes xcp-price { 0%, 15% { --xcp-p: 52; } 45%, 100% { --xcp-p: 90; } }
.xcp-a2-chip { position: absolute; right: 14px; bottom: 14px; padding: 5px 11px; border-radius: 999px; background: rgba(48,209,88,.16); color: #30d158; font-weight: 700; opacity: 0; animation: xcp-live 10s cubic-bezier(.2,1.4,.4,1) infinite; }
/* 3: earnings */
.xcp-a3-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .xcp-a3-top span { color: #8e8e93; }
.xcp-a3-total { font: 700 22px var(--display); font-variant-numeric: tabular-nums; counter-reset: t var(--xcp-t); animation: xcp-total 10s cubic-bezier(.2,.8,.2,1) infinite; }
.xcp-a3-total::before { content: "$" counter(t); } .xcp-a3-total::after { content: ""; }
@keyframes xcp-total { 0%, 10% { --xcp-t: 126; } 30% { --xcp-t: 127; } 50% { --xcp-t: 128; } 70%, 100% { --xcp-t: 130; } }
.xcp-a3-feed { display: grid; gap: 5px; }
.xcp-a3-feed > div { display: flex; align-items: center; gap: 9px; height: 26px; padding: 0 10px; border-radius: 8px; background: #161618; opacity: 0; transform: translateY(-8px); animation: xcp-feed 10s cubic-bezier(.2,.8,.2,1) infinite; }
.xcp-a3-feed > div:nth-child(2) { animation-delay: 1.8s; } .xcp-a3-feed > div:nth-child(3) { animation-delay: 3.6s; } .xcp-a3-feed > div:nth-child(4) { animation-delay: 5.4s; }
.xcp-a3-feed span { flex: 1; } .xcp-a3-feed em { color: #30d158; font-style: normal; font-weight: 700; }
@keyframes xcp-feed { 0%, 8% { opacity: 0; transform: translateY(-8px); } 13%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }
.xcp-note { margin: 12px 4px 0; color: var(--text-3); font-size: 12.5px; }
@media (max-width: 980px) { .xcp-how-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .xcp-cur, .xcp-toast, .xcp-anim * { animation: none !important; opacity: 1 !important; transform: none !important; max-width: none !important; } }
/* ── Contact fallback (until Admin content is written) ────────────── */
.xct-lead { margin: -12px 0 24px; color: var(--text-2); font-size: 17px; line-height: 1.5; }
.xct-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.xct-card { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 22px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-decoration: none; transition: box-shadow .2s, transform .2s; }
.xct-card:hover { box-shadow: inset 0 0 0 1px var(--line-3); transform: translateY(-2px); color: var(--text); text-decoration: none; }
.xct-card.is-main { grid-column: 1 / -1; background: radial-gradient(80% 120% at 0% 0%, rgba(255,255,255,.07), transparent 60%), var(--panel); }
.xct-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 14px; background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 18px; }
.xct-card b { font: 700 19px/1.2 var(--display); letter-spacing: -.02em; }
.xct-card small { color: var(--text-2); font-size: 14.5px; line-height: 1.45; }
.xct-card em { margin-top: auto; padding-top: 10px; font-style: normal; font-weight: 600; font-size: 14.5px; }
.xct-card em i { margin-left: 4px; font-size: 12px; transition: transform .2s; }
.xct-card:hover em i { transform: translateX(3px); }
.xct-tips { margin-top: 12px; padding: 22px; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line); }
.xct-tips b { font: 700 16px/1.2 var(--display); }
.xct-tips ul { margin: 10px 0 0; padding-left: 18px; color: var(--text-2); font-size: 14.5px; line-height: 1.7; }
@media (max-width: 860px) { .xct-grid { grid-template-columns: 1fr; } .xct-lead { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .xct-card, .xct-card em i { transition: none; } .xct-card:hover { transform: none; } }

/* ── Blog — SMM.GG 2026 ───────────────────────────────────────────── */
.xb { max-width: 1180px; margin: 0 auto; }
.xb-head { margin: 8px 0 34px; }
.xb-head h1 { margin: 10px 0 12px; font: 700 clamp(40px, 5.4vw, 64px)/1 var(--display); letter-spacing: -.04em; }
.xb-head p { max-width: 560px; margin: 0; color: var(--text-2); font-size: 18px; line-height: 1.45; }
.xb-intro { margin-bottom: 22px; padding: 22px; border-radius: 22px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); }
.xb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.xb-card { display: flex; flex-direction: column; min-width: 0; border-radius: 28px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; color: var(--text); text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s; }
.xb-card:hover, .xb-card:focus-visible { color: var(--text); text-decoration: none; transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 80px -50px rgba(0,0,0,.9); }
.xb-card.is-lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.xb-card.is-lead .xb-img { aspect-ratio: auto; min-height: 400px; }
.xb-card.is-lead .xb-body { justify-content: center; padding: 40px 42px; gap: 12px; }
.xb-card.is-lead .xb-body > b { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.03em; }
.xb-card.is-lead .xb-ex { -webkit-line-clamp: 4; font-size: 16px; }
.xb-body { display: flex; flex-direction: column; gap: 9px; flex: 1; padding: 20px 22px 22px; }
.xb-body b { font: 700 19px/1.22 var(--display); letter-spacing: -.022em; }
.xb-meta { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 12.5px; font-weight: 600; }
.xb-tag { padding: 4px 10px; border-radius: 999px; background: var(--panel-3); color: var(--text); font-size: 11.5px; font-weight: 650; letter-spacing: .01em; }
.xb-ex { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-2); font-size: 14.5px; line-height: 1.5; }
.xb-body em { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 8px; font-style: normal; font-size: 14px; font-weight: 650; }
.xb-body em i { font-size: 11px; transition: transform .25s var(--ease); } .xb-card:hover em i { transform: translateX(4px); }

/* Cover stage: a 640×360 scene scaled to fit, anchored to the bottom edge. */
.xb-img, .xb-hero { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; color: #fff;
  background: radial-gradient(70% 90% at 62% 18%, rgba(255,255,255,.13), transparent 62%), radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.4px) 0 0 / 22px 22px, linear-gradient(180deg, #111113, #050505); }
.xbc { position: absolute; left: 50%; bottom: 0; width: 640px; height: 360px; transform: translateX(-50%) scale(var(--s, 1)); transform-origin: 50% 100%; font-family: var(--font); color: #fff; }
.xbc * { box-sizing: border-box; }
.xbc-glow { position: absolute; left: 270px; top: 70px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.16), transparent); filter: blur(10px); }
.xbc-phone { position: absolute; left: 318px; top: 30px; width: 206px; height: 430px; padding: 7px; border-radius: 40px; background: linear-gradient(145deg, #4a4a4e, #1b1b1d 40%, #2c2c2f); box-shadow: 0 0 0 1px rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.18), 0 40px 70px -20px rgba(0,0,0,.9); transform: translateY(26px); opacity: .4; transition: transform 1s var(--ease), opacity .8s; }
.is-play .xbc-phone { transform: none; opacity: 1; }
.xbc-scr { position: relative; height: 100%; overflow: hidden; border-radius: 33px; background: #fff; color: #111; padding: 30px 12px 0; }
.xbc-phone.is-dark .xbc-scr { background: #000; color: #fff; padding: 0; }
.xbc-island { position: absolute; z-index: 3; left: 50%; top: 8px; width: 64px; height: 18px; margin-left: -32px; border-radius: 12px; background: #000; }
.xbc-sb { position: absolute; z-index: 2; left: 0; right: 0; top: 9px; display: flex; justify-content: space-between; padding: 0 20px 0 24px; font-size: 10px; font-weight: 700; }
.xbc-sb span { display: flex; gap: 4px; align-items: center; font-size: 7.5px; }
.xbc-bat { display: inline-block; width: 15px; height: 7.5px; border-radius: 2.5px; background: currentColor; }
.is-dark .xbc-sb { color: #fff; }
.xbc-bar { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 10px; font-size: 10px; }
.xbc-bar b { font-size: 11.5px; } .xbc-bar b i { font-size: 7px; margin-left: 2px; }
.xbc-bar.is-l b { margin-right: auto; font-size: 13px; } .xbc-bar.is-l > i { margin-left: 10px; font-size: 12px; }
.xbc-av { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #000; color: #fff; overflow: hidden; flex: none; }
.xbc-av svg { width: 70%; height: auto; fill: currentColor; color: #fff; }
.xbc-av.is-c { margin: 0 auto 6px; width: 62px; height: 62px; }
.xbc-av.is-ring { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111; }
.xbc-av.is-sm { width: 26px; height: 26px; } .xbc-av.is-xs { width: 30px; height: 30px; box-shadow: 0 0 0 1.5px #fff; }
.xbc-at { margin: 0 0 8px; text-align: center; font-size: 11px; font-weight: 700; }
.xbc-st { display: flex; justify-content: center; gap: 14px; margin-bottom: 10px; text-align: center; }
.xbc-st span { display: flex; flex-direction: column; font-size: 8px; color: #777; } .xbc-st b { font-size: 12.5px; color: #111; font-variant-numeric: tabular-nums; }
.xbc-st.is-ig { flex: 1; justify-content: space-around; gap: 4px; margin: 0; }
.xbc-btns { display: flex; justify-content: center; gap: 4px; margin-bottom: 10px; }
.xbc-btns span { display: grid; place-items: center; height: 26px; padding: 0 10px; border-radius: 4px; background: #eee; font-size: 10px; font-weight: 700; }
.xbc-btns .is-pri { min-width: 96px; background: #111; color: #fff; }
.is-play .xbc-btns .is-pri { animation: xbc-press 4s 1.4s var(--ease) both; }
.xbc-btns.is-ig span { flex: 1; border-radius: 7px; }
.xbc-tabs { display: flex; justify-content: space-around; padding: 6px 0; border-bottom: 1px solid #eee; font-size: 10px; color: #aaa; }
.xbc-tabs .is-on { color: #111; } .xbc-tabs.is-txt { justify-content: flex-start; gap: 14px; padding-left: 2px; font-size: 9.5px; }
.xbc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; margin: 0 -12px; }
.xbc-grid i { position: relative; aspect-ratio: 1; } .xbc-grid.is-tall i { aspect-ratio: 3 / 4; }
.xbc-grid em { position: absolute; left: 4px; bottom: 3px; color: #fff; font: 700 7px var(--font); font-style: normal; display: none; } .xbc-grid .tl em { display: block; }
.xbc .g0 { background: linear-gradient(160deg, #d9d9dc, #8e8e93); } .xbc .g1 { background: linear-gradient(200deg, #3a3a3c, #0f0f10); } .xbc .g2 { background: radial-gradient(circle at 30% 30%, #fff, #b0b0b5 60%, #6e6e73); }
.xbc .g3 { background: linear-gradient(140deg, #636366, #1c1c1e); } .xbc .g4 { background: linear-gradient(20deg, #c7c7cc, #f2f2f7); } .xbc .g5 { background: radial-gradient(circle at 70% 70%, #48484a, #000); }
.xbc-brand { position: absolute; left: 70px; top: 46px; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: linear-gradient(160deg, #2c2c2e, #0b0b0c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 16px 30px -12px #000; font-size: 22px; }
.xbc-brand.is-logo svg { width: 30px; height: auto; fill: #fff; }
.xbc-chip { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 18px; background: rgba(36,36,38,.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 24px 40px -18px #000; opacity: 0; transform: translateY(14px) scale(.96); }
.xbc-chip span:last-child { display: flex; flex-direction: column; } .xbc-chip b { font-size: 15px; letter-spacing: -.01em; } .xbc-chip small { color: rgba(255,255,255,.62); font-size: 11px; }
.xbc-ci { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: #fff; color: #000; font-size: 13px; }
.xbc-chip.is-ok .xbc-ci { background: #30d158; color: #fff; }
.xbc-chip.c1 { left: 70px; top: 128px; } .xbc-chip.c2 { left: 128px; top: 206px; }
.xbc-yt .xbc-chip.c2 .xbc-ci, .xbc-ig .xbc-chip.c1 .xbc-ci { background: #fff; color: #000; }
.is-play .xbc-chip { animation: xbc-pop .7s var(--ease) forwards, xbc-float 6s 1.5s ease-in-out infinite; }
.is-play .xbc-chip.c1 { animation-delay: .6s, 1.4s; } .is-play .xbc-chip.c2 { animation-delay: 1.5s, 2.3s; }
/* YouTube */
.xbc-yt .xbc-scr { padding-top: 26px; }
.xbc-yt-banner { display: grid; place-items: center; height: 46px; margin: 0 -12px 8px; background: linear-gradient(120deg, #1c1c1e, #636366 60%, #d1d1d6); color: #fff; font: 800 13px var(--display); letter-spacing: .14em; }
.xbc-yt-ch { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; } .xbc-yt-ch .xbc-av { width: 44px; height: 44px; }
.xbc-yt-ch div { display: flex; flex-direction: column; } .xbc-yt-ch b { font-size: 13px; } .xbc-yt-ch small { color: #666; font-size: 8.5px; }
.xbc-sub { position: relative; height: 26px; margin-bottom: 8px; border-radius: 999px; background: #111; overflow: hidden; color: #fff; font-size: 10px; font-weight: 700; }
.xbc-sub span { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .5s var(--ease); }
.xbc-sub span + span { background: #eee; color: #111; transform: translateY(100%); }
.is-play .xbc-sub span + span { animation: xbc-sub 4.5s 1.6s var(--ease) both; }
.xbc-vid { display: flex; gap: 8px; margin: 9px 0; } .xbc-vid > i { flex: none; width: 82px; height: 46px; border-radius: 6px; }
.xbc-vid span { display: flex; flex-direction: column; gap: 4px; flex: 1; padding-top: 2px; } .xbc-vid span b { height: 6px; border-radius: 3px; background: #ddd; } .xbc-vid span b + b { width: 70%; } .xbc-vid small { width: 45%; height: 5px; border-radius: 3px; background: #eee; }
/* Instagram */
.xbc-ig-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; padding-left: 2px; }
.xbc-bio { display: flex; flex-direction: column; margin: 0 0 8px; font-size: 9px; line-height: 1.35; } .xbc-bio span { color: #555; }
.xbc-hl { display: flex; gap: 10px; margin-bottom: 10px; } .xbc-hl i { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 1px #ddd; background: radial-gradient(circle, #e5e5ea 60%, #fff 62%); }
/* Panel */
.xbc-app-top { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 10px; }
.xbc-bal { padding: 4px 9px; border-radius: 999px; background: #f2f2f7; font-size: 10px; font-weight: 700; }
.xbc-h { margin: 0 0 8px; font: 800 19px var(--display); letter-spacing: -.03em; } .xbc-h.is-sm { display: flex; align-items: center; gap: 6px; margin: 6px 0 12px; font-size: 16px; }
.xbc-pl { display: flex; gap: 5px; margin-bottom: 9px; } .xbc-pl i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #f2f2f7; font-size: 12px; } .xbc-pl .is-on { background: #111; color: #fff; }
.xbc-f { display: inline-flex; flex-direction: column; width: 100%; margin-bottom: 6px; padding: 7px 10px; border-radius: 11px; background: #f2f2f7; }
.xbc-f.is-half { width: calc(50% - 2px); } .xbc-f.is-half + .xbc-f.is-half { margin-left: 4px; }
.xbc-f small { color: #888; font-size: 7.5px; font-weight: 600; } .xbc-f b { font-size: 10.5px; white-space: nowrap; overflow: hidden; } .xbc-f b i { margin-right: 4px; } .xbc-f em { color: #666; font-size: 8px; font-style: normal; }
.xbc-type { width: 0; border-right: 1.5px solid #111; } .is-play .xbc-type { animation: xbc-type 1.6s .9s steps(20) forwards, xbc-caret .8s step-end infinite; }
.xbc-go { display: grid; place-items: center; height: 34px; margin-top: 4px; border-radius: 12px; background: #111; color: #fff; font-size: 11px; font-weight: 700; }
.is-play .xbc-go { animation: xbc-press 4s 2.6s var(--ease) both; }
.xbc-toast { position: absolute; left: 14px; right: 14px; top: 34px; display: flex; align-items: center; gap: 7px; padding: 9px 11px; border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: 0 10px 30px -8px rgba(0,0,0,.35); font-size: 10px; font-weight: 700; opacity: 0; transform: translateY(-14px); }
.xbc-toast i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #30d158; color: #fff; font-size: 8px; }
.is-play .xbc-toast { animation: xbc-toast 4s 3s var(--ease) both; }
/* API */
.xbc-win { position: absolute; left: 150px; top: 40px; width: 440px; height: 340px; border-radius: 16px; background: rgba(22,22,24,.94); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 40px 80px -30px #000; overflow: hidden; transform: translateY(24px); opacity: .4; transition: transform 1s var(--ease), opacity .8s; }
.is-play .xbc-win { transform: none; opacity: 1; }
.xbc-wbar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.xbc-wbar i { width: 11px; height: 11px; border-radius: 50%; background: #555; } .xbc-wbar i:first-child { background: #ff5f57; } .xbc-wbar i:nth-child(2) { background: #febc2e; } .xbc-wbar i:nth-child(3) { background: #28c840; }
.xbc-wbar span { flex: 1; margin-right: 50px; text-align: center; color: rgba(255,255,255,.5); font-size: 11.5px; }
.xbc-win pre { margin: 0; padding: 16px 18px; border: 0; background: none; color: rgba(255,255,255,.86); font: 500 12px/1.75 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; overflow: hidden; }
.xbc-win pre > span { display: block; opacity: 0; } .is-play .xbc-win pre > span { animation: xbc-line .35s var(--ease) forwards; }
.xbc-win em { color: #8e8e93; font-style: normal; } .xbc-win u { text-decoration: none; color: #8e8e93; } .xbc-win s { text-decoration: none; color: #9cdcfe; } .xbc-win .is-res b { color: #fff; font-weight: 600; } .xbc-win .is-res { color: #8e8e93; }
.is-play .l1 { animation-delay: .5s !important; } .is-play .l2 { animation-delay: .8s !important; } .is-play .l3 { animation-delay: 1.1s !important; } .is-play .l4 { animation-delay: 1.8s !important; } .is-play .l5 { animation-delay: 2.5s !important; } .is-play .l6 { animation-delay: 3.2s !important; } .is-play .l7 { animation-delay: 3.6s !important; }
.xbc-cur { display: inline-block; width: 7px; height: 14px; vertical-align: -2px; background: #fff; animation: xbc-caret 1s step-end infinite; }
.xbc-api .xbc-chip.c1 { left: 40px; top: 250px; } .xbc-api .xbc-chip.c2 { left: 420px; top: 250px; }
/* Refill (video) */
.xbc-video { position: absolute; inset: 0; background: radial-gradient(80% 50% at 50% 35%, #3a3a3c, #0c0c0d 75%); }
.xbc-v-top { display: flex; justify-content: center; gap: 12px; padding-top: 34px; color: rgba(255,255,255,.6); font-size: 10.5px; } .xbc-v-top .is-on { color: #fff; box-shadow: 0 2px 0 #fff; }
.xbc-rail { position: absolute; right: 8px; top: 140px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.xbc-rail > span { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 18px; } .xbc-rail small { font-size: 8px; font-weight: 700; }
.is-play .xbc-rail .fa-heart { animation: xbc-heart 1.2s 1.2s var(--ease) both; }
.xbc-cap { position: absolute; left: 12px; right: 50px; top: 300px; display: flex; flex-direction: column; gap: 3px; font-size: 10px; } .xbc-cap small { color: rgba(255,255,255,.75); font-size: 9px; }
.xbc-cap > span { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-weight: 700; font-variant-numeric: tabular-nums; } .xbc-cap > span i { font-size: 8px; }
.xbc-chart { position: absolute; left: 40px; top: 60px; width: 250px; padding: 14px 14px 12px; border-radius: 20px; background: rgba(36,36,38,.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 24px 40px -18px #000; opacity: 0; }
.is-play .xbc-chart { animation: xbc-pop .7s .5s var(--ease) forwards; }
.xbc-chart small { display: block; color: rgba(255,255,255,.55); font-size: 11px; } .xbc-chart > b { display: block; margin-bottom: 8px; font-size: 15px; }
.xbc-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.xbc-line { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 320; }
.is-play .xbc-line { animation: xbc-draw 2.2s .9s var(--ease) forwards; }
.xbc-area { fill: url(#none); fill: rgba(255,255,255,.08); }
.xbc-chart circle { fill: #ff453a; opacity: 0; } .xbc-chart circle.is-up { fill: #30d158; } .is-play .xbc-chart circle { animation: xbc-line .3s 2.4s forwards; } .is-play .xbc-chart circle.is-up { animation-delay: 3s; }
.xbc-chart div { display: flex; justify-content: space-between; margin-top: 6px; color: rgba(255,255,255,.45); font-size: 9.5px; }
.xbc-refill .xbc-chip.c2 { left: 70px; top: 262px; }
/* Compare */
.xbc-svc { position: relative; margin-bottom: 7px; padding: 10px 11px; border-radius: 13px; background: #f2f2f7; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .4s, background .4s; }
.xbc-svc b { display: block; margin-bottom: 4px; font-size: 11px; } .xbc-svc span { display: flex; gap: 4px; } .xbc-svc em { padding: 2px 6px; border-radius: 6px; background: #fff; color: #555; font: 600 8px var(--font); font-style: normal; }
.xbc-svc > i { position: absolute; right: 10px; top: 50%; display: grid; place-items: center; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: #111; color: #fff; font-size: 9px; opacity: 0; transform: scale(.4); }
.is-play .xbc-svc.is-pick { animation: xbc-pick .6s 2.2s var(--ease) forwards; } .is-play .xbc-svc.is-pick > i { animation: xbc-pop .5s 2.4s var(--ease) forwards; }
.xbc-svc.is-ghost b, .xbc-svc.is-ghost em { width: 60%; height: 8px; background: #e5e5ea; } .xbc-svc.is-ghost em { width: 34px; height: 12px; }
.xbc-list { position: absolute; left: 66px; top: 116px; display: flex; flex-direction: column; gap: 8px; width: 200px; padding: 16px; border-radius: 20px; background: rgba(36,36,38,.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 24px 40px -18px #000; }
.xbc-list b { font-size: 14px; } .xbc-list span { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.8); font-size: 12.5px; opacity: .25; }
.xbc-list span i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #30d158; color: #fff; font-size: 8px; }
.is-play .xbc-list span { animation: xbc-on .4s var(--ease) forwards; } .is-play .xbc-list span:nth-of-type(1) { animation-delay: .7s; } .is-play .xbc-list span:nth-of-type(2) { animation-delay: 1.1s; } .is-play .xbc-list span:nth-of-type(3) { animation-delay: 1.5s; } .is-play .xbc-list span:nth-of-type(4) { animation-delay: 1.9s; }
@keyframes xbc-pop { to { opacity: 1; transform: none; } }
@keyframes xbc-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes xbc-press { 0%, 30% { transform: none; } 36% { transform: scale(.94); } 44%, 100% { transform: none; } }
@keyframes xbc-sub { 0%, 30% { transform: translateY(100%); } 40%, 100% { transform: none; } }
@keyframes xbc-type { to { width: 100%; border-color: transparent; } }
@keyframes xbc-caret { 50% { border-color: transparent; opacity: 0; } }
@keyframes xbc-toast { 0%, 20% { opacity: 0; transform: translateY(-14px); } 30%, 100% { opacity: 1; transform: none; } }
@keyframes xbc-line { to { opacity: 1; } }
@keyframes xbc-draw { to { stroke-dashoffset: 0; } }
@keyframes xbc-heart { 40% { transform: scale(1.35); color: #ff375f; } 100% { color: #ff375f; } }
@keyframes xbc-pick { to { background: #fff; box-shadow: inset 0 0 0 1.5px #111, 0 8px 20px -10px rgba(0,0,0,.3); } }
@keyframes xbc-on { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .xbc *, .xbc { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; } }

/* Post */
.xb-post { max-width: 1120px; margin: 0 auto; }
.xb-post-head { max-width: 780px; margin: 0 auto 30px; text-align: center; }
.xb-crumb { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 22px; color: var(--text-2); font-size: 14px; font-weight: 600; } .xb-crumb:hover { color: var(--text); text-decoration: none; } .xb-crumb i { font-size: 11px; }
.xb-post-head .xb-meta { justify-content: center; margin-bottom: 14px; }
.xb-post-head h1 { margin: 0; font: 700 clamp(34px, 5vw, 58px)/1.04 var(--display); letter-spacing: -.04em; text-wrap: balance; }
.xb-hero { aspect-ratio: 2.1 / 1; max-height: 520px; width: 100%; margin: 0 0 48px; border-radius: 32px; box-shadow: inset 0 0 0 1px var(--line); }
.xb-layout { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: center; }
.xb-post.has-toc .xb-layout { grid-template-columns: 220px minmax(0, 720px); gap: 60px; }
.xb-toc { position: sticky; top: 96px; align-self: start; padding-top: 6px; }
.xb-toc b { display: block; margin-bottom: 12px; color: var(--text-3); font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.xb-toc nav { display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.xb-toc a { margin-left: -1px; padding: 7px 0 7px 14px; border-left: 2px solid transparent; color: var(--text-3); font-size: 13.5px; line-height: 1.35; transition: color .2s, border-color .2s; }
.xb-toc a:hover { color: var(--text); text-decoration: none; } .xb-toc a.is-on { border-color: var(--text); color: var(--text); font-weight: 600; }
.xb-post:not(.has-toc) .xb-prose { max-width: 720px; margin: 0 auto; width: 100%; }
.xb-prose { font-size: 17.5px; line-height: 1.7; color: var(--text-2); }
.xb-prose h2 { scroll-margin-top: 90px; margin: 52px 0 14px; color: var(--text); font: 700 28px/1.2 var(--display); letter-spacing: -.028em; }
.xb-prose h3 { margin: 30px 0 10px; color: var(--text); font: 650 20px/1.3 var(--display); letter-spacing: -.02em; }
.xb-prose p { margin: 0 0 18px; }
.xb-prose .xb-first { color: var(--text); font-size: 21px; line-height: 1.55; letter-spacing: -.01em; }
.xb-prose a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.xb-prose img { max-width: 100%; height: auto; border-radius: 20px; }
.xb-faqs { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 30px; }
.xb-faq { border-radius: 20px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.xb-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; color: var(--text); font: 650 16.5px/1.35 var(--display); letter-spacing: -.01em; cursor: pointer; list-style: none; }
.xb-faq summary::-webkit-details-marker { display: none; }
.xb-faq summary i { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--panel-3); }
.xb-faq summary i::before, .xb-faq summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; margin: -.8px 0 0 -5.5px; border-radius: 2px; background: var(--text); transition: transform .3s var(--ease); }
.xb-faq summary i::after { transform: rotate(90deg); } .xb-faq[open] summary i::after { transform: rotate(0); }
.xb-faq > div { padding: 0 22px 6px; font-size: 16px; animation: x-fade-in .3s var(--ease); }
.xb-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0 0; }
.xb-prose .xb-link { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--panel-3); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; }
.xb-prose .xb-link:hover { background: var(--line-2); } .xb-link i { font-size: 10px; }
.xb-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1000px; margin: 70px auto 0; padding: 40px 44px; border-radius: 32px; background: radial-gradient(70% 120% at 100% 0%, rgba(255,255,255,.1), transparent 60%), var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.xb-cta h2 { margin: 0 0 6px; font: 700 30px/1.1 var(--display); letter-spacing: -.03em; } .xb-cta p { margin: 0; color: var(--text-2); font-size: 16px; }
.xb-cta-btns { display: flex; gap: 10px; flex: none; }
@keyframes x-fade-in { from { opacity: 0; } }
@media (max-width: 980px) {
  .xb-grid { grid-template-columns: 1fr 1fr; }
  .xb-card.is-lead { grid-template-columns: 1fr; } .xb-card.is-lead .xb-img { min-height: 0; aspect-ratio: 16 / 9; } .xb-card.is-lead .xb-body { padding: 24px; }
  .xb-post.has-toc .xb-layout { grid-template-columns: minmax(0, 1fr); } .xb-toc { display: none; }
  .xb-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .xb-grid { grid-template-columns: 1fr; gap: 16px; } .xb-card { border-radius: 24px; }
  .xb-head h1 { font-size: 40px; } .xb-head p { font-size: 16px; }
  .xb-hero { aspect-ratio: 16 / 10; margin: 0 -16px 32px; width: auto; border-radius: 0; box-shadow: none; }
  .xb-post-head { text-align: left; } .xb-post-head .xb-meta { justify-content: flex-start; }
  .xb-prose { font-size: 16.5px; } .xb-prose .xb-first { font-size: 19px; } .xb-prose h2 { font-size: 24px; margin-top: 40px; }
  .xb-cta { padding: 28px 22px; border-radius: 26px; } .xb-cta-btns { width: 100%; flex-direction: column; } .xb-cta-btns .xaf-btn { width: 100%; }
}

.xbc-v-art { position: absolute; left: 0; right: 0; top: 150px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.xbc-v-art b { font: 900 30px/1 var(--display); letter-spacing: -.02em; color: #fff; text-shadow: 0 10px 30px rgba(0,0,0,.6); }
.xbc-v-art span { padding: 3px 9px; border-radius: 6px; background: #fff; color: #000; font-size: 10px; font-weight: 800; }
.is-play .xbc-v-art { animation: xbc-pop .8s .4s var(--ease) both; }
/* News scenes */
.xbc-land { position: absolute; left: 186px; top: 66px; width: 400px; height: 200px; padding: 7px; border-radius: 38px; background: linear-gradient(145deg, #4a4a4e, #1b1b1d 40%, #2c2c2f); box-shadow: 0 0 0 1px rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.18), 0 40px 70px -20px rgba(0,0,0,.9); opacity: .4; transform: translateY(24px) rotate(-3deg); transition: transform 1s var(--ease), opacity .8s; }
.is-play .xbc-land { opacity: 1; transform: rotate(-3deg); }
.xbc-land-scr { position: relative; height: 100%; border-radius: 31px; overflow: hidden; background: radial-gradient(60% 90% at 30% 40%, #8e8e93, #2c2c2e 55%, #0b0b0c); }
.xbc-lv { position: absolute; inset: 0; }
.xbc-lv-top { position: absolute; left: 22px; top: 14px; display: flex; gap: 8px; align-items: center; font-size: 11px; } .xbc-lv-top span { padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.2); font-weight: 700; }
.xbc-lv-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255,255,255,.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 15px; }
.xbc-lv-bar { position: absolute; left: 22px; right: 22px; bottom: 16px; display: flex; align-items: center; gap: 8px; font-size: 9.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.xbc-lv-bar i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; } .xbc-lv-bar em { display: block; width: 4%; height: 100%; background: #fff; }
.is-play .xbc-lv-bar em { animation: xbc-prog 5s 1s linear forwards; } @keyframes xbc-prog { to { width: 22%; } }
.xbc-igl .xbc-chip.c1 { left: 40px; top: 214px; } .xbc-igl .xbc-chip.c2 { left: 380px; top: 270px; } .xbc-igl .xbc-brand { left: 40px; top: 60px; }
.xbc-ttc-vid { position: absolute; inset: 0 0 50% 0; background: radial-gradient(70% 70% at 50% 40%, #636366, #0c0c0d); }
.xbc-sheet { position: absolute; left: 0; right: 0; top: 150px; bottom: 0; padding: 12px 12px 0; border-radius: 18px 18px 0 0; background: #fff; color: #111; transform: translateY(60px); transition: transform .9s .3s var(--ease); }
.is-play .xbc-sheet { transform: none; }
.xbc-sheet-h { margin: 0 0 10px; text-align: center; font-size: 10px; font-weight: 700; }
.xbc-cm { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; } .xbc-cm .xbc-av.is-xs { width: 24px; height: 24px; box-shadow: none; }
.xbc-voice { display: flex; align-items: center; gap: 7px; flex: 1; height: 30px; padding: 0 10px; border-radius: 999px; background: #f2f2f7; font-size: 9px; } .xbc-voice small { color: #666; font-variant-numeric: tabular-nums; }
.xbc-wave { display: flex; align-items: center; gap: 2px; flex: 1; } .xbc-wave b { flex: 1; height: 6px; border-radius: 2px; background: #111; }
.xbc-wave b:nth-child(3n) { height: 14px; } .xbc-wave b:nth-child(4n+1) { height: 10px; } .xbc-wave b:nth-child(5n) { height: 4px; }
.is-play .xbc-wave b { animation: xbc-wv 1s ease-in-out infinite alternate; } .is-play .xbc-wave b:nth-child(2n) { animation-delay: .25s; } .is-play .xbc-wave b:nth-child(3n) { animation-delay: .5s; }
@keyframes xbc-wv { to { transform: scaleY(.45); } }
.xbc-poll { margin: 0 0 9px 31px; padding: 9px; border-radius: 12px; background: #f2f2f7; } .xbc-poll > b { display: block; margin-bottom: 6px; font-size: 9.5px; }
.xbc-poll span { position: relative; display: flex; justify-content: space-between; margin-top: 4px; padding: 5px 8px; border-radius: 7px; background: #fff; overflow: hidden; font-size: 8.5px; font-weight: 600; }
.xbc-poll span::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: #e5e5ea; transition: width 1.2s 1.2s var(--ease); } .is-play .xbc-poll span::before { width: var(--w); }
.xbc-poll em, .xbc-poll small { position: relative; font-style: normal; }
.xbc-car { display: flex; gap: 4px; } .xbc-car i { position: relative; width: 42px; height: 52px; border-radius: 8px; } .xbc-car em { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 800 11px var(--font); font-style: normal; }
.xbc-ed-vid { position: relative; height: 170px; margin: 30px 0 0; background: radial-gradient(70% 70% at 40% 40%, #8e8e93, #1c1c1e); } .xbc-ed-vid span { position: absolute; right: 8px; bottom: 6px; font-size: 9px; font-weight: 700; }
.xbc-ed-strip { display: flex; gap: 2px; padding: 6px 8px; } .xbc-ed-strip i { flex: 1; height: 22px; border-radius: 4px; background: #3a3a3c; } .xbc-ed-strip i:nth-child(odd) { background: #636366; }
.is-play .xbc-ed-strip i:nth-child(2), .is-play .xbc-ed-strip i:nth-child(5) { animation: xbc-cut .5s 2.4s var(--ease) forwards; } @keyframes xbc-cut { to { flex: .25; opacity: .35; } }
.xbc-ed-chat { display: flex; flex-direction: column; gap: 6px; padding: 4px 10px; } .xbc-ed-chat p { max-width: 86%; margin: 0; padding: 7px 10px; border-radius: 14px; font-size: 9.5px; line-height: 1.35; opacity: 0; }
.xbc-ed-chat .is-me { align-self: flex-end; background: #fff; color: #000; } .xbc-ed-chat .is-ai { background: #2c2c2e; } .xbc-ed-chat .is-ai i { margin-right: 4px; }
.is-play .xbc-ed-chat .is-me { animation: xbc-pop .5s .9s var(--ease) forwards; } .is-play .xbc-ed-chat .is-ai { animation: xbc-pop .5s 2s var(--ease) forwards; }
.xbc-ed-in, .xbc-ai-in { display: flex; justify-content: space-between; align-items: center; margin: 8px 10px; padding: 0 4px 0 12px; height: 30px; border-radius: 999px; background: #1c1c1e; color: rgba(255,255,255,.5); font-size: 9.5px; }
.xbc-ed-in i, .xbc-ai-in i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #000; font-size: 9px; }
.xbc-aiw { left: 60px; top: 40px; width: 360px; height: 330px; }
.xbc-ai-body { padding: 16px; } .xbc-ai-q { margin: 0 0 12px auto; width: max-content; padding: 8px 12px; border-radius: 14px; background: #fff; color: #000; font-size: 12px; font-weight: 600; }
.xbc-ai-card { padding: 14px; border-radius: 14px; background: #1c1c1e; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); opacity: 0; transform: translateY(8px); } .is-play .xbc-ai-card { animation: xbc-pop .6s 1s var(--ease) forwards; }
.xbc-ai-card > b { display: block; margin-bottom: 10px; font-size: 12px; }
.xbc-ai-bars { display: flex; align-items: flex-end; gap: 8px; height: 90px; } .xbc-ai-bars i { flex: 1; height: 4%; border-radius: 5px 5px 2px 2px; background: linear-gradient(#fff, #8e8e93); transition: height .9s var(--ease); }
.is-play .xbc-ai-bars i { height: var(--h); transition-delay: 1.4s; }
.xbc-ai-days { display: flex; gap: 8px; margin-top: 6px; } .xbc-ai-days span { flex: 1; text-align: center; color: rgba(255,255,255,.45); font-size: 9.5px; }
.xbc-aiw .xbc-ai-in { margin: 12px 0 0; }
.xbc-tl { position: absolute; left: 450px; top: 70px; display: flex; flex-direction: column; gap: 10px; }
.xbc-tl span { display: flex; flex-direction: column; min-width: 180px; padding: 10px 14px; border-radius: 16px; background: rgba(36,36,38,.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 24px 40px -18px #000; font-size: 12.5px; font-weight: 600; opacity: 0; transform: translateX(14px); }
.xbc-tl b { color: rgba(255,255,255,.55); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.is-play .xbc-tl span { animation: xbc-pop .6s var(--ease) forwards; } .is-play .xbc-tl span:nth-child(1) { animation-delay: .8s; } .is-play .xbc-tl span:nth-child(2) { animation-delay: 1.3s; } .is-play .xbc-tl span:nth-child(3) { animation-delay: 1.8s; }
/* Post: sources and news cards */
.xb-prose h2.xb-src-h { margin-top: 40px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); font-family: var(--font); }
.xb-prose .xb-sources { color: var(--text-3); font-size: 14px; line-height: 1.6; }
.xb-card.is-news .xb-tag::after { content: " · News"; color: var(--text-3); }

/* ── Dashboard — SMM.GG 2026 ─────────────────────────────────────── */
.xd { max-width: 1320px; margin: 0 auto; }
.xd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 4px 0 26px; }
.xd-date { display: block; margin-bottom: 8px; color: var(--text-3); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.xd-head h1 { margin: 0 0 8px; font: 700 clamp(32px, 3.6vw, 46px)/1.04 var(--display); letter-spacing: -.04em; }
.xd-head p { margin: 0; color: var(--text-2); font-size: 16px; }
.xd-acts { display: flex; gap: 10px; flex: none; }
.xd-kpis { display: grid; grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.xd-bal, .xd-kpi, .xd-card { position: relative; min-width: 0; border-radius: 26px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.xd-bal { display: flex; flex-direction: column; padding: 22px 22px 20px; overflow: hidden; background: radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.12), transparent 55%), linear-gradient(160deg, var(--panel-3), var(--panel)); box-shadow: inset 0 0 0 1px var(--line-2); }
.xd-bal small, .xd-kpi small { color: var(--text-3); font-size: 12.5px; font-weight: 600; }
.xd-bal b { margin: 10px 0 auto; font: 700 clamp(30px, 2.6vw, 38px)/1 var(--display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.xd-bal-sub { margin-top: 14px; color: var(--text-2); font-size: 13px; }
.xd-bal-go { position: absolute; right: 16px; top: 16px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--text); color: var(--bg); transition: transform .2s var(--ease); }
.xd-bal-go:hover { color: var(--bg); transform: scale(1.06); }
.xd-kpi { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.xd-kpi b { font: 700 30px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.xd-kpi em { min-height: 16px; color: var(--text-3); font-size: 12.5px; font-style: normal; }
.xd-kpi em.is-up { color: var(--ok); } .xd-kpi em.is-down { color: var(--text-2); }
.xd-sk { color: transparent !important; width: 70%; border-radius: 8px; background: linear-gradient(90deg, var(--panel-2), var(--panel-3), var(--panel-2)) 0 0 / 200% 100%; animation: xd-sh 1.2s linear infinite; }
@keyframes xd-sh { to { background-position: -200% 0; } }
.xd-load { list-style: none; height: 120px; border-radius: 16px; background: linear-gradient(90deg, var(--panel-2), var(--panel-3), var(--panel-2)) 0 0 / 200% 100%; animation: xd-sh 1.2s linear infinite; }
.xd-fail { list-style: none; padding: 20px 0; color: var(--text-3); font-size: 14px; }
.xd-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.xd-card { padding: 22px 22px 20px; }
.xd-spend { grid-column: span 8; } .xd-status { grid-column: span 4; }
.xd-plat { grid-column: span 4; } .xd-recent { grid-column: span 8; grid-row: span 2; } .xd-top { grid-column: span 4; }
.xd-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.xd-card-h h2 { margin: 0 0 3px; font: 650 17px var(--display); letter-spacing: -.02em; }
.xd-card-h p { margin: 0; color: var(--text-3); font-size: 13px; }
.xd-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.xd-seg button { height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--text-3); font: 650 12px var(--font); cursor: pointer; }
.xd-seg button.is-on { background: var(--text); color: var(--bg); }
.xd-more { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13px; font-weight: 600; white-space: nowrap; } .xd-more:hover { color: var(--text); text-decoration: none; } .xd-more i { font-size: 10px; }
/* spend chart */
.xd-chart { position: relative; height: 240px; }
.xd-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.xd-grid-l { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.xd-ax { fill: var(--text-3); font: 500 11px var(--font); }
.xd-chart svg text { transform-box: fill-box; }
.xd-bar { fill: var(--text-2); transform-origin: 0 100%; transform-box: fill-box; animation: xd-grow .6s var(--ease) both; animation-delay: var(--d); transition: fill .15s; }
.xd-b.is-on .xd-bar { fill: var(--text); }
.xd-hit { fill: transparent; cursor: default; }
@keyframes xd-grow { from { transform: scaleY(0); } }
.xd-tip { position: absolute; top: -6px; z-index: 2; display: flex; flex-direction: column; gap: 2px; min-width: 110px; padding: 9px 12px; border-radius: 12px; background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 40px -16px rgba(0,0,0,.8); transform: translateX(-50%); pointer-events: none; }
.xd-tip small { color: var(--text-3); font-size: 11.5px; } .xd-tip b { font-size: 16px; font-variant-numeric: tabular-nums; } .xd-tip span { color: var(--text-2); font-size: 12px; }
/* status */
.xd-stack { display: flex; gap: 2px; height: 14px; margin: 4px 0 18px; border-radius: 7px; overflow: hidden; background: var(--panel-2); }
.xd-stack i { min-width: 4px; animation: xd-grow-x .7s var(--ease) both; transform-origin: 0 50%; }
@keyframes xd-grow-x { from { transform: scaleX(0); } }
.xd-legend { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.xd-legend li:not(.xd-load) { display: grid; grid-template-columns: 10px 1fr auto 44px; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.xd-legend li:first-child { border-top: 0; }
.xd-legend li > i { width: 10px; height: 10px; border-radius: 3px; } .xd-legend span { color: var(--text-2); } .xd-legend b { font-variant-numeric: tabular-nums; } .xd-legend small { color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }
.xd .is-run { background: var(--info); } .xd .is-proc { background: #8e8e93; } .xd .is-wait { background: var(--warn); } .xd .is-done { background: var(--ok); } .xd .is-partial { background: #ff9f0a; } .xd .is-cancel { background: var(--bad); }
/* platforms */
.xd-bars, .xd-orders, .xd-tops { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.xd-bars li:not(.xd-load) { display: flex; align-items: center; gap: 12px; padding: 9px 0; animation: xd-in .5s var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
.xd-bars li > div { flex: 1; min-width: 0; }
.xd-pl { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 7px; font-size: 13.5px; } .xd-pl span { color: var(--text-3); font-variant-numeric: tabular-nums; }
.xd-track { display: block; height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.xd-track i { display: block; width: var(--w); height: 100%; border-radius: 3px; background: var(--text); animation: xd-grow-x .8s var(--ease) both; transform-origin: 0 50%; }
.xd-track.is-sm { height: 4px; margin-top: 8px; } .xd-track.is-sm i.is-done { background: var(--ok); } .xd-track.is-sm i.is-run, .xd-track.is-sm i.is-proc, .xd-track.is-sm i.is-wait { background: var(--text); } .xd-track.is-sm i.is-partial { background: #ff9f0a; }
.xd-pi { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 16px; }
@keyframes xd-in { from { opacity: 0; transform: translateY(6px); } }
/* recent orders */
.xd-orders li:not(.xd-load) + li { border-top: 1px solid var(--line); }
.xd-orders a { display: flex; align-items: center; gap: 14px; padding: 13px 4px; color: var(--text); text-decoration: none; border-radius: 14px; transition: background .2s; }
.xd-orders a:hover { color: var(--text); background: var(--panel-2); }
.xd-o { flex: 1; min-width: 0; } .xd-o b { display: block; overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; } .xd-o small { color: var(--text-3); font-size: 12.5px; }
.xd-o-r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; } .xd-o-r b { font-size: 14px; font-variant-numeric: tabular-nums; }
.xd-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--panel-2) !important; color: var(--text-2); font-size: 11.5px; font-weight: 650; }
.xd-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #8e8e93; }
.xd-chip.is-done::before { background: var(--ok); } .xd-chip.is-run::before { background: var(--info); } .xd-chip.is-wait::before { background: var(--warn); } .xd-chip.is-partial::before { background: #ff9f0a; } .xd-chip.is-cancel::before { background: var(--bad); }
/* top services */
.xd-tops li:not(.xd-load) { display: flex; align-items: center; gap: 12px; padding: 10px 0; } .xd-tops li + li { border-top: 1px solid var(--line); }
.xd-tops div { min-width: 0; } .xd-tops b { display: block; overflow: hidden; font-size: 13.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; } .xd-tops small { color: var(--text-3); font-size: 12px; }
.xd-rank { width: 16px; flex: none; color: var(--text-3); font: 700 13px var(--display); text-align: center; }
/* empty */
.xd-empty { display: flex; flex-direction: column; align-items: center; padding: 64px 24px; border-radius: 28px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.xd-empty-ic { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 18px; border-radius: 20px; background: var(--panel-3); font-size: 24px; }
.xd-empty h2 { margin: 0 0 8px; font: 700 26px var(--display); letter-spacing: -.03em; } .xd-empty p { margin: 0 0 22px; color: var(--text-2); }
.xd-note { margin-top: 14px; }
@media (max-width: 1180px) {
  .xd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .xd-bal { grid-column: 1 / -1; }
  .xd-spend, .xd-recent { grid-column: 1 / -1; grid-row: auto; } .xd-status, .xd-plat, .xd-top { grid-column: span 6; }
  .xd-top { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .xd-head { flex-direction: column; align-items: stretch; } .xd-acts .xaf-btn { flex: 1; }
  .xd-kpis { gap: 10px; } .xd-kpi { padding: 16px; border-radius: 22px; } .xd-kpi b { font-size: 24px; }
  .xd-grid { gap: 10px; } .xd-status, .xd-plat { grid-column: 1 / -1; } .xd-card { padding: 18px 16px; border-radius: 22px; }
  .xd-chart { height: 200px; } .xd-orders a { gap: 10px; padding: 12px 0; }
}
@media (prefers-reduced-motion: reduce) { .xd *, .xd *::before { animation: none !important; } }
.xd-head .xd-acts { padding: 0; background: none; box-shadow: none; border: 0; }
.xd-status { display: flex; flex-direction: column; }
.xd-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; padding-top: 16px; }
.xd-facts div { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 16px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.xd-facts small { color: var(--text-3); font-size: 12px; font-weight: 600; } .xd-facts b { font: 700 20px var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.xd-filter { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.xd-filter .xd-seg button { height: 32px; padding: 0 14px; font-size: 12.5px; }
.xd-filter-note { color: var(--text-3); font-size: 12.5px; }
.xd-none { list-style: none; padding: 14px 0; color: var(--text-3); font-size: 13.5px; }
@media (max-width: 640px) { .xd-filter { flex-direction: column; align-items: stretch; gap: 8px; } .xd-filter .xd-seg { display: flex; overflow-x: auto; scrollbar-width: none; } .xd-filter .xd-seg button { flex: 1 0 auto; } }

/* Avatars — loaded after the page styles so the chosen design always wins. */
/* Avatars: Apple Contacts style — silver gradient, white initial, soft top light, hairline ring. */
.x-avatar, .xa-hero .xa-avatar, .xa-avatar {
  position: relative; display: grid; place-items: center; border-radius: 50%; overflow: hidden;
  background: linear-gradient(180deg, #a5abb8 0%, #858a96 100%) !important;
  color: #fff !important; font-family: var(--display); font-weight: 600; letter-spacing: 0; text-shadow: 0 1px 1px rgba(0,0,0,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 .5px rgba(255,255,255,.18), 0 0 0 1px rgba(0,0,0,.35) !important;
}
.x-avatar::after, .xa-avatar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.22), transparent 60%); pointer-events: none; }
.x-acct-btn .x-avatar { font-size: 15px; }
.x-avatar.is-lg { font-size: 17px; }
.xa-hero .xa-avatar { font-size: 36px !important; }
html[data-theme="light"] .x-avatar, html[data-theme="light"] .xa-avatar { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 1px rgba(0,0,0,.08) !important; }
/* Profile picture designs */
.x-avatar.av-orb, .xa-avatar.av-orb { background: radial-gradient(circle at 34% 28%, #ffffff 0%, #e6e7ea 16%, #a9adb6 46%, #5d6069 78%, #2b2c31 100%) !important; }
.x-avatar.av-glass, .xa-avatar.av-glass { background: radial-gradient(120% 90% at 30% 10%, #4a4b52 0%, #17171a 55%, #000 100%) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.14), 0 0 0 1px rgba(0,0,0,.4) !important; }
.x-avatar.av-mark, .xa-avatar.av-mark { background: linear-gradient(160deg, #2c2c2e, #050505) !important; }
.x-avatar.av-mark svg, .xa-avatar.av-mark svg { width: 66%; height: auto; fill: #fff; color: #fff; }
.x-avatar.av-rings, .xa-avatar.av-rings { background: repeating-radial-gradient(circle at 50% 50%, #f2f2f4 0 6%, #9a9ea8 9%, #3b3c42 13%, #c9cbd1 17%) !important; }
.x-avatar.av-pearl, .xa-avatar.av-pearl { background: linear-gradient(180deg, #ffffff 0%, #e4e5e9 100%) !important; color: #1d1d1f !important; text-shadow: none; }
.x-avatar.av-orb::after, .xa-avatar.av-orb::after, .x-avatar.av-rings::after, .xa-avatar.av-rings::after { background: radial-gradient(60% 40% at 35% 20%, rgba(255,255,255,.45), transparent 70%); }

/* ── Legal pages — Apple-style: typography first, no boxes ─────────── */
.xl { max-width: 980px; margin: 0 auto; padding-bottom: 40px; }
.xl-tabs { display: flex; gap: 26px; margin: 0 0 56px; border-bottom: 1px solid var(--line); }
.xl-tab { position: relative; padding: 12px 0 13px; color: var(--text-3); font: 500 14px var(--font); text-decoration: none; transition: color .2s; }
.xl-tab:hover { color: var(--text); text-decoration: none; }
.xl-tab.is-on { color: var(--text); }
.xl-tab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--text); }
.xl-head { max-width: 760px; margin: 0 0 56px; }
.xl-eyebrow { display: block; margin-bottom: 14px; color: var(--text-3); font: 600 14px var(--font); }
.xl-head h1 { margin: 0 0 18px; font: 700 clamp(40px, 5.6vw, 64px)/1.03 var(--display); letter-spacing: -.045em; }
.xl-lede { margin: 0 0 18px; color: var(--text-2); font-size: clamp(19px, 2vw, 22px); line-height: 1.45; letter-spacing: -.012em; }
.xl-meta { margin: 0; color: var(--text-3); font-size: 14px; }
.xl-glance, .xl-index { padding: 34px 0 40px; border-top: 1px solid var(--line); }
.xl-glance h2, .xl-index h2 { margin: 0 0 24px; font: 700 26px var(--display); letter-spacing: -.03em; }
.xl-glance ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; margin: 0; padding: 0; list-style: none; }
.xl-glance li { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.xl-glance li:nth-child(-n+2) { border-top: 0; padding-top: 4px; }
.xl-glance li > i { flex: none; width: 22px; margin-top: 3px; color: var(--text); font-size: 17px; text-align: center; }
.xl-glance li div { display: flex; flex-direction: column; gap: 4px; }
.xl-glance b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.xl-glance span { color: var(--text-2); font-size: 15px; line-height: 1.5; }
.xl-index ol { columns: 2; column-gap: 48px; margin: 0; padding: 0; list-style: none; }
.xl-index li { break-inside: avoid; }
.xl-index a { display: flex; gap: 14px; padding: 9px 0; color: var(--text); font-size: 15.5px; text-decoration: none; transition: color .2s; }
.xl-index a span { width: 22px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.xl-index a:hover { color: var(--text-2); }
.xl-body { border-top: 1px solid var(--line); }
.xl-sec { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 48px; padding: 40px 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--top) + 16px); }
.xl-sec:first-child { border-top: 0; }
.xl-sec-h { display: flex; flex-direction: column; gap: 8px; }
.xl-num { color: var(--text-3); font: 600 14px var(--font); font-variant-numeric: tabular-nums; }
.xl-sec h2 { margin: 0; font: 700 22px/1.25 var(--display); letter-spacing: -.025em; }
.xl-sec-b p { margin: 0 0 14px; color: var(--text-2); font-size: 17px; line-height: 1.65; letter-spacing: -.005em; }
.xl-sec-b ul { margin: 0 0 14px; padding: 0; list-style: none; }
.xl-sec-b li { position: relative; margin: 0 0 12px; padding-left: 20px; color: var(--text-2); font-size: 17px; line-height: 1.65; letter-spacing: -.005em; }
.xl-sec-b li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); }
.xl-sec-b > :last-child { margin-bottom: 0; }
.xl-foot { padding: 34px 0 0; border-top: 1px solid var(--line); color: var(--text-2); font-size: 15px; }
.xl-foot a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-3); }
.xl-copy { margin-top: 8px; color: var(--text-3); font-size: 13px; }
@media (max-width: 860px) {
  .xl-sec { grid-template-columns: 1fr; gap: 14px; padding: 32px 0; }
  .xl-glance ul { grid-template-columns: 1fr; } .xl-glance li:nth-child(2) { border-top: 1px solid var(--line); padding-top: 18px; }
  .xl-index ol { columns: 1; }
}
@media (max-width: 640px) {
  .xl-tabs { margin-bottom: 36px; gap: 22px; } .xl-head { margin-bottom: 36px; }
  .xl-glance h2, .xl-index h2 { font-size: 22px; } .xl-sec h2 { font-size: 20px; }
  .xl-sec-b p, .xl-sec-b li { font-size: 16px; }
}

/* ── FAQ — SMM.GG 2026 ─────────────────────────────────────────────── */
.xq { max-width: 1080px; margin: 0 auto; }
.xq-hero { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: center; margin: 8px 0 34px; }
.xq-hero h1 { margin: 10px 0 12px; font: 700 clamp(40px, 5.4vw, 64px)/1 var(--display); letter-spacing: -.045em; }
.xq-hero-t > p { margin: 0 0 22px; max-width: 480px; color: var(--text-2); font-size: 18px; line-height: 1.5; }
.xq-search { display: flex; align-items: center; gap: 12px; height: 56px; max-width: 520px; padding: 0 12px 0 18px; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-3); }
.xq-search:focus-within { box-shadow: inset 0 0 0 1px var(--line-3), var(--ring); }
.xq-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--text); font: 500 16px var(--font); outline: 0; }
.xq-search kbd { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 7px; background: var(--panel-3); color: var(--text-3); font: 600 12px var(--font); }
/* chat demo */
.xq-demo { border-radius: 30px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: inset 0 0 0 1px var(--line-2), 0 50px 100px -50px rgba(0,0,0,.9); overflow: hidden; }
.xq-demo-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.xq-demo-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.xq-demo-av svg { width: 70%; height: auto; fill: #fff; color: #fff; }
.xq-demo-top b { font-size: 14px; } .xq-demo-top small { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--text-3); font-size: 12px; }
.xq-demo-top small i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.xq-demo-chat { display: flex; flex-direction: column; gap: 8px; min-height: 250px; padding: 20px 18px 22px; }
.xq-pair { display: none; flex-direction: column; gap: 8px; }
.xq-pair.is-q { display: flex; }
.xq-pair p { max-width: 82%; margin: 0; padding: 10px 14px; border-radius: 20px; font-size: 14.5px; line-height: 1.45; }
.xq-q { align-self: flex-end; background: #0a84ff; color: #fff; border-bottom-right-radius: 6px; animation: xq-pop .35s var(--ease); }
.xq-ans { align-self: flex-start; display: none; background: var(--panel-3); color: var(--text); border-bottom-left-radius: 6px; }
.xq-pair.is-a .xq-ans { display: block; animation: xq-pop .4s var(--ease); }
.xq-typing { display: none; align-self: flex-start; gap: 4px; padding: 12px 14px; border-radius: 20px; background: var(--panel-3); }
.xq-typing.is-on { display: inline-flex; animation: xq-pop .3s var(--ease); }
.xq-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); animation: xq-dot 1s infinite ease-in-out; }
.xq-typing i:nth-child(2) { animation-delay: .15s; } .xq-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes xq-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes xq-dot { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
/* chips */
.xq-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.xq-chips button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); font: 600 13.5px var(--font); cursor: pointer; transition: background .2s, color .2s; }
.xq-chips button i { font-size: 12px; } .xq-chips button:hover { color: var(--text); }
.xq-chips button.is-on { background: var(--text); color: var(--bg); box-shadow: none; }
/* groups + accordion */
.xq-group { margin-bottom: 28px; } .xq-group[hidden] { display: none; }
.xq-group h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px 2px; font: 650 17px var(--display); letter-spacing: -.015em; }
.xq-group h2 span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; color: var(--text-2); }
.xq-item { border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, box-shadow .2s; }
.xq-item + .xq-item { margin-top: 8px; }
.xq-item[hidden] { display: none; }
.xq-item[open] { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.xq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; list-style: none; cursor: pointer; font: 600 15.5px/1.35 var(--font); color: var(--text); }
.xq-item summary::-webkit-details-marker { display: none; }
.xq-item summary i { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--panel-3); }
.xq-item summary i::before, .xq-item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.6px; margin: -.8px 0 0 -5px; border-radius: 2px; background: var(--text); transition: transform .3s var(--ease); }
.xq-item summary i::after { transform: rotate(90deg); }
.xq-item[open]:not(.is-closing) summary i::after { transform: rotate(0); }
.xq-a { overflow: hidden; transition: height .28s var(--ease); }
.xq-a p { margin: 0; padding: 0 20px 18px; color: var(--text-2); font-size: 15px; line-height: 1.65; }
.xq-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 50px 20px; text-align: center; color: var(--text-2); }
.xq-empty[hidden] { display: none; } .xq-empty span { font-size: 28px; color: var(--text-3); } .xq-empty small { color: var(--text-3); }
.xq-help { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 36px; padding: 24px 26px; border-radius: 26px; background: radial-gradient(90% 140% at 100% 0%, rgba(10,132,255,.14), transparent 60%), var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.xq-help > div { display: flex; flex-direction: column; gap: 2px; } .xq-help b { font: 700 19px var(--display); letter-spacing: -.02em; } .xq-help small { color: var(--text-2); font-size: 14px; }
@media (max-width: 900px) { .xq-hero { grid-template-columns: 1fr; gap: 26px; } .xq-demo { max-width: 460px; } }
@media (max-width: 640px) {
  .xq-hero-t > p { font-size: 16px; } .xq-search { height: 52px; } .xq-search kbd { display: none; }
  .xq-demo-chat { min-height: 210px; } .xq-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 22px; padding: 0 16px; scrollbar-width: none; } .xq-chips::-webkit-scrollbar { display: none; } .xq-chips button { flex: none; }
  .xq-item summary { padding: 16px; font-size: 15px; } .xq-a p { padding: 0 16px 16px; }
  .xq-help { flex-direction: column; align-items: stretch; } .xq-help .xaf-btn { width: 100%; }
}
.xq-search input, .xq-search input:focus { min-height: 0; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }

/* ── Special order forms: Discord boosts, Instagram verification, Twitch gifted subs, Spotify ── */
.xsp-seg { display: inline-flex; gap: 4px; margin: 0 0 14px; padding: 4px; border-radius: 999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.xsp-seg button { height: 34px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--text-2); font: 600 13.5px var(--font); cursor: pointer; transition: background .2s, color .2s; }
.xsp-seg button.is-on { background: var(--text); color: var(--bg); }
.xdb-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.xdb-pk, .xpk { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px 16px; border: 0; border-radius: 20px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-align: center; cursor: pointer; opacity: 0; animation: xs-tile .45s var(--ease) forwards; animation-delay: calc(var(--i) * 40ms); transition: background .2s, box-shadow .2s, transform .2s var(--ease); }
.xdb-pk:hover, .xpk:hover { background: var(--panel-2); transform: translateY(-2px); }
.xdb-pk.is-on, .xpk.is-on { background: var(--panel-2); box-shadow: inset 0 0 0 2px var(--text); }
.xdb-pk img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(88,101,242,.35)); }
.xdb-pk > b { display: flex; flex-direction: column; font: 700 26px/1 var(--display); letter-spacing: -.03em; }
.xdb-pk > b small { margin-top: 3px; color: var(--text-3); font: 600 11.5px var(--font); letter-spacing: .02em; text-transform: uppercase; }
.xdb-p { font: 650 16px var(--font); font-variant-numeric: tabular-nums; }
.xdb-u { color: var(--text-3); font-size: 11.5px; }
.xdb-pk > em { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: #5865f2; color: #fff; font: 700 10.5px var(--font); font-style: normal; letter-spacing: .02em; white-space: nowrap; }
.xdb-ck { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--text); color: var(--bg); font-size: 9px; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .25s var(--ease); }
.is-on > .xdb-ck { opacity: 1; transform: none; }
.xpk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.xpk-grid.is-igv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xpk-grid.is-igv .xpk { align-items: flex-start; padding: 20px; text-align: left; }
.xpk-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--panel-3); font-size: 17px; }
.is-twitch .xpk-ic { background: rgba(145,70,255,.16); color: #a970ff; }
.is-igv .xpk-ic { background: rgba(0,149,246,.14); color: #3aa0ff; }
.xpk > b { font: 650 15.5px/1.3 var(--display); letter-spacing: -.01em; }
.xpk > small { color: var(--text-2); font-size: 13px; line-height: 1.5; }
.xpk-p { display: flex; flex-direction: column; margin-top: auto; padding-top: 4px; font: 700 18px var(--font); font-variant-numeric: tabular-nums; }
.xpk-p em { color: var(--text-3); font: 500 11.5px var(--font); font-style: normal; }
.is-igv .xpk-p { flex-direction: row; align-items: baseline; gap: 8px; }
/* details panel */
.x-special { margin: 0 0 16px; padding: 18px; border-radius: 22px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); animation: xs-in .4s var(--ease) both; }
.x-special[hidden] { display: none; }
.x-special.is-spotify { padding: 0; background: none; box-shadow: none; }
.xsp-row { display: flex; align-items: center; gap: 12px; }
.xsp-row b, .xsp-perso b, .xsp-guide summary b { display: block; font-size: 14.5px; font-weight: 650; }
.xsp-row small, .xsp-perso small, .xsp-guide summary small { color: var(--text-3); font-size: 12.5px; line-height: 1.45; }
.xsp-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 13px; background: var(--panel-3); font-size: 18px; }
.xsp-ic svg { width: 24px; height: 24px; }
.xsp-ic.is-discord { background: rgba(88,101,242,.18); color: #7983f5; }
.xsp-ic.is-twitch { background: rgba(145,70,255,.16); color: #a970ff; }
.xsp-ic.is-ig { background: rgba(0,149,246,.12); }
.xsp-ic.is-spotify { background: rgba(30,215,96,.14); color: #1ed760; }
.x-special ul { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); list-style: none; }
.x-special li { display: flex; gap: 10px; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.x-special li > i { flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--panel-3); color: var(--text); font-size: 8px; }
.x-special li b { color: var(--text); }
.x-special code { padding: 1px 6px; border-radius: 6px; background: var(--panel-3); color: var(--text); font-size: 12.5px; }
.xsp-perso { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.xsp-perso b em { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font: 700 10.5px var(--font); font-style: normal; vertical-align: 1px; }
.xsp-sw { position: relative; flex: none; order: 2; margin-left: auto; width: 46px; height: 28px; cursor: pointer; }
.xsp-sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.xsp-sw i { position: absolute; inset: 0; border-radius: 999px; background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--line-2); transition: background .25s; }
.xsp-sw i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .25s var(--ease); }
.xsp-sw input:checked + i { background: var(--ok); }
.xsp-sw input:checked + i::after { transform: translateX(18px); }
.xsp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.xsp-fields[hidden] { display: none; }
.xsp-fields label { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.xsp-fields span { display: flex; justify-content: space-between; color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.xsp-fields span small { color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.xsp-fields input { height: 46px; padding: 0 14px; border: 0; border-radius: 13px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font-size: 15px; outline: 0; }
.xsp-fields input:focus { box-shadow: inset 0 0 0 1px var(--line-3), var(--ring); }
.xsp-confirm { position: relative; display: flex; align-items: flex-start; gap: 12px; margin: 14px 0 0; padding: 14px; border-radius: 14px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: box-shadow .2s; }
.xsp-confirm input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.xsp-confirm i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--line-3); transition: background .2s; }
.xsp-confirm input:checked + i { background: var(--text); box-shadow: none; }
.xsp-confirm input:checked + i::after { content: "\f00c"; color: var(--bg); font: 900 10px "Font Awesome 5 Pro", "Font Awesome 5 Free"; }
.xsp-confirm input:focus-visible + i { box-shadow: inset 0 0 0 1.5px var(--line-3), var(--ring); }
.xsp-confirm.is-bad { box-shadow: inset 0 0 0 1.5px var(--bad); }
.xsp-err { margin: 8px 2px 0; color: var(--bad); font-size: 13px; font-weight: 600; }
.xsp-guide { border-radius: 20px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.xsp-guide summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; list-style: none; cursor: pointer; }
.xsp-guide summary::-webkit-details-marker { display: none; }
.xsp-guide summary > i { margin-left: auto; color: var(--text-3); font-size: 12px; transition: transform .25s var(--ease); }
.xsp-guide[open] summary > i { transform: rotate(180deg); }
.xsp-guide > :not(summary) { margin-left: 16px; margin-right: 16px; }
.xsp-guide > ul { margin-bottom: 16px; }
.xsp-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.xsp-tiers > div { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: var(--panel-2); }
.xsp-tiers small { color: var(--text-2); font-size: 12.5px; line-height: 1.45; }
.x-heart { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 650; }
.x-heart i { font-size: 9px; }
.x-heart.is-green { background: rgba(48,209,88,.14); color: #30d158; }
.x-heart.is-blue { background: rgba(10,132,255,.16); color: #64a8ff; }
.x-fixed-qty { display: none !important; }
@media (max-width: 640px) {
  .xdb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xdb-pk { padding: 16px 6px 14px; } .xdb-pk > b { font-size: 22px; } .xdb-pk img { width: 34px; height: 34px; }
  .xpk-grid.is-igv { grid-template-columns: 1fr; }
  .xpk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xsp-fields, .xsp-tiers { grid-template-columns: 1fr; }
  .x-special { padding: 16px 14px; }
}
.xsp-seg { width: fit-content; }
.xdb-ck { font-size: 0 !important; }
.xdb-ck::before { content: ""; width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }

/* ── Child panel hero: 4-chapter story (domain → brand → customers → profit) ── */
.xcm { position: relative; min-width: 0; }
.xcm-win { position: relative; transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); transition: transform .8s var(--ease); }
.xcm:hover .xcm-win { transform: none; }
.xcm-stage { position: relative; height: 330px; overflow: hidden; background: #0b0b0c; }
.xcm-sc { position: absolute; inset: 0; opacity: 0; transform: scale(.985); transition: opacity .6s ease, transform .8s var(--ease); pointer-events: none; }
.xcm-sc.is-on { opacity: 1; transform: none; }
.xcm-type { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; }
.xcm[data-at="0"] .xcm-type { max-width: 0; border-right: 1.5px solid #fff; animation: xcm-type 1.6s .3s steps(13) forwards, xcm-caret .8s step-end infinite; }
@keyframes xcm-type { to { max-width: 16ch; border-color: transparent; } }
@keyframes xcm-caret { 50% { border-color: transparent; } }
.xcm-load { display: none; width: 12px; height: 12px; margin-left: 8px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.2); border-top-color: #fff; }
.xcm[data-at="0"] .xcm-load { display: inline-block; animation: xcm-spin .8s linear infinite, xcm-hide 5s forwards; }
@keyframes xcm-spin { to { transform: rotate(360deg); } }
@keyframes xcm-hide { 0%, 70% { opacity: 1; } 75%, 100% { opacity: 0; } }
/* 1 */
.xcm-boot, .xcm-live { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.xcm-boot b, .xcm-live b { font: 650 16px var(--display); } .xcm-boot small, .xcm-live small { color: rgba(255,255,255,.5); font-size: 12.5px; }
.xcm-ring { width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(255,255,255,.12); border-top-color: #fff; animation: xcm-spin 1s linear infinite; }
.xcm-live { opacity: 0; }
.is-on .xcm-boot { animation: xcm-out .4s 2.8s forwards; }
.is-on .xcm-live { animation: xcm-in .6s 3.1s var(--ease) forwards; }
.xcm-live > span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #30d158; color: #fff; font-size: 26px; box-shadow: 0 0 0 10px rgba(48,209,88,.14), 0 0 60px rgba(48,209,88,.35); }
.xcm-live b { font-size: 20px; letter-spacing: -.02em; }
@keyframes xcm-out { to { opacity: 0; transform: scale(.94); } }
@keyframes xcm-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
/* shared app */
.xcm-app { display: grid; grid-template-columns: 130px 1fr; height: 100%; }
.xcm-app aside { padding: 14px 12px; border-right: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 8px; }
.xcm-app aside > i { display: block; height: 9px; border-radius: 5px; background: #1c1c1e; } .xcm-app aside > i.is-on { background: #2c2c2e; }
.xcm-logo { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #fff; color: #000; font: 800 12px var(--display); transition: background .5s, color .5s; }
.xcm[data-at="1"] .xcm-logo, .xcm[data-at="2"] .xcm-logo, .xcm[data-at="3"] .xcm-logo { animation: xcm-brand .01s 2.2s forwards; }
.xcm[data-at="2"] .xcm-logo, .xcm[data-at="3"] .xcm-logo { animation-delay: 0s; }
@keyframes xcm-brand { to { background: #7d5cff; color: #fff; } }
/* 2 */
.xcm-set { margin: 14px; padding: 14px; border-radius: 14px; background: #141416; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 10px; transform: translateX(30px); opacity: 0; }
.is-on .xcm-set { animation: xcm-in .6s .2s var(--ease) forwards; }
.xcm-set > b { font: 650 14px var(--display); }
.xcm-set label { display: flex; flex-direction: column; gap: 5px; margin: 0; color: rgba(255,255,255,.5); font-size: 11px; font-weight: 600; }
.xcm-field { display: flex; align-items: center; height: 32px; padding: 0 10px; border-radius: 9px; background: #0b0b0c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: #fff; font-size: 12.5px; }
.xcm-typename { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 0; font-style: normal; border-right: 1.5px solid #fff; }
.is-on .xcm-typename { animation: xcm-type 1.2s .9s steps(10) forwards, xcm-caret .8s step-end infinite; }
.xcm-sw { display: flex; gap: 6px; } .xcm-sw i { width: 20px; height: 20px; border-radius: 50%; }
.xcm-sw i:nth-child(1) { background: #fff; } .xcm-sw i:nth-child(2) { background: #0a84ff; } .xcm-sw i:nth-child(3) { background: #7d5cff; } .xcm-sw i:nth-child(4) { background: #ff375f; } .xcm-sw i:nth-child(5) { background: #30d158; }
.is-on .xcm-sw i:nth-child(3) { animation: xcm-pick .4s 2s forwards; }
@keyframes xcm-pick { to { box-shadow: 0 0 0 2px #0b0b0c, 0 0 0 4px #7d5cff; } }
.xcm-up { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 11.5px; } .xcm-up em { margin-left: auto; color: #30d158; font-style: normal; opacity: 0; }
.is-on .xcm-up em { animation: xcm-in .4s 2.6s forwards; }
/* 3 */
.xcm-app .xcp-b-main { padding: 16px; }
.is-on .xcm-pick { animation: xcm-sel .3s 1.3s forwards; }
@keyframes xcm-sel { to { box-shadow: inset 0 0 0 1.5px #fff; } }
.is-on .xcm-btn { animation: xcm-press .3s 2.3s; }
@keyframes xcm-press { 50% { transform: scale(.94); } }
.xcm-cur { position: absolute; z-index: 3; width: 20px; left: 80%; top: 25%; opacity: 0; }
.is-on .xcm-cur { animation: xcm-cur 4.4s .4s forwards; }
@keyframes xcm-cur { 0% { opacity: 0; } 8% { opacity: 1; left: 80%; top: 25%; } 25% { left: 62%; top: 44%; } 28% { transform: scale(.82); } 31% { transform: none; } 48% { left: 58%; top: 82%; } 51% { transform: scale(.82); } 54% { transform: none; } 100% { left: 58%; top: 82%; opacity: 1; } }
.xcm-toasts { position: absolute; right: 14px; top: 14px; display: flex; flex-direction: column; gap: 8px; }
.xcm-toast { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px; background: rgba(36,36,38,.92); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 18px 40px -16px #000; opacity: 0; transform: translateY(-10px); }
.xcm-toast > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #30d158; color: #fff; font-size: 12px; }
.xcm-toast.t2 > span { background: #111; }
.xcm-toast b { display: block; font-size: 12px; } .xcm-toast small { color: rgba(255,255,255,.55); font-size: 11px; } .xcm-toast em { color: #30d158; font-style: normal; font-weight: 700; }
.is-on .xcm-toast.t1 { animation: xcm-in .5s 2.7s var(--ease) forwards; }
.is-on .xcm-toast.t2 { animation: xcm-in .5s 4s var(--ease) forwards; }
/* 4 */
.xcm-dash { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: auto 1fr; gap: 10px; height: 100%; padding: 16px; }
.xcm-kpi { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; background: #141416; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); opacity: 0; }
.is-on .xcm-kpi { animation: xcm-in .5s var(--ease) forwards; } .is-on .xcm-kpi:nth-child(2) { animation-delay: .15s; } .is-on .xcm-kpi:nth-child(3) { animation-delay: .3s; }
.xcm-kpi small { color: rgba(255,255,255,.5); font-size: 11px; } .xcm-kpi b { font: 700 20px var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.xcm-kpi.is-big b { font-size: 26px; } .xcm-kpi em { color: #30d158; font-size: 11px; font-style: normal; font-weight: 600; }
.xcm-bars { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 8px; padding: 14px; border-radius: 14px; background: #141416; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.xcm-bars i { flex: 1; height: 4%; border-radius: 6px 6px 2px 2px; background: linear-gradient(#fff, #6e6e73); transition: height 1s var(--ease); }
.is-on .xcm-bars i { height: var(--h); }
.is-on .xcm-bars i:nth-child(n) { transition-delay: calc(.3s + var(--d, 0s)); }
.xcm-bars i:nth-child(2) { --d: .06s } .xcm-bars i:nth-child(3) { --d: .12s } .xcm-bars i:nth-child(4) { --d: .18s } .xcm-bars i:nth-child(5) { --d: .24s } .xcm-bars i:nth-child(6) { --d: .3s } .xcm-bars i:nth-child(7) { --d: .36s } .xcm-bars i:nth-child(8) { --d: .42s } .xcm-bars i:nth-child(9) { --d: .48s } .xcm-bars i:nth-child(10) { --d: .54s }
/* chapters */
.xcm-chap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.xcm-chap button { display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; background: none; color: var(--text-3); text-align: left; font: 600 12.5px var(--font); cursor: pointer; transition: color .3s; }
.xcm-chap button i { display: block; height: 3px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.xcm-chap button i::after { content: ""; display: block; height: 100%; width: 0; background: var(--text); }
.xcm-chap button.is-done i::after { width: 100%; }
.xcm-chap button.is-on { color: var(--text); }
.xcm-chap button.is-on i::after { animation: xcm-fill var(--dur, 6s) linear forwards; }
@keyframes xcm-fill { to { width: 100%; } }
@media (max-width: 980px) { .xcm-win { transform: none; } }
@media (max-width: 640px) { .xcm-stage { height: 290px; } .xcm-app { grid-template-columns: 1fr; } .xcm-app aside { display: none; } .xcm-dash { grid-template-columns: 1fr 1fr; } .xcm-kpi.is-big { grid-column: 1 / -1; } .xcm-chap span { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .xcm *, .xcm *::after { animation-duration: .01s !important; animation-delay: 0s !important; transition: none !important; } }

/* ── First-visit welcome sheet (replaces PerfectPanel's welcome ticket) ── */
.x-welcome { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 16px; }
.x-welcome[hidden] { display: none; }
.x-welcome-bg { position: absolute; inset: 0; border: 0; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); cursor: default; animation: x-wel-fade .35s var(--ease) both; }
.x-welcome-card { position: relative; width: min(460px, 100%); padding: 34px 28px 22px; border-radius: 30px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 100px -24px rgba(0,0,0,.8); text-align: center; animation: x-wel-in .5s var(--ease) both; }
.x-welcome-mark { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 18px; background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.x-welcome-mark svg { width: 40px; height: auto; color: #fff; }
.x-welcome-card h2 { margin: 0; font: 700 28px/1.12 var(--display); letter-spacing: -.035em; }
.x-welcome-card > p { margin: 8px 0 22px; color: var(--text-2); font-size: 15px; }
.x-welcome-steps { display: grid; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; text-align: left; }
.x-welcome-steps li { display: flex; align-items: center; gap: 14px; padding: 13px 14px; border-radius: 16px; background: var(--panel-2); opacity: 0; animation: x-wel-up .5s var(--ease) both; }
.x-welcome-steps li:nth-child(1) { animation-delay: .12s; } .x-welcome-steps li:nth-child(2) { animation-delay: .2s; } .x-welcome-steps li:nth-child(3) { animation-delay: .28s; }
.x-welcome-steps i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--text); color: var(--bg); font: 700 14px var(--display); font-style: normal; }
.x-welcome-steps b { display: block; font-size: 15px; font-weight: 600; }
.x-welcome-steps small { display: block; margin-top: 1px; color: var(--text-3); font-size: 13px; line-height: 1.4; }
.x-welcome-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.x-welcome-cta .x-btn { min-height: 48px; justify-content: center; }
.x-welcome-skip { margin-top: 12px; padding: 8px 12px; border: 0; background: none; color: var(--text-3); font-size: 14px; cursor: pointer; }
.x-welcome-skip:hover { color: var(--text); }
@keyframes x-wel-fade { from { opacity: 0; } }
@keyframes x-wel-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes x-wel-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
  .x-welcome { place-items: end center; padding: 0; }
  .x-welcome-card { width: 100%; border-radius: 28px 28px 0 0; padding: 30px 20px calc(18px + env(safe-area-inset-bottom)); }
  .x-welcome-cta { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .x-welcome-bg, .x-welcome-card, .x-welcome-steps li { animation: none; opacity: 1; } }
.x-welcome-cta .x-btn--primary { background: var(--text); color: var(--bg); border-color: transparent; }
.x-welcome-cta .x-btn--primary:hover { opacity: .88; }

/* Support desk (2026-10-28): a calm, centered thread instead of Messages bubbles.
   Mia replies as plain text under her name; the customer's messages sit in a quiet neutral card.
   Overrides the bubble, tail and blue accents in 62-support.css. */

/* Accents follow the black-and-white UI. */
.xc-back, .xc-back:hover, .xc-new, .xc-new:hover, .xc-closed a { color: var(--text); }
.xc-send { background: var(--text); color: var(--bg); }
.xc-closed i { color: var(--text-3); }
.xc-side-list .xs-conv.is-current { background: var(--panel-3); color: var(--text); }
.xc-side-list .xs-conv.is-current time, .xc-side-list .xs-conv.is-current small { color: var(--text-3); }
.xc-side-list .xs-conv.is-current .xs-st { background: var(--panel-2); color: var(--text-2); }
.xc-side-list .xs-conv.is-current .xs-ti { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }

/* Header: subject on the left, state on the right. */
.xc-head { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; padding: 14px 22px; }
.xc-who { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2px; align-items: start; justify-content: start; max-width: none; text-align: left; }
.xc-who .xc-av { display: none; }
.xc-who b { grid-column: 1; font-size: 16px; font-weight: 650; letter-spacing: -.02em; }
.xc-who small { grid-column: 1; gap: 0; font-size: 12.5px; }
.xc-who small i { display: none; }
.xc-state { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--panel-3); color: var(--text-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.xc-state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.xc-state.is-open { background: var(--ok-soft); color: var(--ok); }

/* Thread: one readable column. */
.xc-thread { align-items: stretch; gap: 0; padding: 26px 22px 18px; }
.xc-msg, .xc-day { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; }
.xc-day { display: flex; align-items: center; gap: 12px; margin-top: 8px; margin-bottom: 22px; }
.xc-day::before, .xc-day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.xc-msg, .xc-msg:not(.is-grouped), .xc-msg.is-grouped + .xc-msg { max-width: 720px; margin-top: 0; margin-bottom: 24px; }
.xc-msg.is-grouped { margin-bottom: 8px; }
.xc-bub::before, .xc-bub::after, .xc-msg:not(.is-grouped) .xc-bub::before, .xc-msg:not(.is-grouped) .xc-bub::after { display: none !important; }

/* Mia: avatar, name line, then plain text. */
.xc-msg.is-them { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; align-self: auto; }
.xc-msg.is-them .xc-av.is-sm, .xc-msg.is-them.is-grouped .xc-av { visibility: visible; align-self: start; width: 34px; height: 34px; flex: none; margin: 0; }
.xc-msg.is-them.is-cont .xc-av { visibility: hidden; height: 0; }
.xc-msg.is-them .xc-meta, .xc-msg.is-them.is-grouped .xc-meta { display: flex; order: -1; align-items: baseline; flex-wrap: wrap; gap: 0 8px; margin: 6px 0 3px; padding: 0; font-size: 12.5px; }
.xc-msg.is-them.is-cont .xc-meta { display: none; }
.xc-meta b { color: var(--text); font-size: 14px; font-weight: 650; }
.xc-role { color: var(--text-3); }
.xc-msg.is-me .xc-role { display: none; }
.xc-msg.is-them .xc-bub, .xc-msg.is-them.is-grouped .xc-bub { padding: 0; border-radius: 0; background: none; color: var(--text); font-size: 15px; line-height: 1.6; }
.xc-msg.is-them .xc-text a { text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.xc-msg.is-them .xc-bub.xc-file { padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }

/* Customer: a quiet card on the right. */
.xc-msg.is-me { display: flex; justify-content: flex-end; align-self: auto; }
.xc-msg.is-me .xc-col { max-width: min(75%, 520px); }
.xc-msg.is-me .xc-bub, .xc-msg.is-me .xc-bub.xc-file { padding: 10px 15px; border-radius: 18px; background: var(--panel-3); color: var(--text); font-size: 15px; line-height: 1.5; }
.xc-msg.is-me .xc-bub.xc-file { padding: 10px 14px 10px 10px; }
.xc-msg.is-me .xc-file-ic { background: var(--panel-2); }
.xc-msg.is-me .xc-meta { margin-top: 5px; padding: 0 4px 0 0; font-size: 12px; }

/* Composer: centered with the thread. */
.xc-compose { padding: 12px 22px 14px; }
.xc-bar, .xc-hint { max-width: 720px; margin-left: auto; margin-right: auto; }
.xc-field textarea.form-control { border-radius: 22px; background: var(--panel-2); }
.xc-hint { margin-top: 8px; font-size: 12px; }

@media (max-width: 700px) {
  .xc-head { grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 6px; padding-right: 14px; }
  .xc-who { display: grid; justify-content: start; text-align: left; }
  .xc-who b { font-size: 15.5px; }
  .xc-thread { padding-left: 16px; padding-right: 16px; }
  /* On phones Mia's text uses the full width, with the avatar beside her name. */
  .xc-msg.is-them { grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; align-items: center; }
  .xc-msg.is-them .xc-av.is-sm, .xc-msg.is-them.is-grouped .xc-av { width: 26px; height: 26px; align-self: center; }
  .xc-msg.is-them .xc-col { display: contents; }
  .xc-msg.is-them .xc-av.is-sm { grid-column: 1; grid-row: 1; }
  .xc-msg.is-them .xc-meta, .xc-msg.is-them.is-grouped .xc-meta { grid-column: 2; grid-row: 1; margin: 0; }
  .xc-msg.is-them .xc-files, .xc-msg.is-them .xc-bub { grid-column: 1 / -1; margin-top: 6px; }
  .xc-msg.is-them.is-cont .xc-av { display: none; }
  .xc-msg.is-me .xc-col { max-width: 85%; }
  .xc-hint { display: none; }
}

/* Order cards in the thread. */
.xc-ocard { display: block; width: 100%; max-width: 440px; margin: 10px 0 2px; padding: 13px 15px 12px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-decoration: none; transition: box-shadow .2s var(--ease); }
.xc-ocard:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.xc-msg.is-me .xc-ocard { margin: 6px 0 0; }
.xc-ocard-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.xc-ocard-h b { font-size: 14px; font-weight: 650; }
.xc-ocard-st { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--info-soft); color: var(--info); }
.xc-ocard-st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.xc-ocard.is-ok .xc-ocard-st { background: var(--ok-soft); color: var(--ok); }
.xc-ocard.is-warn .xc-ocard-st { background: var(--warn-soft); color: var(--warn); }
.xc-ocard.is-bad .xc-ocard-st { background: var(--bad-soft); color: var(--bad); }
.xc-ocard-s { display: block; margin-top: 3px; overflow: hidden; color: var(--text-2); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.xc-ocard-bar { display: block; height: 5px; margin: 11px 0 8px; overflow: hidden; border-radius: 99px; background: var(--panel-3); }
.xc-ocard-bar i { display: block; height: 100%; border-radius: inherit; background: var(--text); }
.xc-ocard-f { display: flex; justify-content: space-between; gap: 10px; color: var(--text-2); font-size: 12.5px; }
.xc-ocard-f b { color: var(--text); font-weight: 600; }
@media (max-width: 700px) { .xc-msg.is-them .xc-ocard { grid-column: 1 / -1; max-width: none; } }

/* Support home: same black-and-white language as the conversation. */
.xs-newconv .xs-ti { color: var(--text); }
.xs-newconv.is-current, .xs-newconv.is-current:hover { background: var(--text); color: var(--bg); }
.xs-newconv.is-current .xs-ti { background: color-mix(in srgb, var(--bg) 10%, transparent); color: var(--bg); box-shadow: none; }
.xs-newconv.is-current small { color: color-mix(in srgb, var(--bg) 62%, transparent); }
.xs-conv.is-new time { color: var(--text); }
.xs-conv.is-new .xs-dot { background: var(--text); }
.xs-none a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.xs-bubbles i:nth-child(2) { background: var(--text-3); }
.xs-send { background: var(--text); color: var(--bg); box-shadow: none; }
.xs-send i { background: color-mix(in srgb, var(--bg) 12%, transparent); }
.xs[data-xs-view="new"]:not([data-xs-noconv]) .xs-back { color: var(--text); }

/* Mia is typing. */
.xc-typing { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 720px; margin: -8px auto 12px; }
.xc-typing img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; }
.xc-typing-dots { display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--panel-3); }
.xc-typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); animation: xc-typing 1.2s infinite ease-in-out; }
.xc-typing-dots i:nth-child(2) { animation-delay: .15s; }
.xc-typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes xc-typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .xc-typing-dots i { animation: none; opacity: .6; } }

/* Composer above the iPhone keyboard (the offset is 0 with the keyboard closed). */
@media (max-width: 700px) {
  .xc-compose { transform: translateY(calc(-1 * var(--xc-kb, 0px))); transition: transform .12s ease-out; will-change: transform; }
  .xc.is-kb .xc-compose { bottom: 8px; }
  .xc.is-kb .xc-thread { padding-bottom: calc(14px + var(--xc-kb, 0px)); }
}

/* Values the page script fills in stay invisible until they're final, then fade in, so a refresh never shows one
   number or sentence and then swaps it for another. x-pending is set in the head and cleared after init. */
[data-xd-hello], [data-xd-date], [data-xd-topup], [data-xd-sub], [data-xd-k] b, [data-xd-k] em, [data-xd-l],
[data-xo-done], [data-xo-of], [data-xf-fine], [data-xf-inv-btn] span, .xf-hist-h span, [data-xs-time], .xc-meta time, [data-xr-amt], [data-xa-dev], .xapi-params dt, [data-xm-go-label] { transition: opacity .2s ease; }
html.x-pending :is([data-xd-hello], [data-xd-date], [data-xo-done], [data-xo-of], [data-xf-fine], [data-xf-inv-btn] span, .xf-hist-h span, [data-xs-time], .xc-meta time, [data-xr-amt], [data-xa-dev], .xapi-params dt, [data-xm-go-label]) { opacity: 0; }
[data-x-dash]:not(.is-loaded) :is([data-xd-topup], [data-xd-sub], [data-xd-k] b, [data-xd-k] em, [data-xd-l]) { opacity: 0; }

/* ── About (Oct 28): cinematic, black-and-white, motion on scroll ───────────────────────
   Everything is scoped to .xab. Motion is opt-in through .xab-js (set by the page script);
   .xab-calm (reduced motion) and no-JS both show final states. */
.xab { --xab-max: 1180px; --xab-r: 28px; --xab-e: cubic-bezier(.16, 1, .3, 1); position: relative; overflow-x: clip; color: var(--text); }
.is-guest .x-gmain:has(> .xab) { padding: 0 0 40px; }
.is-app .x-main:has(> .xab) { padding-top: 8px; }
.xab section { position: relative; width: min(var(--xab-max), 100% - 48px); margin: 0 auto; }
.xab-kicker, .xab-eyebrow { margin: 0 0 14px; color: var(--text-3); font: 600 13px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.xab-h2 { margin: 0; max-width: 16ch; font: 680 clamp(34px, 5vw, 64px)/1.02 var(--display); letter-spacing: -.045em; }
.xab-sec-head { margin-bottom: 44px; }
.xab .x-btn i { margin-left: 6px; transition: transform .3s var(--xab-e); }
.xab .x-btn:hover i { transform: translateX(3px); }

/* Hero */
.xab-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 40px; min-height: min(92vh, 860px); padding: 90px 0 60px; }
.xab-hero-glow { position: absolute; inset: -20% -30% auto 30%; height: 120%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--text) 9%, transparent), transparent 70%); filter: blur(10px); }
.xab-h1 { margin: 0; font: 720 clamp(48px, 8.2vw, 112px)/.95 var(--display); letter-spacing: -.055em; }
.xab-w { display: inline-block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; vertical-align: top; }
.xab-w > span { display: inline-block; }
.xab-shine { background: linear-gradient(100deg, var(--text) 30%, var(--text-3) 50%, var(--text) 70%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.xab-hero-grid { position: absolute; inset: -10% -50vw 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 72px 72px;
  -webkit-mask: radial-gradient(60% 55% at 70% 45%, #000, transparent); mask: radial-gradient(60% 55% at 70% 45%, #000, transparent); }
.xab-hero { perspective: 1600px; }
.xab-stage { transform-style: preserve-3d; will-change: transform; }
.xab-depth { position: absolute; inset: 0; display: grid; place-items: center; transform: translateZ(var(--z)); transform-style: preserve-3d; pointer-events: none; }
.xab-depth > * { pointer-events: auto; }
.xab-lede { max-width: 33em; margin: 28px 0 0; color: var(--text-2); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; }
.xab-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* Hero phone: an account growing as an order lands */
.xab-stage { position: relative; justify-self: center; width: min(100%, 520px); height: 640px; display: grid; place-items: center; }
.xab-phone { position: relative; width: 300px; height: 620px; padding: 12px; border-radius: 52px; background: #0b0b0c;
  box-shadow: inset 0 0 0 1.5px #2c2c2e, inset 0 0 0 5px #000, 0 0 0 1px rgba(255,255,255,.06), 0 60px 120px -40px rgba(0,0,0,.85), 0 0 140px -30px color-mix(in srgb, var(--text) 16%, transparent); }
.xab-notch { position: absolute; z-index: 2; left: 50%; top: 22px; width: 92px; height: 26px; margin-left: -46px; border-radius: 20px; background: #000; }
.xab-scrn { position: relative; height: 100%; overflow: hidden; border-radius: 41px; background: #000; color: #fff; padding: 16px 16px 0; }
html[data-theme="light"] .xab-scrn { background: #fff; color: #1d1d1f; }
.xab-sb { display: flex; justify-content: space-between; align-items: center; padding: 0 12px 18px; font-size: 13px; }
.xab-sb span { display: flex; gap: 5px; font-size: 11px; }
.xab-prof { display: flex; align-items: center; gap: 16px; }
.xab-av { flex: none; width: 74px; height: 74px; padding: 3px; border-radius: 50%; background: conic-gradient(from 200deg, #fff, #8e8e93, #fff); }
.xab-av span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #1c1c1e; border: 3px solid #000; color: #fff; font: 700 28px/1 var(--display); }
html[data-theme="light"] .xab-av { background: conic-gradient(from 200deg, #1d1d1f, #c7c7cc, #1d1d1f); }
html[data-theme="light"] .xab-av span { border-color: #fff; background: #f2f2f7; color: #1d1d1f; }
.xab-pstats { flex: 1; display: flex; justify-content: space-between; text-align: center; }
.xab-pstats b { display: block; font: 700 16px/1.1 var(--font); font-variant-numeric: tabular-nums; }
.xab-pstats small { font-size: 11.5px; opacity: .6; }
.xab-pname { display: grid; gap: 2px; margin: 12px 2px 10px; font-size: 13px; }
.xab-pname span { opacity: .6; }
.xab-pbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.xab-pbtns span { display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; border-radius: 9px; background: rgba(127,127,127,.18); font-size: 12.5px; font-weight: 600; }
.xab-pbtns i { font-size: 9px; }
.xab-chart { margin: 12px 0; padding: 12px 12px 6px; border-radius: 16px; background: rgba(127,127,127,.12); }
.xab-chart-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; }
.xab-chart-h span { opacity: .6; }
.xab-chart-h b { color: var(--ok); font-size: 14px; font-variant-numeric: tabular-nums; }
.xab-chart svg { display: block; width: 100%; height: 74px; margin-top: 6px; }
.xab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0 -16px; }
.xab-grid i { position: relative; aspect-ratio: 1; background: linear-gradient(135deg, #2c2c2e, #161617); }
.xab-grid i:nth-child(3n+2) { background: linear-gradient(135deg, #3a3a3c, #1c1c1e); }
.xab-grid i:nth-child(4) { background: linear-gradient(160deg, #48484a, #1c1c1e); }
html[data-theme="light"] .xab-grid i { background: linear-gradient(135deg, #e5e5ea, #d1d1d6); }
.xab-reel em { position: absolute; right: 8px; top: 8px; color: #fff; font-size: 11px; }
.xab-reel small { position: absolute; left: 8px; bottom: 6px; color: #fff; font: 700 11.5px/1 var(--font); font-variant-numeric: tabular-nums; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.xab-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px;
  background: color-mix(in srgb, var(--panel) 82%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 60px -20px rgba(0,0,0,.7); font-size: 13.5px; }
.xab-float b { display: block; font-size: 14px; }
.xab-float small { display: block; margin-top: 2px; color: var(--text-2); font-size: 12.5px; }
.xab-float--order { left: -10%; top: 1%; width: 240px; display: block; }
.xab-fh { display: flex; align-items: center; gap: 8px; }
.xab-fh i { font-size: 17px; }
.xab-float--order .xab-bar { height: 6px; margin: 12px 0 9px; }
.xab-ff { display: flex; justify-content: space-between; color: var(--text-2); font-size: 12px; }
.xab-ff em { color: var(--ok); font-style: normal; font-weight: 600; }
.xab-float--note { right: -8%; top: 48%; width: 250px; }
.xab-float--shield { left: 0; bottom: 9%; }
.xab-nic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--text); color: var(--bg); font-size: 15px; }
.xab-float--shield .xab-nic { background: var(--ok-soft); color: var(--ok); }

/* Stats */
.xab-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 34px 0; border-block: 1px solid var(--line); }
.xab-stat { padding: 8px 26px; }
.xab-stat + .xab-stat { box-shadow: -1px 0 0 var(--line); }
.xab-stat b { display: block; font: 720 clamp(36px, 4.4vw, 58px)/1 var(--display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.xab-stat span { display: block; margin-top: 10px; color: var(--text-2); font-size: 15px; }

/* Manifesto */
.xab-manifesto { padding: 150px 0 110px; }
.xab-lit { max-width: 24em; margin: 0; font: 650 clamp(28px, 3.9vw, 52px)/1.16 var(--display); letter-spacing: -.035em; }
.xab-js .xab-lit span { color: var(--text-3); opacity: .35; transition: opacity .4s ease, color .4s ease; }
.xab-js .xab-lit span.on { color: var(--text); opacity: 1; }

/* How it works */
.xab-how { padding: 60px 0 40px; }
.xab-how-head { margin-bottom: 30px; }
.xab-how-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; align-items: start; }
.xab-dev-wrap { position: sticky; top: calc(50vh - 220px); }
.xab-dev { position: relative; height: 440px; border-radius: var(--xab-r); background: var(--panel); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line-2), 0 50px 100px -40px rgba(0,0,0,.7); }
.xab-dev-bar { display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 18px; box-shadow: inset 0 -1px 0 var(--line); }
.xab-dev-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--panel-3); }
.xab-dev-bar span { margin: 0 auto; padding: 4px 14px; border-radius: 99px; background: var(--panel-2); color: var(--text-3); font-size: 12px; }
.xab-scr { position: absolute; inset: 46px 0 0; display: flex; flex-direction: column; gap: 12px; padding: 28px; opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .5s var(--xab-e), transform .7s var(--xab-e); pointer-events: none; }
.xab-scr.is-on { opacity: 1; transform: none; }
.xab-field { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 18px; border-radius: 16px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 16px; }
.xab-field > i { color: var(--text-3); }
.xab-lab { margin: 6px 0 -4px 4px; color: var(--text-3); font-size: 12.5px; font-weight: 600; }
.xab-type { display: inline-block; overflow: hidden; white-space: nowrap; border-right: 2px solid var(--text); padding-right: 2px; }
.xab-res { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--panel-2); }
.xab-res > i { font-size: 20px; }
.xab-res > span { flex: 1; display: grid; gap: 7px; }
.xab-res b { font-size: 14.5px; font-weight: 600; }
.xab-res em { display: block; width: 46%; height: 6px; border-radius: 9px; background: var(--panel-3); }
.xab-res small { color: var(--text-3); }
.xab-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 9px 14px; border-radius: 99px; background: var(--ok-soft); color: var(--ok); font-size: 13.5px; font-weight: 600; }
.xab-order { margin-top: 40px; padding: 22px; border-radius: 20px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.xab-order-h { display: flex; align-items: center; gap: 10px; }
.xab-order-h i { font-size: 20px; }
.xab-order-h b { flex: 1; font-size: 15px; }
.xab-pill { padding: 5px 11px; border-radius: 99px; background: var(--info-soft); color: var(--info); font-size: 12px; font-weight: 600; }
.xab-bar { height: 8px; margin: 22px 0 14px; border-radius: 9px; background: var(--panel-3); overflow: hidden; }
.xab-bar i { display: block; height: 100%; border-radius: inherit; background: var(--text); }
.xab-order-f { display: flex; justify-content: space-between; gap: 10px; color: var(--text-2); font-size: 13.5px; }
.xab-order-f b { color: var(--text); font-variant-numeric: tabular-nums; }
.xab-done { color: var(--ok); font-weight: 600; }
.xab-guard { display: grid; gap: 12px; margin-top: 10px; }
.xab-guard-row { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: var(--panel-2); }
.xab-guard-row > span:last-child { display: grid; gap: 3px; }
.xab-guard-row b { font-size: 15px; }
.xab-guard-row small { color: var(--text-2); font-size: 13px; }
.xab-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--panel-3); color: var(--text); font-size: 16px; }
.xab-steps { margin: 0; padding: 0; list-style: none; }
.xab-step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding: 20px 0; }
.xab-step:first-child { min-height: 50vh; justify-content: flex-start; padding-top: 60px; }
.xab-num { color: var(--text-3); font: 600 14px/1 var(--font); letter-spacing: .1em; }
.xab-step h3 { margin: 14px 0 12px; font: 680 clamp(28px, 3vw, 40px)/1.05 var(--display); letter-spacing: -.035em; }
.xab-step p { max-width: 26em; margin: 0; color: var(--text-2); font-size: 18px; line-height: 1.55; }
.xab-js .xab-step { opacity: .28; transition: opacity .5s ease; }
.xab-js .xab-step.is-on { opacity: 1; }

/* Principles */
.xab-principles { padding: 120px 0 40px; }
.xab-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.xab-card { position: relative; grid-column: span 1; display: flex; flex-direction: column; gap: 10px; min-height: 230px; padding: 28px; border-radius: var(--xab-r); background: var(--panel); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s ease, transform .5s var(--xab-e); }
.xab-card--wide { grid-column: span 2; }
.xab-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--text) 9%, transparent), transparent 60%); }
.xab-card:hover::before { opacity: 1; }
.xab-card:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.xab-card .xab-ic { margin-bottom: auto; }
.xab-card h3 { margin: 26px 0 0; font: 660 22px/1.15 var(--display); letter-spacing: -.025em; }
.xab-card p { margin: 0; color: var(--text-2); font-size: 15.5px; line-height: 1.5; }

/* Who: a pinned track that scrolls sideways (desktop), swipeable cards (phones) */
.xab-who { padding: 120px 0 0; }
.xab-who-pin { position: relative; }
.xab-who-track { display: flex; gap: 18px; will-change: transform; }
.xab-who-card { flex: none; display: flex; flex-direction: column; width: min(420px, 78vw); min-height: 460px; padding: 26px; border-radius: 32px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
.xab-who-vis { position: relative; display: grid; place-items: center; height: 200px; margin-bottom: 30px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--text) 10%, transparent), transparent 70%), var(--panel-2); }
.xab-who-big { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 26px; background: var(--text); color: var(--bg); font-size: 30px; box-shadow: 0 20px 50px -14px color-mix(in srgb, var(--text) 40%, transparent); }
.xab-who-tag { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 99px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; font-weight: 600; }
.xab-who-tag i { color: var(--ok); font-size: 11px; }
.xab-who-vis code { padding: 18px 22px; border-radius: 16px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); font: 500 13.5px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.xab-who-vis code b { color: var(--ok); }
.xab-who-n { display: block; font: 700 clamp(30px, 3vw, 40px)/1 var(--display); letter-spacing: -.04em; }
.xab-who-card p { margin: 14px 0 0; color: var(--text-2); font-size: 16px; line-height: 1.55; }
.xab-who-end { justify-content: flex-end; background: var(--text); color: var(--bg); text-decoration: none; transition: transform .5s var(--xab-e); }
.xab-who-end:hover { color: var(--bg); transform: translateY(-6px); }
.xab-who-end p { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.xab-who-n + p { flex: 0 0 auto; }
.xab-who-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 30px; font-weight: 650; }
@media (min-width: 901px) {
  .xab-js:not(.xab-calm) .xab-who { height: 300vh; padding-top: 60px; }
  .xab-js:not(.xab-calm) .xab-who-pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; }
  .xab-js:not(.xab-calm) .xab-who .xab-sec-head { margin-bottom: 36px; }
}
@media (max-width: 900px) {
  .xab-who-track { overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 10px; scrollbar-width: none; }
  .xab-who-track::-webkit-scrollbar { display: none; }
  .xab-who-card { scroll-snap-align: center; min-height: 420px; }
}

/* Pinned story: a profile gaining momentum as you scroll */
.xab-story { height: 420vh; }
.xab-story-pin { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 60px; }
.xab-story-steps { position: relative; height: 300px; }
.xab-ss { position: absolute; inset: 0; opacity: 0; transform: translateY(30px); filter: blur(6px); transition: opacity .7s var(--xab-e), transform .9s var(--xab-e), filter .7s; }
.xab-ss.is-on { opacity: 1; transform: none; filter: none; }
.xab-ss > b { display: inline-block; padding: 7px 13px; border-radius: 99px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; letter-spacing: .02em; }
.xab-ss h3 { margin: 22px 0 16px; font: 720 clamp(40px, 5vw, 72px)/1 var(--display); letter-spacing: -.05em; }
.xab-ss p { max-width: 26em; margin: 0; color: var(--text-2); font-size: 19px; line-height: 1.55; }
.xab-story-note { display: block; margin-top: 18px; color: var(--text-3); font-size: 12.5px; }
.xab-story-vis { position: relative; display: grid; place-items: center; height: 560px; }
.xab-mini { width: 330px; padding: 22px; border-radius: 34px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2), 0 50px 100px -40px rgba(0,0,0,.8);
  transform: rotate(calc(-3deg + var(--p, 1) * 6deg)) translateY(calc(20px - var(--p, 1) * 40px)); }
.xab-mini-top { display: flex; align-items: center; gap: 14px; }
.xab-mini-av { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--panel-3); box-shadow: 0 0 0 3px var(--panel), 0 0 0 5px var(--line-3); font: 700 22px/1 var(--display); }
.xab-mini-top b { display: block; font-size: 16px; }
.xab-mini-top small { color: var(--text-2); font-size: 14px; }
.xab-mini-top small b { display: inline; color: var(--text); font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.xab-mini svg { display: block; width: 100%; height: 120px; margin: 20px 0 16px; color: var(--ok); }
.xab-story-line { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 1) * 1.15); }
.xab-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.xab-mini-grid i { aspect-ratio: 1; border-radius: 8px; background: radial-gradient(120% 90% at var(--gx, 30%) var(--gy, 25%), color-mix(in srgb, var(--text) var(--ga, 22%), transparent), transparent 62%), linear-gradient(var(--gr, 135deg), var(--panel-3), var(--panel-2)); }
.xab-mini-grid i:nth-child(2) { --gx: 70%; --gy: 60%; --ga: 14%; --gr: 200deg; } .xab-mini-grid i:nth-child(3) { --gx: 50%; --gy: 80%; --ga: 30%; }
.xab-mini-grid i:nth-child(4) { --gx: 20%; --gy: 70%; --ga: 12%; --gr: 45deg; } .xab-mini-grid i:nth-child(5) { --gx: 60%; --gy: 20%; --ga: 26%; } .xab-mini-grid i:nth-child(6) { --gx: 80%; --gy: 85%; --ga: 18%; --gr: 290deg; }
.xab-pop { position: absolute; display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; font-size: 14px; font-weight: 600; white-space: nowrap;
  background: color-mix(in srgb, var(--panel-2) 85%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 50px -20px rgba(0,0,0,.7);
  opacity: 0; transform: translateY(20px) scale(.9); transition: opacity .6s var(--xab-e), transform .8s var(--xab-e); }
.xab-pop i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--text); color: var(--bg); font-size: 12px; }
.xab-pop--1 { left: -2%; top: 0; } .xab-pop--2 { right: -2%; top: 34%; } .xab-pop--3 { left: 4%; bottom: 24%; } .xab-pop--4 { right: 2%; bottom: 8%; }
.xab-story[data-step="1"] .xab-pop--1, .xab-story[data-step="2"] .xab-pop--1, .xab-story[data-step="3"] .xab-pop--1,
.xab-story[data-step="2"] .xab-pop--2, .xab-story[data-step="3"] .xab-pop--2, .xab-story[data-step="2"] .xab-pop--3, .xab-story[data-step="3"] .xab-pop--3,
.xab-story[data-step="3"] .xab-pop--4 { opacity: 1; transform: none; }
.xab:not(.xab-js) .xab-story, .xab-calm .xab-story { height: auto; }
.xab:not(.xab-js) .xab-story-pin, .xab-calm .xab-story-pin { position: static; height: auto; padding: 80px 0; }
.xab:not(.xab-js) .xab-ss, .xab-calm .xab-ss { position: static; opacity: 1; transform: none; filter: none; margin-bottom: 30px; }
.xab:not(.xab-js) .xab-story-steps, .xab-calm .xab-story-steps { height: auto; }
.xab:not(.xab-js) .xab-pop, .xab-calm .xab-pop { opacity: 1; transform: none; }

/* Inverted panel that opens out of the page */
.xab .xab-inv { width: 100%; padding: 130px max(24px, calc((100% - var(--xab-max)) / 2)) 120px; margin-top: 120px; background: #fff; color: #000;
  --text: #000; --text-2: #48484a; --text-3: #8e8e93; --line: rgba(0,0,0,.1); --line-2: rgba(0,0,0,.16); --line-3: rgba(0,0,0,.3); --panel: #f5f5f7; --panel-2: #ececf0;
  clip-path: inset(calc((1 - var(--q, 1)) * 18%) calc((1 - var(--q, 1)) * 10%) round calc(80px - var(--q, 1) * 48px)); }
html[data-theme="light"] .xab .xab-inv { background: #000; color: #fff; --text: #fff; --text-2: #c7c7cc; --text-3: #8e8e93; --line: rgba(255,255,255,.12); --line-2: rgba(255,255,255,.18); --line-3: rgba(255,255,255,.3); --panel: #111; --panel-2: #1c1c1e; }
.xab-inv .xab-h2 { color: var(--text); }

/* Scroll-scrubbed counter */
.xab-zoom { height: 240vh; }
.xab-zoom-in { position: sticky; top: 0; height: 100vh; display: grid; place-content: center; justify-items: center; text-align: center; overflow: hidden; }
.xab-zoom-n { display: flex; align-items: flex-start; font: 760 clamp(70px, 15vw, 230px)/.9 var(--display); letter-spacing: -.06em; font-variant-numeric: tabular-nums;
  transform: scale(calc(.7 + var(--p, 1) * .3)); }
.xab-zoom-n span { color: var(--text-3); }
.xab-zoom-l { margin: 26px 0 0; color: var(--text-2); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; opacity: calc(var(--p, 1) * 3 + .35); }
.xab-zoom-icons { position: absolute; inset: 0; pointer-events: none; }
.xab-zoom-icons > span { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px; border-radius: 20px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 26px;
  transform: translate(calc(var(--x) * var(--p, 1) * 30vw), calc(var(--y) * var(--p, 1) * 32vh)) scale(calc(.4 + var(--p, 1) * .6)); opacity: calc(var(--p, 1) * 2); }

/* Platforms */
.xab-platforms { padding: 120px 0 30px; text-align: center; }
.xab .xab-platforms { width: 100%; }
.xab-marquee { display: grid; gap: 14px; margin-top: 18px; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.xab-track { display: flex; width: max-content; gap: 14px; }
.xab-track span { display: inline-flex; align-items: center; gap: 12px; height: 62px; padding: 0 26px 0 20px; border-radius: 99px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); font: 600 17px/1 var(--font); white-space: nowrap; }
.xab-track span i { font-size: 22px; }

/* Straight talk */

.xab-straight-list { border-top: 1px solid var(--line); }
.xab-line { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 30px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.xab-line b { font: 650 clamp(20px, 2vw, 26px)/1.2 var(--display); letter-spacing: -.025em; }
.xab-line span { color: var(--text-2); font-size: 16.5px; line-height: 1.6; }
.xab-line a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-3); }

/* Final */
.xab-final { padding: 170px 0 140px; text-align: center; }
.xab-final-glow { position: absolute; left: 50%; top: 50%; width: min(900px, 120vw); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--text) 8%, transparent), transparent 70%); }
.xab-final-h { margin: 0 auto; max-width: 12ch; font: 740 clamp(48px, 8vw, 110px)/.95 var(--display); letter-spacing: -.055em; }
.xab-final p { margin: 22px 0 0; color: var(--text-2); font-size: 19px; }
.xab-final .xab-cta { justify-content: center; }

/* ── Motion (only with JS, never with reduced motion) ── */
.xab-js:not(.xab-calm) [data-xab-split] .xab-w > span { transform: translateY(110%) rotate(4deg); transform-origin: 0 100%; transition: transform 1.1s var(--xab-e); transition-delay: calc(var(--i, 0) * 55ms); }
.xab-js:not(.xab-calm) [data-xab-split].is-in .xab-w > span { transform: none; }
.xab-js:not(.xab-calm) .xab-hero-grid { animation: xab-grid 30s linear infinite; }
@keyframes xab-grid { to { background-position: 72px 72px; } }
.xab-js:not(.xab-calm) .xab-final.is-lit .xab-final-h .xab-w > span { background: radial-gradient(360px circle at var(--fx) var(--fy), var(--text), var(--text-3) 70%); background-attachment: fixed; -webkit-background-clip: text; background-clip: text; color: transparent; }
.xab-js .x-btn { transition: translate .35s var(--xab-e), transform .2s, background .2s; }
.xab-js:not(.xab-calm) .xab-in { opacity: 0; transform: translateY(16px); animation: xab-up .9s var(--xab-e) forwards; animation-delay: calc(var(--d, 0) * 90ms + 120ms); }
.xab-js:not(.xab-calm) .xab-w > span { transform: translateY(105%); animation: xab-rise 1s var(--xab-e) forwards; animation-delay: calc(var(--d, 0) * 80ms + 60ms); }
.xab-js:not(.xab-calm) .xab-w > span.xab-shine { animation: xab-rise 1s var(--xab-e) forwards, xab-shine 3.2s ease-in-out 1.4s 1 both; animation-delay: calc(var(--d, 0) * 80ms + 60ms), 1.4s; }
.xab-js:not(.xab-calm) .xab-paused, .xab-js:not(.xab-calm) .xab-paused * { animation-play-state: paused !important; }
.xab-js:not(.xab-calm) .xab-phone { animation: xab-phone-in 1.3s var(--xab-e) .25s both, xab-float 7s ease-in-out 1.6s infinite; }
.xab-js:not(.xab-calm) .xab-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: xab-draw 2.4s cubic-bezier(.4, 0, .2, 1) 1.3s forwards; }
.xab-js:not(.xab-calm) .xab-area { opacity: 0; animation: xab-fade-in 1.2s ease 2.4s forwards; }
.xab-js:not(.xab-calm) .xab-float { opacity: 0; animation: xab-card-in .9s var(--xab-e) both, xab-float 6s ease-in-out infinite; }
.xab-js:not(.xab-calm) .xab-float--order { animation-delay: 1s, 1.9s; }
.xab-js:not(.xab-calm) .xab-float--note { animation-delay: 2.6s, 3.5s; animation-duration: .9s, 7s; }
.xab-js:not(.xab-calm) .xab-float--shield { animation-delay: 3.4s, 4.3s; animation-duration: .9s, 6.5s; }
.xab-js:not(.xab-calm) .xab-float--order .xab-bar i { animation: xab-fill 2.4s cubic-bezier(.4, 0, .2, 1) 1.3s both; }
.xab-js:not(.xab-calm) .xab-float--order em { animation: xab-pop .6s var(--xab-e) 3.6s both; }
.xab-js:not(.xab-calm) .xab-rv { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--xab-e), transform 1.1s var(--xab-e); transition-delay: calc(var(--d, 0) * 90ms); }
.xab-js:not(.xab-calm) .xab-rv.is-in { opacity: 1; transform: none; }
.xab-js:not(.xab-calm) .xab-card.xab-rv.is-in:hover { transform: translateY(-4px); transition-delay: 0s; }
.xab-js:not(.xab-calm) .xab-track { animation: xab-marquee 46s linear infinite; }
.xab-js:not(.xab-calm) .xab-track--rev { animation-direction: reverse; animation-duration: 54s; }
.xab-js:not(.xab-calm) .xab-marquee:hover .xab-track { animation-play-state: paused; }
.xab-js:not(.xab-calm) .xab-scr.is-on .xab-type { animation: xab-type 1.4s steps(22, end) .3s both, xab-caret .9s step-end 1.7s infinite; }
.xab-js:not(.xab-calm) .xab-scr.is-on .xab-res { animation: xab-up .7s var(--xab-e) both; }
.xab-js:not(.xab-calm) .xab-scr.is-on .xab-res:nth-child(2) { animation-delay: 1.5s; }
.xab-js:not(.xab-calm) .xab-scr.is-on .xab-res:nth-child(3) { animation-delay: 1.62s; }
.xab-js:not(.xab-calm) .xab-scr.is-on .xab-res:nth-child(4) { animation-delay: 1.74s; }
.xab-js:not(.xab-calm) .xab-scr.is-on .xab-chip { animation: xab-pop .6s var(--xab-e) 1.7s both; }
.xab-js:not(.xab-calm) .xab-scr.is-on .xab-bar i { animation: xab-fill 2.6s cubic-bezier(.4, 0, .2, 1) .3s both; }
.xab-js:not(.xab-calm) .xab-scr.is-on .xab-pill { animation: xab-flip 2.9s steps(1, end) both; }
.xab-js:not(.xab-calm) .xab-scr.is-on .xab-done { animation: xab-pop .6s var(--xab-e) 2.9s both; }
.xab-js:not(.xab-calm) .xab-scr.is-on .xab-guard-row { animation: xab-up .7s var(--xab-e) both; }
.xab-js:not(.xab-calm) .xab-scr.is-on .xab-guard-row:nth-child(2) { animation-delay: .35s; }
.xab-js:not(.xab-calm) .xab-scr.is-on .xab-guard-row:nth-child(3) { animation-delay: .7s; }
.xab-js:not(.xab-calm) .xab-step.is-on .xab-num { animation: xab-up .6s var(--xab-e) both; }
@keyframes xab-phone-in { from { opacity: 0; transform: translateY(60px) rotate(-4deg) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes xab-float { 50% { translate: 0 -10px; } }
@keyframes xab-draw { to { stroke-dashoffset: 0; } }
@keyframes xab-fade-in { to { opacity: 1; } }
@keyframes xab-card-in { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes xab-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes xab-rise { to { transform: none; } }
@keyframes xab-fade { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes xab-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes xab-marquee { to { transform: translateX(-50%); } }
@keyframes xab-type { from { max-width: 0; } to { max-width: 22ch; } }
@keyframes xab-caret { 50% { border-right-color: transparent; } }
@keyframes xab-pop { from { opacity: 0; transform: scale(.9) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes xab-fill { from { width: 0; } to { width: 100%; } }
@keyframes xab-flip { 0% { opacity: 1; } 99% { opacity: 1; } 100% { opacity: 0; } }

/* Responsive */
@media (max-width: 1100px) {
  .xab-bento { grid-template-columns: repeat(2, 1fr); }
  .xab-card--wide { grid-column: span 2; }
}
@media (max-width: 900px) {
  .xab section { width: calc(100% - 32px); }
  .xab .xab-platforms { width: 100%; }
  .xab-hero { grid-template-columns: 1fr; min-height: 0; padding: 60px 0 30px; gap: 10px; }
  .xab-stage { height: 600px; width: min(100%, 420px); }
  .xab-phone { transform-origin: 50% 0; scale: .9; }
  .xab-float { padding: 11px 13px; border-radius: 16px; }
  .xab-float--order { left: 0; top: 6%; width: 200px; }
  .xab-float--note { right: 0; top: 52%; width: 200px; }
  .xab-float--shield { left: 2%; bottom: 10%; }
  .xab-stats { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
  .xab-stat:nth-child(3) { box-shadow: none; }
  .xab-manifesto { padding: 100px 0 70px; }
  .xab-how-grid { grid-template-columns: 1fr; gap: 0; }
  .xab-dev-wrap { top: 76px; z-index: 2; }
  .xab-dev { height: 330px; }
  .xab-scr { padding: 20px; }
  .xab-step, .xab-step:first-child { min-height: 58vh; padding-top: 30px; justify-content: center; }
  .xab-principles, .xab-who, .xab-platforms { padding-top: 90px; }
  .xab .xab-inv { padding: 90px 20px 80px; margin-top: 90px; }
  .xab-story { height: 400vh; }
  .xab-story-pin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0; align-content: start; padding-top: 70px; }
  .xab-story-vis { order: -1; height: 300px; }
  .xab-mini { width: 230px; padding: 16px; border-radius: 26px; scale: .95; }
  .xab-mini svg { height: 70px; margin: 12px 0 10px; }
  .xab-pop { padding: 9px 12px; font-size: 12px; }
  .xab-pop i { width: 22px; height: 22px; font-size: 10px; }
  .xab-pop--1 { left: -8px; top: -9%; } .xab-pop--2 { right: -8px; top: 36%; } .xab-pop--3 { left: -8px; bottom: 18%; } .xab-pop--4 { right: -8px; bottom: 0; }
  .xab-story-steps { height: 250px; }
  .xab-ss h3 { margin: 14px 0 10px; font-size: 36px; }
  .xab-ss p { font-size: 16px; }
  .xab-line { grid-template-columns: 1fr; gap: 10px; }
  .xab-final { padding: 120px 0 100px; }
}
@media (max-width: 560px) {
  .xab-bento { grid-template-columns: 1fr; }
  .xab-card--wide { grid-column: span 1; }
  .xab-card { min-height: 0; }
  .xab-stat { padding: 6px 16px; }
  .xab-stat span { font-size: 13.5px; }
  .xab-cta .x-btn { flex: 1 1 auto; justify-content: center; }
  .xab-track span { height: 52px; font-size: 15px; padding: 0 20px 0 16px; }
}

/* ── Installable app: /download page and the phone install sheet (Oct 30) ── */
.xapp { max-width: 1040px; margin: 0 auto; }
.xapp-hero { position: relative; display: grid; justify-items: center; text-align: center; padding: 40px 0 34px; }
.xapp-hero::before { content: ""; position: absolute; inset: -40px 0 auto; height: 420px; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 30%, color-mix(in srgb, var(--text) 9%, transparent), transparent 70%); }
.xapp-icon { width: 132px; height: 132px; border-radius: 30px; box-shadow: 0 0 0 1px var(--line-2), 0 30px 60px -20px rgba(0,0,0,.8); animation: xapp-rise .7s cubic-bezier(.2,.8,.2,1) both; }
.xapp-kicker { margin: 26px 0 8px; color: var(--text-2); font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.xapp-hero h1 { margin: 0; font: 760 clamp(40px, 6.4vw, 76px)/.98 var(--display); letter-spacing: -.045em; text-wrap: balance; }
.xapp-sub { max-width: 34em; margin: 18px 0 0; color: var(--text-2); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; }
.xapp-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; min-height: 50px; }
.xapp-cta .x-btn { height: 52px; padding: 0 26px; font-size: 16px; border-radius: 999px; }
.xapp-cta .x-btn i { margin-right: 8px; }
.xapp-done { display: inline-flex; align-items: center; gap: 8px; color: var(--ok, #30d158); font-weight: 600; }
.xapp-qr { display: none; align-items: center; gap: 16px; margin-top: 30px; padding: 14px 18px 14px 14px; border-radius: 20px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.xapp-qr svg { width: 92px; height: 92px; border-radius: 10px; }
.xapp-qr b { display: block; font-size: 15px; } .xapp-qr small { display: block; max-width: 220px; color: var(--text-2); font-size: 13.5px; line-height: 1.4; }
.xapp.is-desktop .xapp-qr { display: flex; }
.xapp-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; scroll-margin-top: 90px; }
.xapp.is-ios .xapp-steps [data-x-app-ios], .xapp.is-android .xapp-steps [data-x-app-android] { order: -1; }
.xapp.is-ios .xapp-steps, .xapp.is-android .xapp-steps { grid-template-columns: 1fr; }
.xapp-step-card { padding: 24px; border-radius: 26px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s; }
.xapp-step-card.is-focus { box-shadow: inset 0 0 0 1px var(--line-3), 0 0 0 4px color-mix(in srgb, var(--text) 8%, transparent); }
.xapp-step-card header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.xapp-step-card header b { display: block; font: 700 19px/1.2 var(--display); letter-spacing: -.02em; } .xapp-step-card header small { color: var(--text-2); font-size: 13.5px; }
.xapp-os { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 22px; }
.xapp-pill { margin-left: auto; padding: 5px 10px; border-radius: 999px; font: 600 12px var(--font); font-style: normal; color: var(--text-2); background: var(--panel-3); white-space: nowrap; }
.xapp-pill.is-on { color: var(--ok, #30d158); background: color-mix(in srgb, var(--ok, #30d158) 14%, transparent); }
.xapp-step-card ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.xapp-step-card li { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; line-height: 1.4; }
.xapp-step-card li > span { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--text); color: var(--bg); font: 700 13px var(--font); }
.xapp-ic { margin: 0 2px; color: #0a84ff; }
.xapp-feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.xapp-feats > div { padding: 20px; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line); }
.xapp-feats i { display: block; margin-bottom: 14px; font-size: 18px; }
.xapp-feats b { display: block; font: 700 16px/1.25 var(--display); } .xapp-feats small { display: block; margin-top: 4px; color: var(--text-2); font-size: 13.5px; line-height: 1.45; }
.xapp-more { margin-top: 56px; }
.xapp-more h2 { margin: 0 0 16px; font: 740 clamp(24px, 3vw, 32px)/1.1 var(--display); letter-spacing: -.03em; }
.xapp-plat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.xapp-plat > div { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 22px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.xapp-plat i { font-size: 22px; margin-bottom: 8px; } .xapp-plat b { font: 700 16px var(--display); } .xapp-plat small { color: var(--text-2); font-size: 13.5px; line-height: 1.45; flex: 1; }
.xapp-plat .xapp-pill { margin: 8px 0 0; align-self: flex-start; }
@keyframes xapp-rise { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@media (max-width: 860px) { .xapp-steps, .xapp-feats, .xapp-plat { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .xapp-hero { padding-top: 18px; } .xapp-icon { width: 108px; height: 108px; border-radius: 25px; } .xapp-steps, .xapp-plat { grid-template-columns: 1fr; } .xapp-cta .x-btn { width: 100%; } }
/* Installed app: no install prompts or links */
.x-standalone [data-x-app-link], .x-standalone .xapp-sheet { display: none !important; }
/* Phone install sheet */
.xapp-sheet { position: fixed; z-index: 90; left: 10px; right: 10px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; padding: 12px 12px 12px 12px; border-radius: 22px;
  background: color-mix(in srgb, #1c1c1e 88%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.16), 0 24px 50px -16px rgba(0,0,0,.85);
  color: #fff; transform: translateY(24px); opacity: 0; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.xapp-sheet.is-in { transform: none; opacity: 1; }
.xapp-sheet img { width: 52px; height: 52px; border-radius: 12px; box-shadow: 0 0 0 .5px rgba(255,255,255,.18); }
.xapp-sheet b { display: block; font-size: 15px; } .xapp-sheet small { display: block; color: rgba(255,255,255,.62); font-size: 12.5px; line-height: 1.35; }
.xapp-sheet .xapp-go { height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; color: #000; font: 700 14px var(--font); text-decoration: none; display: inline-grid; place-items: center; }
.xapp-sheet .xapp-x { position: absolute; top: -8px; right: -4px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: #3a3a3c; color: #fff; font-size: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
html[data-theme="light"] .xapp-sheet { background: color-mix(in srgb, #fff 90%, transparent); color: #000; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.1), 0 24px 50px -16px rgba(0,0,0,.3); }
html[data-theme="light"] .xapp-sheet small { color: rgba(0,0,0,.55); } html[data-theme="light"] .xapp-sheet .xapp-go { background: #000; color: #fff; }
body.is-guest .xapp-sheet { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: reduce) { .xapp-icon { animation: none; } .xapp-sheet { transition: none; } }
.xapp.is-desktop .xapp-cta { min-height: 0; margin-top: 0; }
.xapp-share { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; }
/* ── Animated install guides: real-phone walkthroughs (iOS Safari, Android Chrome) ── */
.xgd-wrap { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 26px; align-items: center; }
.xgd-wrap ol { align-self: center; }
.xgd-wrap li { transition: background .35s, box-shadow .35s, opacity .35s; }
.xgd-wrap li small { display: block; margin-top: 3px; color: var(--text-3); font-size: 12.5px; }
.xgd-wrap.is-playing li:not(.is-on) { opacity: .5; }
.xgd-wrap li.is-on { box-shadow: inset 0 0 0 1px var(--line-3); background: var(--panel-2); }
.xgd-phone { position: relative; width: 250px; height: 520px; padding: 9px; border-radius: 46px; background: linear-gradient(145deg, #3a3a3d, #121214); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12), 0 30px 60px -24px rgba(0,0,0,.9); justify-self: center; }
.xgd-phone.is-android { border-radius: 36px; }
.xgd-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 38px; background: #000; color: #fff; font: 500 11px/1.3 -apple-system, "SF Pro Text", Inter, system-ui, sans-serif; }
.is-android .xgd-screen { border-radius: 28px; font-family: Roboto, Inter, system-ui, sans-serif; }
.xgd-island { position: absolute; z-index: 9; top: 9px; left: 50%; width: 76px; height: 22px; margin-left: -38px; border-radius: 12px; background: #000; }
.xgd-punch { position: absolute; z-index: 9; top: 10px; left: 50%; width: 11px; height: 11px; margin-left: -5px; border-radius: 50%; background: #000; box-shadow: 0 0 0 1.5px #1a1a1a; }
.xgd-status { position: absolute; z-index: 8; top: 0; left: 0; right: 0; height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 6px 22px 0 26px; font-size: 11.5px; }
.is-android .xgd-status { height: 30px; padding: 2px 16px 0; font-size: 10.5px; }
.xgd-status span { display: flex; gap: 3px; } .xgd-status span i { width: 12px; height: 7px; border-radius: 2px; background: #fff; opacity: .9; }
/* the website inside the browser */
.xgd-web { position: absolute; left: 0; right: 0; top: 40px; bottom: 54px; padding: 14px 16px; background: #000; }
.is-android .xgd-web { top: 74px; bottom: 0; }
.xgd-web-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.xgd-web-nav svg { width: 46px; color: #fff; } .xgd-web-nav i { width: 46px; height: 16px; border-radius: 9px; background: #fff; }
.xgd-web-h { font: 800 26px/1 Inter, system-ui, sans-serif; letter-spacing: -.05em; text-align: center; margin-bottom: 12px; }
.xgd-web-p { height: 6px; margin: 6px auto 0; width: 80%; border-radius: 4px; background: #3a3a3c; } .xgd-web-p.is-short { width: 55%; }
.xgd-web-btn { width: 96px; margin: 16px auto 18px; padding: 8px 0; border-radius: 999px; background: #fff; color: #000; text-align: center; font-weight: 700; font-size: 10px; }
.xgd-web-card { height: 150px; border-radius: 18px; background: #141416; box-shadow: inset 0 0 0 1px #2a2a2c; padding: 12px; display: grid; gap: 8px; align-content: start; }
.xgd-web-card i { height: 22px; border-radius: 7px; background: #1f1f22; }
/* Safari compact bar (iOS 26) */
.xgd-sbar { position: absolute; z-index: 5; left: 10px; right: 10px; bottom: 12px; height: 38px; display: flex; align-items: center; gap: 8px; }
.xgd-sb-back { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(60,60,64,.85); font-size: 22px; line-height: 1; padding-bottom: 3px; }
.xgd-url { flex: 1; height: 36px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 4px; background: rgba(60,60,64,.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 12px; }
.xgd-url svg { width: 10px; height: 10px; opacity: .8; }
.xgd-more { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(60,60,64,.85); font-size: 18px; line-height: 1; }
/* Chrome top bar */
.xgd-cbar { position: absolute; z-index: 5; left: 0; right: 0; top: 30px; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: #1f1f1f; }
.xgd-cbar .xgd-url { height: 32px; justify-content: flex-start; padding-left: 12px; background: #303134; }
.xgd-c-home { font-size: 15px; opacity: .85; } .xgd-tabs { width: 17px; height: 17px; border: 1.6px solid #fff; border-radius: 4px; display: grid; place-items: center; font-size: 9px; font-weight: 700; }
.xgd-cbar .xgd-more { width: 22px; background: none; font-size: 18px; }
/* menus */
.xgd-menu { position: absolute; z-index: 6; right: 12px; bottom: 58px; width: 170px; padding: 5px; border-radius: 16px; background: rgba(44,44,46,.96); box-shadow: 0 18px 40px rgba(0,0,0,.6); transform-origin: bottom right; transform: scale(.6); opacity: 0; transition: transform .3s cubic-bezier(.2,.9,.3,1.2), opacity .2s; pointer-events: none; }
.xgd-menu.is-top { top: 70px; bottom: auto; right: 6px; width: 150px; border-radius: 6px; padding: 4px 0; background: #2d2e30; transform-origin: top right; }
.xgd-mi { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; font-size: 11.5px; } .xgd-mi svg { width: 15px; height: 15px; color: #0a84ff; }
.is-top .xgd-mi { border-radius: 0; padding: 8px 14px; }
.xgd-screen[data-scene="menu"] .xgd-menu { transform: none; opacity: 1; }
/* iOS share sheet */
.xgd-sheet { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; height: 74%; padding: 14px 12px; border-radius: 22px 22px 0 0; background: #1c1c1e; transform: translateY(102%); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.xgd-screen[data-scene="sheet"] .xgd-sheet, .xgd-screen[data-scene="sheet2"] .xgd-sheet { transform: none; }
.xgd-sheet-h { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; border-bottom: .5px solid #3a3a3c; }
.xgd-sheet-h img { width: 34px; height: 34px; border-radius: 8px; } .xgd-sheet-h small { display: block; color: #8e8e93; font-size: 10px; }
.xgd-sheet-h span { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: #3a3a3c; display: grid; place-items: center; color: #aeaeb2; }
.xgd-apps { display: flex; gap: 12px; padding: 12px 2px; } .xgd-apps i { width: 38px; height: 38px; border-radius: 10px; background: var(--c); opacity: .9; }
.xgd-acts { border-radius: 12px; background: #2c2c2e; overflow: hidden; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.xgd-screen[data-scene="sheet2"] .xgd-acts { transform: translateY(-34px); }
.xgd-acts div { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-bottom: .5px solid #3a3a3c; font-size: 11.5px; }
.xgd-acts svg { width: 16px; height: 16px; }
.xgd-acts .is-target, .xgd-menu .is-target { transition: background .25s; }
.xgd-screen[data-scene="sheet2"] .xgd-acts .is-target, .xgd-screen[data-hl="install"] .xgd-menu .is-target { background: rgba(255,255,255,.12); }
/* iOS add dialog */
.xgd-add { position: absolute; z-index: 7; inset: 40px 0 0; padding: 0 12px; background: #1c1c1e; border-radius: 16px 16px 0 0; transform: translateY(102%); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.xgd-screen[data-scene="add"] .xgd-add { transform: none; }
.xgd-add-bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 2px; font-size: 11.5px; } .xgd-add-bar > span { color: #0a84ff; } .xgd-add-go { font-weight: 700; }
.xgd-add-row { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: #2c2c2e; } .xgd-add-row img { width: 48px; height: 48px; border-radius: 11px; }
.xgd-add-row b { display: block; font-size: 13px; } .xgd-add-row small { color: #8e8e93; font-size: 10px; }
.xgd-add-tg { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #2c2c2e; font-size: 11.5px; }
.xgd-add-tg i { width: 34px; height: 20px; border-radius: 999px; background: #30d158; position: relative; } .xgd-add-tg i::after { content: ""; position: absolute; right: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
/* Android install dialog */
.xgd-dialog { position: absolute; z-index: 7; left: 18px; right: 18px; top: 34%; padding: 18px 16px 12px; border-radius: 24px; background: #2b2c2f; text-align: left; transform: scale(.85); opacity: 0; transition: transform .3s cubic-bezier(.2,.9,.3,1.1), opacity .2s; }
.xgd-screen[data-scene="dialog"] .xgd-dialog { transform: none; opacity: 1; }
.xgd-screen[data-scene="dialog"]::after { content: ""; position: absolute; inset: 0; z-index: 6; background: rgba(0,0,0,.5); }
.xgd-dialog img { width: 34px; height: 34px; border-radius: 50%; } .xgd-dialog > b { display: block; margin: 10px 0 8px; font-size: 15px; font-weight: 500; }
.xgd-dl-row b { display: block; font-size: 12px; } .xgd-dl-row small { color: #9aa0a6; font-size: 10.5px; }
.xgd-dl-acts { display: flex; justify-content: flex-end; gap: 18px; margin-top: 16px; color: #8ab4f8; font-size: 12px; font-weight: 600; }
/* home screen + splash */
.xgd-home { position: absolute; z-index: 7; inset: 0; padding: 54px 16px 0; background: radial-gradient(120% 80% at 20% 0%, #2c3e66, transparent 60%), radial-gradient(100% 70% at 100% 100%, #5b2a52, transparent 60%), #0b0b10; opacity: 0; transition: opacity .4s; }
.is-android .xgd-home { padding-top: 44px; }
.xgd-screen[data-scene="home"] .xgd-home, .xgd-screen[data-scene="splash"] .xgd-home { opacity: 1; }
.xgd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 10px; }
.xgd-grid > i { aspect-ratio: 1; border-radius: 12px; background: rgba(255,255,255,.14); }
.is-android .xgd-grid > i { border-radius: 50%; }
.xgd-app { display: grid; justify-items: center; gap: 4px; transform: scale(0); transition: transform .45s cubic-bezier(.3,1.6,.5,1) .25s; }
.xgd-screen[data-scene="home"] .xgd-app, .xgd-screen[data-scene="splash"] .xgd-app { transform: none; }
.xgd-app img { width: 100%; aspect-ratio: 1; border-radius: 12px; box-shadow: 0 6px 14px rgba(0,0,0,.4); } .is-android .xgd-app img { border-radius: 50%; }
.xgd-app small { font-size: 9px; }
.xgd-dock { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 62px; display: flex; justify-content: space-around; align-items: center; border-radius: 26px; background: rgba(255,255,255,.12); }
.xgd-dock i { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.18); } .is-android .xgd-dock { background: none; } .is-android .xgd-dock i { border-radius: 50%; }
.xgd-splash { position: absolute; z-index: 8; inset: 0; display: grid; place-items: center; background: #000; opacity: 0; transform: scale(.2); transition: opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1); }
.xgd-splash svg { width: 120px; color: #fff; }
.xgd-screen[data-scene="splash"] .xgd-splash { opacity: 1; transform: none; }
/* the finger */
.xgd-finger { position: absolute; z-index: 20; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(255,255,255,.35); box-shadow: 0 0 0 1.5px rgba(255,255,255,.8), 0 6px 16px rgba(0,0,0,.4); opacity: 0; transition: transform .55s cubic-bezier(.45,.05,.3,1), opacity .25s; pointer-events: none; }
.xgd-finger.is-on { opacity: 1; } .xgd-finger.is-tap { animation: xgd-tap .32s ease-out; }
@keyframes xgd-tap { 50% { scale: .72; background: rgba(255,255,255,.6); } }
@media (max-width: 860px) { .xgd-wrap { grid-template-columns: 1fr; } .xgd-phone { margin-bottom: 4px; } }
@media (prefers-reduced-motion: reduce) { .xgd-finger { display: none; } .xgd-menu, .xgd-sheet, .xgd-add, .xgd-dialog, .xgd-home, .xgd-splash, .xgd-app, .xgd-acts { transition: none; } }
/* guide realism pass */
.xgd-menu .xgd-mi { justify-content: space-between; } .xgd-menu:not(.is-top) .xgd-mi svg { color: #fff; opacity: .9; }
.xgd-menu:not(.is-top) .xgd-mi + .xgd-mi { border-top: .5px solid rgba(255,255,255,.08); border-radius: 0; }
.xgd-mrow { display: flex; justify-content: space-around; padding: 6px 4px 8px; border-bottom: .5px solid #444; font-size: 13px; opacity: .9; }
.is-top .xgd-mi { padding: 6px 14px; font-size: 10.5px; }
.xgd-apps { gap: 0; justify-content: space-between; padding: 12px 0 10px; }
.xgd-apps span { display: grid; justify-items: center; gap: 4px; width: 20%; } .xgd-apps small { font-size: 8px; color: #d1d1d6; }
.xgd-apps i { width: 36px; height: 36px; border-radius: 9px; }
.xgd-apps span:first-child i { border-radius: 50%; }
.xgd-acts div { padding: 8px 12px; }
.xgd-screen[data-scene="sheet2"] .xgd-acts { transform: translateY(-112px); }
.xgd-sheet { overflow: hidden; }
.xgd-app { width: 100%; }
.xgd-app img { width: 100%; height: auto; }
/* realism pass 2: real site screenshot, real apps, sheet scrolls under its header */
.xgd-web { padding: 0; overflow: hidden; }
.xgd-shot { display: block; width: 100%; height: auto; }
.xgd-grid { gap: 12px 8px; }
.xgd-ico { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.xgd-ico em { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 12px; font-style: normal; font-size: 21px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.xgd-ico em i { line-height: 1; } .xgd-xg { font: 700 22px/1 system-ui, sans-serif; }
.xgd-ico small { font-size: 8.5px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.is-android .xgd-ico em { border-radius: 50%; font-size: 19px; }
.xgd-app { transform: none; }
.xgd-app-in { transform: scale(0); transition: transform .45s cubic-bezier(.3,1.6,.5,1) .25s; box-shadow: 0 6px 14px rgba(0,0,0,.45); }
.xgd-app-in img { width: 100%; height: 100%; display: block; }
.xgd-screen[data-scene="home"] .xgd-app-in, .xgd-screen[data-scene="splash"] .xgd-app-in { transform: none; }
.xgd-dock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 9px 12px; height: auto; align-items: center; }
.xgd-dock .xgd-ico em { box-shadow: none; }
.xgd-home { background: radial-gradient(120% 80% at 15% 0%, #3d5a99, transparent 60%), radial-gradient(100% 70% at 100% 100%, #8a3b6e, transparent 60%), linear-gradient(#141a2e, #0c0a14); }
.xgd-sheet-body { position: relative; height: calc(100% - 52px); overflow: hidden; }
.xgd-sheet-scroll { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.xgd-screen[data-scene="sheet2"] .xgd-acts { transform: none; }
.xgd-screen[data-scene="sheet2"] .xgd-sheet-scroll { transform: translateY(-118px); }
/* iPhone guide, rebuilt to match iOS 26 Safari (reference screenshots, Oct 30) */
.xgi { font-family: -apple-system, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif; background: #000; }
.xgi svg { flex: none; }
.xgi-island { position: absolute; z-index: 30; top: 8px; left: 50%; width: 72px; height: 21px; margin-left: -36px; border-radius: 12px; background: #000; }
.xgi-status { position: absolute; z-index: 29; top: 0; left: 0; right: 0; height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 4px 20px 0 26px; color: #fff; }
.xgi-status b { font-size: 12px; font-weight: 600; letter-spacing: -.01em; }
.xgi-status span { display: flex; align-items: center; gap: 4px; } .xgi-status svg { height: 9px; width: auto; }
.xgi-batt { position: relative; width: 19px; height: 9px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); } .xgi-batt i { position: absolute; inset: 1.5px 4px 1.5px 1.5px; border-radius: 1.5px; background: #fff; }
.xgi-page { position: absolute; inset: 38px 0 0; overflow: hidden; } .xgi-page img { width: 100%; display: block; }
.xgi-bar { position: absolute; z-index: 5; left: 9px; right: 9px; bottom: 10px; display: flex; align-items: center; gap: 6px; }
.xgi-circ { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(58,58,60,.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.18); color: #fff; font-size: 20px; line-height: 1; }
.xgi-circ[data-t="more"] { font-size: 6px; letter-spacing: 1.5px; padding-left: 1.5px; }
.xgi-url { flex: 1; height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border-radius: 999px; background: rgba(58,58,60,.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.18); color: #fff; }
.xgi-url b { flex: 1; text-align: center; font-size: 12px; font-weight: 500; } .xgi-url svg { width: 13px; height: 13px; opacity: .9; }
/* ⋯ popover */
.xgi-pop { position: absolute; z-index: 8; right: 8px; bottom: 52px; width: 160px; padding: 6px 0 0; border-radius: 20px; background: rgba(46,46,48,.94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 16px 40px rgba(0,0,0,.6), inset 0 0 0 .5px rgba(255,255,255,.12); color: #fff; transform-origin: 90% 100%; transform: scale(.4); opacity: 0; transition: transform .32s cubic-bezier(.2,.9,.3,1.15), opacity .18s; }
.xgi[data-scene="menu"] .xgi-pop { transform: none; opacity: 1; }
.xgi-pi { display: flex; align-items: center; gap: 10px; margin: 0 5px; padding: 7px 9px; border-radius: 12px; font-size: 11.5px; } .xgi-pi svg { width: 15px; height: 15px; }
.xgi[data-hl="share"] .xgi-pi.is-hl { background: rgba(255,255,255,.14); }
.xgi-pop hr { margin: 4px 14px; border: 0; border-top: .5px solid rgba(255,255,255,.16); }
.xgi-pop-f { display: grid; grid-template-columns: 1fr 1fr; margin-top: 6px; padding: 8px 4px; border-radius: 0 0 20px 20px; background: rgba(255,255,255,.06); }
.xgi-pop-f span { display: grid; justify-items: center; gap: 3px; } .xgi-pop-f svg { width: 16px; height: 16px; } .xgi-pop-f small { font-size: 8.5px; }
/* share sheet */
.xgi-share { position: absolute; z-index: 9; left: 0; right: 0; top: 46px; bottom: 0; border-radius: 22px 22px 0 0; background: #1c1c1e; color: #fff; transform: translateY(104%); transition: transform .48s cubic-bezier(.2,.8,.2,1); box-shadow: 0 -10px 30px rgba(0,0,0,.4); }
.xgi[data-scene="share"] .xgi-share, .xgi[data-scene="share2"] .xgi-share { transform: none; }
.xgi-sh-h { display: flex; gap: 10px; padding: 14px 12px 10px; } .xgi-sh-h img { width: 46px; height: 46px; border-radius: 11px; }
.xgi-sh-h div { flex: 1; min-width: 0; } .xgi-sh-h b { display: block; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xgi-sh-h small { display: block; color: #8e8e93; font-size: 10.5px; } .xgi-sh-h em { display: inline-block; margin-top: 5px; padding: 3px 9px; border-radius: 999px; background: #2c2c2e; font-style: normal; font-size: 10px; }
.xgi-close { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #2c2c2e; } .xgi-close svg { width: 12px; height: 12px; }
.xgi-sh-body { position: absolute; left: 0; right: 0; top: 92px; bottom: 0; overflow: hidden; padding: 0 10px; }
.xgi-sh-scroll { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.xgi[data-scene="share2"] .xgi-sh-scroll { transform: translateY(-46px); }
.xgi-group { margin-bottom: 10px; border-radius: 14px; background: #2c2c2e; overflow: hidden; }
.xgi-row { display: flex; align-items: center; gap: 11px; padding: 0 12px; height: 34px; font-size: 11.5px; position: relative; }
.xgi-row + .xgi-row::before { content: ""; position: absolute; left: 38px; right: 0; top: 0; border-top: .5px solid rgba(255,255,255,.12); }
.xgi-row svg { width: 15px; height: 15px; }
.xgi[data-scene="share2"] .xgi-row.is-target { background: rgba(255,255,255,.12); }
/* Add to Home Screen */
.xgi-add { position: absolute; z-index: 10; left: 0; right: 0; top: 46px; bottom: 0; border-radius: 22px 22px 0 0; background: #1c1c1e; color: #fff; transform: translateY(104%); transition: transform .48s cubic-bezier(.2,.8,.2,1); }
.xgi[data-scene="add"] .xgi-add { transform: none; }
.xgi-add-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px; } .xgi-add-h b { font-size: 12px; font-weight: 600; }
.xgi-addbtn { padding: 6px 12px; border-radius: 999px; background: #0a84ff; font-size: 11.5px; font-weight: 600; }
.xgi-add-card { display: flex; gap: 10px; align-items: center; padding: 8px 10px; background: #2c2c2e; } .xgi-add-card img { width: 44px; height: 44px; border-radius: 10px; }
.xgi-add-card > div { flex: 1; min-width: 0; } .xgi-name { display: flex; align-items: center; padding-bottom: 7px; border-bottom: .5px solid rgba(255,255,255,.12); font-size: 11.5px; }
.xgi-name i { width: 1.5px; height: 13px; margin-left: 1px; background: #0a84ff; animation: xgi-caret 1s steps(1) infinite; } .xgi-name em { margin-left: auto; width: 13px; height: 13px; border-radius: 50%; background: #636366; color: #1c1c1e; font-style: normal; font-size: 10px; line-height: 13px; text-align: center; }
@keyframes xgi-caret { 50% { opacity: 0; } }
.xgi-add-card small { display: block; padding-top: 6px; color: #8e8e93; font-size: 10.5px; }
.xgi-tg { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding: 9px 10px; background: #2c2c2e; font-size: 11.5px; }
.xgi-tg i { position: relative; width: 36px; height: 21px; border-radius: 999px; background: #30d158; } .xgi-tg i::after { content: ""; position: absolute; right: 2px; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; }
.xgi-cap { margin: 6px 10px 0; color: #8e8e93; font-size: 8.5px; line-height: 1.35; }
.xgi-kb { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 3px 22px; border-radius: 14px 14px 0 0; background: #2b2b2d; display: grid; gap: 6px; }
.xgi-kr { display: flex; justify-content: center; gap: 3px; } .xgi-kr i { flex: 0 0 20px; height: 27px; display: grid; place-items: center; border-radius: 5px; background: #6b6b6e; color: #fff; font-style: normal; font-size: 12px; }
.xgi-kr.is-2 { padding: 0 9px; } .xgi-kr i.w { flex-basis: 28px; background: #4a4a4c; font-size: 11px; }
.xgi-kr.is-4 i.w { flex-basis: 48px; } .xgi-kr i.sp { flex: 1 1 auto; max-width: 104px; } .xgi-kr i.ok { flex-basis: 50px; background: #0a84ff; }
/* Android guide polish: Pixel home, fuller Chrome menu, real status bar */
.xga { font-family: "Google Sans", Roboto, Inter, system-ui, sans-serif; }
.xga-status { position: absolute; z-index: 29; top: 0; left: 0; right: 0; height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 2px 16px 0 18px; color: #fff; font-size: 11px; }
.xga-status b { font-weight: 500; } .xga-status span { display: flex; align-items: center; gap: 4px; } .xga-status svg { height: 9px; width: auto; }
.xga-batt { width: 7px; height: 11px; border-radius: 1.5px; background: #fff; }
.xga .xgd-status { display: none; }
.xga-home { display: grid; place-items: center; width: 22px; color: #e8eaed; } .xga-home svg { width: 15px; height: 15px; }
.xga .xgd-cbar { top: 30px; background: #202124; } .xga .xgd-url { justify-content: flex-start; gap: 8px; padding-left: 10px; background: #303134; }
.xga .xgd-url b { font-weight: 400; font-size: 12px; } .xga .xgd-url svg { width: 12px; height: 12px; opacity: .85; }
.xga .xgd-web { top: 74px; }
.xga .xgd-menu.is-top { top: 32px; right: 4px; width: 158px; padding: 2px 0 4px; background: #2d2e31; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.6); }
.xga .xgd-mrow { padding: 8px 6px; color: #e8eaed; } .xga .xgd-mrow svg { width: 14px; height: 14px; }
.xga .is-top .xgd-mi { padding: 5.5px 14px; font-size: 10.5px; color: #e8eaed; }
.xga-cb { margin-left: auto; width: 11px; height: 11px; border: 1.5px solid #9aa0a6; border-radius: 2px; }
.xga .xgd-dialog { left: 20px; right: 20px; top: 30%; border-radius: 26px; background: #2d2f31; }
.xga-home-s { padding: 38px 14px 0; background: radial-gradient(130% 70% at 10% 0%, #2f4f7f, transparent 60%), radial-gradient(110% 70% at 100% 100%, #4b6b3c, transparent 55%), linear-gradient(#141c26, #0d1210); }
.xga-glance { margin: 4px 4px 18px; color: #fff; } .xga-glance b { display: block; font-size: 15px; font-weight: 400; } .xga-glance small { font-size: 10px; opacity: .85; }
.xga .xgd-grid { gap: 12px 10px; }
.xga-search { position: absolute; left: 14px; right: 14px; bottom: 92px; height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 999px; background: rgba(48,52,58,.85); color: #c4c7c5; }
.xga-search b { font: 700 15px/1 Arial, sans-serif; background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xga-search span { flex: 1; } .xga-search svg { width: 14px; height: 14px; }
.xga .xgd-dock { bottom: 30px; background: none; padding: 0 8px; }
.xga-gest { position: absolute; left: 50%; bottom: 10px; width: 80px; height: 4px; margin-left: -40px; border-radius: 4px; background: rgba(255,255,255,.8); }
/* finger: arrive before tapping */
.xgd-finger { transition: transform .34s cubic-bezier(.4,0,.2,1), opacity .2s; }
/* app tiles: the site's brand-colour icon rules must not recolour the logos on their own tiles */
.xgd-ico em i { background: var(--fg, #fff) !important; filter: none !important; opacity: 1 !important; width: 52% !important; height: 52% !important; }
.xgd-ico em svg { width: 58%; height: 58%; }
.xgd-dock .xgd-ico em { font-size: 0; }
/* Notification-style app banner: slides down from the top once per visit on phones */
.xapp-note { position: fixed; z-index: 2147483000; left: 8px; right: 8px; top: calc(8px + env(safe-area-inset-top, 0px)); display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 22px;
  background: color-mix(in srgb, #2a2a2c 82%, transparent); -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.16), 0 18px 40px -12px rgba(0,0,0,.8); color: #fff; text-decoration: none;
  transform: translateY(calc(-100% - 24px)); transition: transform .55s cubic-bezier(.2,.85,.25,1.05); }
.xapp-note.is-in { transform: none; }
.xapp-note:hover, .xapp-note:focus { color: #fff; text-decoration: none; }
.xapp-note img { width: 38px; height: 38px; border-radius: 9px; }
.xapp-note-h { display: flex; justify-content: space-between; align-items: baseline; }
.xapp-note-h b { font-size: 12px; font-weight: 600; opacity: .7; text-transform: none; } .xapp-note-h small { font-size: 11px; opacity: .55; }
.xapp-note strong { display: block; margin-top: 1px; font-size: 14px; font-weight: 600; }
.xapp-note div > small { display: block; margin-top: 1px; color: rgba(255,255,255,.75); font-size: 12.5px; line-height: 1.32; }
.xapp-note .xapp-x { position: static; align-self: start; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 10px; box-shadow: none; }
html[data-theme="light"] .xapp-note { background: color-mix(in srgb, #fff 82%, transparent); color: #000; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08), 0 18px 40px -12px rgba(0,0,0,.3); }
html[data-theme="light"] .xapp-note div > small { color: rgba(0,0,0,.65); } html[data-theme="light"] .xapp-note .xapp-x { background: rgba(0,0,0,.08); color: #000; }
html[data-theme="light"] .xapp-note:hover { color: #000; }
.x-standalone .xapp-note { display: none !important; }
@media (prefers-reduced-motion: reduce) { .xapp-note { transition: none; } }