@font-face {
    font-display: block;
    font-family: bootstrap-icons;
    src:
        url('/static/icons.1.13.1/fonts/bootstrap-icons.woff2') format('woff2'),
        url('/static/icons.1.11.3/font/fonts/bootstrap-icons.woff') format('woff');
}
.bi::before,
[class*=' bi-']::before,
[class^='bi-']::before {
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -0.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.bi-123::before {
    content: '\f67f';
}
.bi-alarm-fill::before {
    content: '\f101';
}
.bi-alarm::before {
    content: '\f102';
}
.bi-align-bottom::before {
    content: '\f103';
}
.bi-align-center::before {
    content: '\f104';
}
.bi-align-end::before {
    content: '\f105';
}
.bi-align-middle::before {
    content: '\f106';
}
.bi-align-start::before {
    content: '\f107';
}
.bi-align-top::before {
    content: '\f108';
}
.bi-alt::before {
    content: '\f109';
}
.bi-app-indicator::before {
    content: '\f10a';
}
.bi-app::before {
    content: '\f10b';
}
.bi-archive-fill::before {
    content: '\f10c';
}
.bi-archive::before {
    content: '\f10d';
}
.bi-arrow-90deg-down::before {
    content: '\f10e';
}
.bi-arrow-90deg-left::before {
    content: '\f10f';
}
.bi-arrow-90deg-right::before {
    content: '\f110';
}
.bi-arrow-90deg-up::before {
    content: '\f111';
}
.bi-arrow-bar-down::before {
    content: '\f112';
}
.bi-arrow-bar-left::before {
    content: '\f113';
}
.bi-arrow-bar-right::before {
    content: '\f114';
}
.bi-arrow-bar-up::before {
    content: '\f115';
}
.bi-arrow-clockwise::before {
    content: '\f116';
}
.bi-arrow-counterclockwise::before {
    content: '\f117';
}
.bi-arrow-down-circle-fill::before {
    content: '\f118';
}
.bi-arrow-down-circle::before {
    content: '\f119';
}
.bi-arrow-down-left-circle-fill::before {
    content: '\f11a';
}
.bi-arrow-down-left-circle::before {
    content: '\f11b';
}
.bi-arrow-down-left-square-fill::before {
    content: '\f11c';
}
.bi-arrow-down-left-square::before {
    content: '\f11d';
}
.bi-arrow-down-left::before {
    content: '\f11e';
}
.bi-arrow-down-right-circle-fill::before {
    content: '\f11f';
}
.bi-arrow-down-right-circle::before {
    content: '\f120';
}
.bi-arrow-down-right-square-fill::before {
    content: '\f121';
}
.bi-arrow-down-right-square::before {
    content: '\f122';
}
.bi-arrow-down-right::before {
    content: '\f123';
}
.bi-arrow-down-short::before {
    content: '\f124';
}
.bi-arrow-down-square-fill::before {
    content: '\f125';
}
.bi-arrow-down-square::before {
    content: '\f126';
}
.bi-arrow-down-up::before {
    content: '\f127';
}
.bi-arrow-down::before {
    content: '\f128';
}
.bi-arrow-left-circle-fill::before {
    content: '\f129';
}
.bi-arrow-left-circle::before {
    content: '\f12a';
}
.bi-arrow-left-right::before {
    content: '\f12b';
}
.bi-arrow-left-short::before {
    content: '\f12c';
}
.bi-arrow-left-square-fill::before {
    content: '\f12d';
}
.bi-arrow-left-square::before {
    content: '\f12e';
}
.bi-arrow-left::before {
    content: '\f12f';
}
.bi-arrow-repeat::before {
    content: '\f130';
}
.bi-arrow-return-left::before {
    content: '\f131';
}
.bi-arrow-return-right::before {
    content: '\f132';
}
.bi-arrow-right-circle-fill::before {
    content: '\f133';
}
.bi-arrow-right-circle::before {
    content: '\f134';
}
.bi-arrow-right-short::before {
    content: '\f135';
}
.bi-arrow-right-square-fill::before {
    content: '\f136';
}
.bi-arrow-right-square::before {
    content: '\f137';
}
.bi-arrow-right::before {
    content: '\f138';
}
.bi-arrow-up-circle-fill::before {
    content: '\f139';
}
.bi-arrow-up-circle::before {
    content: '\f13a';
}
.bi-arrow-up-left-circle-fill::before {
    content: '\f13b';
}
.bi-arrow-up-left-circle::before {
    content: '\f13c';
}
.bi-arrow-up-left-square-fill::before {
    content: '\f13d';
}
.bi-arrow-up-left-square::before {
    content: '\f13e';
}
.bi-arrow-up-left::before {
    content: '\f13f';
}
.bi-arrow-up-right-circle-fill::before {
    content: '\f140';
}
.bi-arrow-up-right-circle::before {
    content: '\f141';
}
.bi-arrow-up-right-square-fill::before {
    content: '\f142';
}
.bi-arrow-up-right-square::before {
    content: '\f143';
}
.bi-arrow-up-right::before {
    content: '\f144';
}
.bi-arrow-up-short::before {
    content: '\f145';
}
.bi-arrow-up-square-fill::before {
    content: '\f146';
}
.bi-arrow-up-square::before {
    content: '\f147';
}
.bi-arrow-up::before {
    content: '\f148';
}
.bi-arrows-angle-contract::before {
    content: '\f149';
}
.bi-arrows-angle-expand::before {
    content: '\f14a';
}
.bi-arrows-collapse::before {
    content: '\f14b';
}
.bi-arrows-expand::before {
    content: '\f14c';
}
.bi-arrows-fullscreen::before {
    content: '\f14d';
}
.bi-arrows-move::before {
    content: '\f14e';
}
.bi-aspect-ratio-fill::before {
    content: '\f14f';
}
.bi-aspect-ratio::before {
    content: '\f150';
}
.bi-asterisk::before {
    content: '\f151';
}
.bi-at::before {
    content: '\f152';
}
.bi-award-fill::before {
    content: '\f153';
}
.bi-award::before {
    content: '\f154';
}
.bi-back::before {
    content: '\f155';
}
.bi-backspace-fill::before {
    content: '\f156';
}
.bi-backspace-reverse-fill::before {
    content: '\f157';
}
.bi-backspace-reverse::before {
    content: '\f158';
}
.bi-backspace::before {
    content: '\f159';
}
.bi-badge-3d-fill::before {
    content: '\f15a';
}
.bi-badge-3d::before {
    content: '\f15b';
}
.bi-badge-4k-fill::before {
    content: '\f15c';
}
.bi-badge-4k::before {
    content: '\f15d';
}
.bi-badge-8k-fill::before {
    content: '\f15e';
}
.bi-badge-8k::before {
    content: '\f15f';
}
.bi-badge-ad-fill::before {
    content: '\f160';
}
.bi-badge-ad::before {
    content: '\f161';
}
.bi-badge-ar-fill::before {
    content: '\f162';
}
.bi-badge-ar::before {
    content: '\f163';
}
.bi-badge-cc-fill::before {
    content: '\f164';
}
.bi-badge-cc::before {
    content: '\f165';
}
.bi-badge-hd-fill::before {
    content: '\f166';
}
.bi-badge-hd::before {
    content: '\f167';
}
.bi-badge-tm-fill::before {
    content: '\f168';
}
.bi-badge-tm::before {
    content: '\f169';
}
.bi-badge-vo-fill::before {
    content: '\f16a';
}
.bi-badge-vo::before {
    content: '\f16b';
}
.bi-badge-vr-fill::before {
    content: '\f16c';
}
.bi-badge-vr::before {
    content: '\f16d';
}
.bi-badge-wc-fill::before {
    content: '\f16e';
}
.bi-badge-wc::before {
    content: '\f16f';
}
.bi-bag-check-fill::before {
    content: '\f170';
}
.bi-bag-check::before {
    content: '\f171';
}
.bi-bag-dash-fill::before {
    content: '\f172';
}
.bi-bag-dash::before {
    content: '\f173';
}
.bi-bag-fill::before {
    content: '\f174';
}
.bi-bag-plus-fill::before {
    content: '\f175';
}
.bi-bag-plus::before {
    content: '\f176';
}
.bi-bag-x-fill::before {
    content: '\f177';
}
.bi-bag-x::before {
    content: '\f178';
}
.bi-bag::before {
    content: '\f179';
}
.bi-bar-chart-fill::before {
    content: '\f17a';
}
.bi-bar-chart-line-fill::before {
    content: '\f17b';
}
.bi-bar-chart-line::before {
    content: '\f17c';
}
.bi-bar-chart-steps::before {
    content: '\f17d';
}
.bi-bar-chart::before {
    content: '\f17e';
}
.bi-basket-fill::before {
    content: '\f17f';
}
.bi-basket::before {
    content: '\f180';
}
.bi-basket2-fill::before {
    content: '\f181';
}
.bi-basket2::before {
    content: '\f182';
}
.bi-basket3-fill::before {
    content: '\f183';
}
.bi-basket3::before {
    content: '\f184';
}
.bi-battery-charging::before {
    content: '\f185';
}
.bi-battery-full::before {
    content: '\f186';
}
.bi-battery-half::before {
    content: '\f187';
}
.bi-battery::before {
    content: '\f188';
}
.bi-bell-fill::before {
    content: '\f189';
}
.bi-bell::before {
    content: '\f18a';
}
.bi-bezier::before {
    content: '\f18b';
}
.bi-bezier2::before {
    content: '\f18c';
}
.bi-bicycle::before {
    content: '\f18d';
}
.bi-binoculars-fill::before {
    content: '\f18e';
}
.bi-binoculars::before {
    content: '\f18f';
}
.bi-blockquote-left::before {
    content: '\f190';
}
.bi-blockquote-right::before {
    content: '\f191';
}
.bi-book-fill::before {
    content: '\f192';
}
.bi-book-half::before {
    content: '\f193';
}
.bi-book::before {
    content: '\f194';
}
.bi-bookmark-check-fill::before {
    content: '\f195';
}
.bi-bookmark-check::before {
    content: '\f196';
}
.bi-bookmark-dash-fill::before {
    content: '\f197';
}
.bi-bookmark-dash::before {
    content: '\f198';
}
.bi-bookmark-fill::before {
    content: '\f199';
}
.bi-bookmark-heart-fill::before {
    content: '\f19a';
}
.bi-bookmark-heart::before {
    content: '\f19b';
}
.bi-bookmark-plus-fill::before {
    content: '\f19c';
}
.bi-bookmark-plus::before {
    content: '\f19d';
}
.bi-bookmark-star-fill::before {
    content: '\f19e';
}
.bi-bookmark-star::before {
    content: '\f19f';
}
.bi-bookmark-x-fill::before {
    content: '\f1a0';
}
.bi-bookmark-x::before {
    content: '\f1a1';
}
.bi-bookmark::before {
    content: '\f1a2';
}
.bi-bookmarks-fill::before {
    content: '\f1a3';
}
.bi-bookmarks::before {
    content: '\f1a4';
}
.bi-bookshelf::before {
    content: '\f1a5';
}
.bi-bootstrap-fill::before {
    content: '\f1a6';
}
.bi-bootstrap-reboot::before {
    content: '\f1a7';
}
.bi-bootstrap::before {
    content: '\f1a8';
}
.bi-border-all::before {
    content: '\f1a9';
}
.bi-border-bottom::before {
    content: '\f1aa';
}
.bi-border-center::before {
    content: '\f1ab';
}
.bi-border-inner::before {
    content: '\f1ac';
}
.bi-border-left::before {
    content: '\f1ad';
}
.bi-border-middle::before {
    content: '\f1ae';
}
.bi-border-outer::before {
    content: '\f1af';
}
.bi-border-right::before {
    content: '\f1b0';
}
.bi-border-style::before {
    content: '\f1b1';
}
.bi-border-top::before {
    content: '\f1b2';
}
.bi-border-width::before {
    content: '\f1b3';
}
.bi-border::before {
    content: '\f1b4';
}
.bi-bounding-box-circles::before {
    content: '\f1b5';
}
.bi-bounding-box::before {
    content: '\f1b6';
}
.bi-box-arrow-down-left::before {
    content: '\f1b7';
}
.bi-box-arrow-down-right::before {
    content: '\f1b8';
}
.bi-box-arrow-down::before {
    content: '\f1b9';
}
.bi-box-arrow-in-down-left::before {
    content: '\f1ba';
}
.bi-box-arrow-in-down-right::before {
    content: '\f1bb';
}
.bi-box-arrow-in-down::before {
    content: '\f1bc';
}
.bi-box-arrow-in-left::before {
    content: '\f1bd';
}
.bi-box-arrow-in-right::before {
    content: '\f1be';
}
.bi-box-arrow-in-up-left::before {
    content: '\f1bf';
}
.bi-box-arrow-in-up-right::before {
    content: '\f1c0';
}
.bi-box-arrow-in-up::before {
    content: '\f1c1';
}
.bi-box-arrow-left::before {
    content: '\f1c2';
}
.bi-box-arrow-right::before {
    content: '\f1c3';
}
.bi-box-arrow-up-left::before {
    content: '\f1c4';
}
.bi-box-arrow-up-right::before {
    content: '\f1c5';
}
.bi-box-arrow-up::before {
    content: '\f1c6';
}
.bi-box-seam::before {
    content: '\f1c7';
}
.bi-box::before {
    content: '\f1c8';
}
.bi-braces::before {
    content: '\f1c9';
}
.bi-bricks::before {
    content: '\f1ca';
}
.bi-briefcase-fill::before {
    content: '\f1cb';
}
.bi-briefcase::before {
    content: '\f1cc';
}
.bi-brightness-alt-high-fill::before {
    content: '\f1cd';
}
.bi-brightness-alt-high::before {
    content: '\f1ce';
}
.bi-brightness-alt-low-fill::before {
    content: '\f1cf';
}
.bi-brightness-alt-low::before {
    content: '\f1d0';
}
.bi-brightness-high-fill::before {
    content: '\f1d1';
}
.bi-brightness-high::before {
    content: '\f1d2';
}
.bi-brightness-low-fill::before {
    content: '\f1d3';
}
.bi-brightness-low::before {
    content: '\f1d4';
}
.bi-broadcast-pin::before {
    content: '\f1d5';
}
.bi-broadcast::before {
    content: '\f1d6';
}
.bi-brush-fill::before {
    content: '\f1d7';
}
.bi-brush::before {
    content: '\f1d8';
}
.bi-bucket-fill::before {
    content: '\f1d9';
}
.bi-bucket::before {
    content: '\f1da';
}
.bi-bug-fill::before {
    content: '\f1db';
}
.bi-bug::before {
    content: '\f1dc';
}
.bi-building::before {
    content: '\f1dd';
}
.bi-bullseye::before {
    content: '\f1de';
}
.bi-calculator-fill::before {
    content: '\f1df';
}
.bi-calculator::before {
    content: '\f1e0';
}
.bi-calendar-check-fill::before {
    content: '\f1e1';
}
.bi-calendar-check::before {
    content: '\f1e2';
}
.bi-calendar-date-fill::before {
    content: '\f1e3';
}
.bi-calendar-date::before {
    content: '\f1e4';
}
.bi-calendar-day-fill::before {
    content: '\f1e5';
}
.bi-calendar-day::before {
    content: '\f1e6';
}
.bi-calendar-event-fill::before {
    content: '\f1e7';
}
.bi-calendar-event::before {
    content: '\f1e8';
}
.bi-calendar-fill::before {
    content: '\f1e9';
}
.bi-calendar-minus-fill::before {
    content: '\f1ea';
}
.bi-calendar-minus::before {
    content: '\f1eb';
}
.bi-calendar-month-fill::before {
    content: '\f1ec';
}
.bi-calendar-month::before {
    content: '\f1ed';
}
.bi-calendar-plus-fill::before {
    content: '\f1ee';
}
.bi-calendar-plus::before {
    content: '\f1ef';
}
.bi-calendar-range-fill::before {
    content: '\f1f0';
}
.bi-calendar-range::before {
    content: '\f1f1';
}
.bi-calendar-week-fill::before {
    content: '\f1f2';
}
.bi-calendar-week::before {
    content: '\f1f3';
}
.bi-calendar-x-fill::before {
    content: '\f1f4';
}
.bi-calendar-x::before {
    content: '\f1f5';
}
.bi-calendar::before {
    content: '\f1f6';
}
.bi-calendar2-check-fill::before {
    content: '\f1f7';
}
.bi-calendar2-check::before {
    content: '\f1f8';
}
.bi-calendar2-date-fill::before {
    content: '\f1f9';
}
.bi-calendar2-date::before {
    content: '\f1fa';
}
.bi-calendar2-day-fill::before {
    content: '\f1fb';
}
.bi-calendar2-day::before {
    content: '\f1fc';
}
.bi-calendar2-event-fill::before {
    content: '\f1fd';
}
.bi-calendar2-event::before {
    content: '\f1fe';
}
.bi-calendar2-fill::before {
    content: '\f1ff';
}
.bi-calendar2-minus-fill::before {
    content: '\f200';
}
.bi-calendar2-minus::before {
    content: '\f201';
}
.bi-calendar2-month-fill::before {
    content: '\f202';
}
.bi-calendar2-month::before {
    content: '\f203';
}
.bi-calendar2-plus-fill::before {
    content: '\f204';
}
.bi-calendar2-plus::before {
    content: '\f205';
}
.bi-calendar2-range-fill::before {
    content: '\f206';
}
.bi-calendar2-range::before {
    content: '\f207';
}
.bi-calendar2-week-fill::before {
    content: '\f208';
}
.bi-calendar2-week::before {
    content: '\f209';
}
.bi-calendar2-x-fill::before {
    content: '\f20a';
}
.bi-calendar2-x::before {
    content: '\f20b';
}
.bi-calendar2::before {
    content: '\f20c';
}
.bi-calendar3-event-fill::before {
    content: '\f20d';
}
.bi-calendar3-event::before {
    content: '\f20e';
}
.bi-calendar3-fill::before {
    content: '\f20f';
}
.bi-calendar3-range-fill::before {
    content: '\f210';
}
.bi-calendar3-range::before {
    content: '\f211';
}
.bi-calendar3-week-fill::before {
    content: '\f212';
}
.bi-calendar3-week::before {
    content: '\f213';
}
.bi-calendar3::before {
    content: '\f214';
}
.bi-calendar4-event::before {
    content: '\f215';
}
.bi-calendar4-range::before {
    content: '\f216';
}
.bi-calendar4-week::before {
    content: '\f217';
}
.bi-calendar4::before {
    content: '\f218';
}
.bi-camera-fill::before {
    content: '\f219';
}
.bi-camera-reels-fill::before {
    content: '\f21a';
}
.bi-camera-reels::before {
    content: '\f21b';
}
.bi-camera-video-fill::before {
    content: '\f21c';
}
.bi-camera-video-off-fill::before {
    content: '\f21d';
}
.bi-camera-video-off::before {
    content: '\f21e';
}
.bi-camera-video::before {
    content: '\f21f';
}
.bi-camera::before {
    content: '\f220';
}
.bi-camera2::before {
    content: '\f221';
}
.bi-capslock-fill::before {
    content: '\f222';
}
.bi-capslock::before {
    content: '\f223';
}
.bi-card-checklist::before {
    content: '\f224';
}
.bi-card-heading::before {
    content: '\f225';
}
.bi-card-image::before {
    content: '\f226';
}
.bi-card-list::before {
    content: '\f227';
}
.bi-card-text::before {
    content: '\f228';
}
.bi-caret-down-fill::before {
    content: '\f229';
}
.bi-caret-down-square-fill::before {
    content: '\f22a';
}
.bi-caret-down-square::before {
    content: '\f22b';
}
.bi-caret-down::before {
    content: '\f22c';
}
.bi-caret-left-fill::before {
    content: '\f22d';
}
.bi-caret-left-square-fill::before {
    content: '\f22e';
}
.bi-caret-left-square::before {
    content: '\f22f';
}
.bi-caret-left::before {
    content: '\f230';
}
.bi-caret-right-fill::before {
    content: '\f231';
}
.bi-caret-right-square-fill::before {
    content: '\f232';
}
.bi-caret-right-square::before {
    content: '\f233';
}
.bi-caret-right::before {
    content: '\f234';
}
.bi-caret-up-fill::before {
    content: '\f235';
}
.bi-caret-up-square-fill::before {
    content: '\f236';
}
.bi-caret-up-square::before {
    content: '\f237';
}
.bi-caret-up::before {
    content: '\f238';
}
.bi-cart-check-fill::before {
    content: '\f239';
}
.bi-cart-check::before {
    content: '\f23a';
}
.bi-cart-dash-fill::before {
    content: '\f23b';
}
.bi-cart-dash::before {
    content: '\f23c';
}
.bi-cart-fill::before {
    content: '\f23d';
}
.bi-cart-plus-fill::before {
    content: '\f23e';
}
.bi-cart-plus::before {
    content: '\f23f';
}
.bi-cart-x-fill::before {
    content: '\f240';
}
.bi-cart-x::before {
    content: '\f241';
}
.bi-cart::before {
    content: '\f242';
}
.bi-cart2::before {
    content: '\f243';
}
.bi-cart3::before {
    content: '\f244';
}
.bi-cart4::before {
    content: '\f245';
}
.bi-cash-stack::before {
    content: '\f246';
}
.bi-cash::before {
    content: '\f247';
}
.bi-cast::before {
    content: '\f248';
}
.bi-chat-dots-fill::before {
    content: '\f249';
}
.bi-chat-dots::before {
    content: '\f24a';
}
.bi-chat-fill::before {
    content: '\f24b';
}
.bi-chat-left-dots-fill::before {
    content: '\f24c';
}
.bi-chat-left-dots::before {
    content: '\f24d';
}
.bi-chat-left-fill::before {
    content: '\f24e';
}
.bi-chat-left-quote-fill::before {
    content: '\f24f';
}
.bi-chat-left-quote::before {
    content: '\f250';
}
.bi-chat-left-text-fill::before {
    content: '\f251';
}
.bi-chat-left-text::before {
    content: '\f252';
}
.bi-chat-left::before {
    content: '\f253';
}
.bi-chat-quote-fill::before {
    content: '\f254';
}
.bi-chat-quote::before {
    content: '\f255';
}
.bi-chat-right-dots-fill::before {
    content: '\f256';
}
.bi-chat-right-dots::before {
    content: '\f257';
}
.bi-chat-right-fill::before {
    content: '\f258';
}
.bi-chat-right-quote-fill::before {
    content: '\f259';
}
.bi-chat-right-quote::before {
    content: '\f25a';
}
.bi-chat-right-text-fill::before {
    content: '\f25b';
}
.bi-chat-right-text::before {
    content: '\f25c';
}
.bi-chat-right::before {
    content: '\f25d';
}
.bi-chat-square-dots-fill::before {
    content: '\f25e';
}
.bi-chat-square-dots::before {
    content: '\f25f';
}
.bi-chat-square-fill::before {
    content: '\f260';
}
.bi-chat-square-quote-fill::before {
    content: '\f261';
}
.bi-chat-square-quote::before {
    content: '\f262';
}
.bi-chat-square-text-fill::before {
    content: '\f263';
}
.bi-chat-square-text::before {
    content: '\f264';
}
.bi-chat-square::before {
    content: '\f265';
}
.bi-chat-text-fill::before {
    content: '\f266';
}
.bi-chat-text::before {
    content: '\f267';
}
.bi-chat::before {
    content: '\f268';
}
.bi-check-all::before {
    content: '\f269';
}
.bi-check-circle-fill::before {
    content: '\f26a';
}
.bi-check-circle::before {
    content: '\f26b';
}
.bi-check-square-fill::before {
    content: '\f26c';
}
.bi-check-square::before {
    content: '\f26d';
}
.bi-check::before {
    content: '\f26e';
}
.bi-check2-all::before {
    content: '\f26f';
}
.bi-check2-circle::before {
    content: '\f270';
}
.bi-check2-square::before {
    content: '\f271';
}
.bi-check2::before {
    content: '\f272';
}
.bi-chevron-bar-contract::before {
    content: '\f273';
}
.bi-chevron-bar-down::before {
    content: '\f274';
}
.bi-chevron-bar-expand::before {
    content: '\f275';
}
.bi-chevron-bar-left::before {
    content: '\f276';
}
.bi-chevron-bar-right::before {
    content: '\f277';
}
.bi-chevron-bar-up::before {
    content: '\f278';
}
.bi-chevron-compact-down::before {
    content: '\f279';
}
.bi-chevron-compact-left::before {
    content: '\f27a';
}
.bi-chevron-compact-right::before {
    content: '\f27b';
}
.bi-chevron-compact-up::before {
    content: '\f27c';
}
.bi-chevron-contract::before {
    content: '\f27d';
}
.bi-chevron-double-down::before {
    content: '\f27e';
}
.bi-chevron-double-left::before {
    content: '\f27f';
}
.bi-chevron-double-right::before {
    content: '\f280';
}
.bi-chevron-double-up::before {
    content: '\f281';
}
.bi-chevron-down::before {
    content: '\f282';
}
.bi-chevron-expand::before {
    content: '\f283';
}
.bi-chevron-left::before {
    content: '\f284';
}
.bi-chevron-right::before {
    content: '\f285';
}
.bi-chevron-up::before {
    content: '\f286';
}
.bi-circle-fill::before {
    content: '\f287';
}
.bi-circle-half::before {
    content: '\f288';
}
.bi-circle-square::before {
    content: '\f289';
}
.bi-circle::before {
    content: '\f28a';
}
.bi-clipboard-check::before {
    content: '\f28b';
}
.bi-clipboard-data::before {
    content: '\f28c';
}
.bi-clipboard-minus::before {
    content: '\f28d';
}
.bi-clipboard-plus::before {
    content: '\f28e';
}
.bi-clipboard-x::before {
    content: '\f28f';
}
.bi-clipboard::before {
    content: '\f290';
}
.bi-clock-fill::before {
    content: '\f291';
}
.bi-clock-history::before {
    content: '\f292';
}
.bi-clock::before {
    content: '\f293';
}
.bi-cloud-arrow-down-fill::before {
    content: '\f294';
}
.bi-cloud-arrow-down::before {
    content: '\f295';
}
.bi-cloud-arrow-up-fill::before {
    content: '\f296';
}
.bi-cloud-arrow-up::before {
    content: '\f297';
}
.bi-cloud-check-fill::before {
    content: '\f298';
}
.bi-cloud-check::before {
    content: '\f299';
}
.bi-cloud-download-fill::before {
    content: '\f29a';
}
.bi-cloud-download::before {
    content: '\f29b';
}
.bi-cloud-drizzle-fill::before {
    content: '\f29c';
}
.bi-cloud-drizzle::before {
    content: '\f29d';
}
.bi-cloud-fill::before {
    content: '\f29e';
}
.bi-cloud-fog-fill::before {
    content: '\f29f';
}
.bi-cloud-fog::before {
    content: '\f2a0';
}
.bi-cloud-fog2-fill::before {
    content: '\f2a1';
}
.bi-cloud-fog2::before {
    content: '\f2a2';
}
.bi-cloud-hail-fill::before {
    content: '\f2a3';
}
.bi-cloud-hail::before {
    content: '\f2a4';
}
.bi-cloud-haze-fill::before {
    content: '\f2a6';
}
.bi-cloud-haze::before {
    content: '\f2a7';
}
.bi-cloud-haze2-fill::before {
    content: '\f2a8';
}
.bi-cloud-lightning-fill::before {
    content: '\f2a9';
}
.bi-cloud-lightning-rain-fill::before {
    content: '\f2aa';
}
.bi-cloud-lightning-rain::before {
    content: '\f2ab';
}
.bi-cloud-lightning::before {
    content: '\f2ac';
}
.bi-cloud-minus-fill::before {
    content: '\f2ad';
}
.bi-cloud-minus::before {
    content: '\f2ae';
}
.bi-cloud-moon-fill::before {
    content: '\f2af';
}
.bi-cloud-moon::before {
    content: '\f2b0';
}
.bi-cloud-plus-fill::before {
    content: '\f2b1';
}
.bi-cloud-plus::before {
    content: '\f2b2';
}
.bi-cloud-rain-fill::before {
    content: '\f2b3';
}
.bi-cloud-rain-heavy-fill::before {
    content: '\f2b4';
}
.bi-cloud-rain-heavy::before {
    content: '\f2b5';
}
.bi-cloud-rain::before {
    content: '\f2b6';
}
.bi-cloud-slash-fill::before {
    content: '\f2b7';
}
.bi-cloud-slash::before {
    content: '\f2b8';
}
.bi-cloud-sleet-fill::before {
    content: '\f2b9';
}
.bi-cloud-sleet::before {
    content: '\f2ba';
}
.bi-cloud-snow-fill::before {
    content: '\f2bb';
}
.bi-cloud-snow::before {
    content: '\f2bc';
}
.bi-cloud-sun-fill::before {
    content: '\f2bd';
}
.bi-cloud-sun::before {
    content: '\f2be';
}
.bi-cloud-upload-fill::before {
    content: '\f2bf';
}
.bi-cloud-upload::before {
    content: '\f2c0';
}
.bi-cloud::before {
    content: '\f2c1';
}
.bi-clouds-fill::before {
    content: '\f2c2';
}
.bi-clouds::before {
    content: '\f2c3';
}
.bi-cloudy-fill::before {
    content: '\f2c4';
}
.bi-cloudy::before {
    content: '\f2c5';
}
.bi-code-slash::before {
    content: '\f2c6';
}
.bi-code-square::before {
    content: '\f2c7';
}
.bi-code::before {
    content: '\f2c8';
}
.bi-collection-fill::before {
    content: '\f2c9';
}
.bi-collection-play-fill::before {
    content: '\f2ca';
}
.bi-collection-play::before {
    content: '\f2cb';
}
.bi-collection::before {
    content: '\f2cc';
}
.bi-columns-gap::before {
    content: '\f2cd';
}
.bi-columns::before {
    content: '\f2ce';
}
.bi-command::before {
    content: '\f2cf';
}
.bi-compass-fill::before {
    content: '\f2d0';
}
.bi-compass::before {
    content: '\f2d1';
}
.bi-cone-striped::before {
    content: '\f2d2';
}
.bi-cone::before {
    content: '\f2d3';
}
.bi-controller::before {
    content: '\f2d4';
}
.bi-cpu-fill::before {
    content: '\f2d5';
}
.bi-cpu::before {
    content: '\f2d6';
}
.bi-credit-card-2-back-fill::before {
    content: '\f2d7';
}
.bi-credit-card-2-back::before {
    content: '\f2d8';
}
.bi-credit-card-2-front-fill::before {
    content: '\f2d9';
}
.bi-credit-card-2-front::before {
    content: '\f2da';
}
.bi-credit-card-fill::before {
    content: '\f2db';
}
.bi-credit-card::before {
    content: '\f2dc';
}
.bi-crop::before {
    content: '\f2dd';
}
.bi-cup-fill::before {
    content: '\f2de';
}
.bi-cup-straw::before {
    content: '\f2df';
}
.bi-cup::before {
    content: '\f2e0';
}
.bi-cursor-fill::before {
    content: '\f2e1';
}
.bi-cursor-text::before {
    content: '\f2e2';
}
.bi-cursor::before {
    content: '\f2e3';
}
.bi-dash-circle-dotted::before {
    content: '\f2e4';
}
.bi-dash-circle-fill::before {
    content: '\f2e5';
}
.bi-dash-circle::before {
    content: '\f2e6';
}
.bi-dash-square-dotted::before {
    content: '\f2e7';
}
.bi-dash-square-fill::before {
    content: '\f2e8';
}
.bi-dash-square::before {
    content: '\f2e9';
}
.bi-dash::before {
    content: '\f2ea';
}
.bi-diagram-2-fill::before {
    content: '\f2eb';
}
.bi-diagram-2::before {
    content: '\f2ec';
}
.bi-diagram-3-fill::before {
    content: '\f2ed';
}
.bi-diagram-3::before {
    content: '\f2ee';
}
.bi-diamond-fill::before {
    content: '\f2ef';
}
.bi-diamond-half::before {
    content: '\f2f0';
}
.bi-diamond::before {
    content: '\f2f1';
}
.bi-dice-1-fill::before {
    content: '\f2f2';
}
.bi-dice-1::before {
    content: '\f2f3';
}
.bi-dice-2-fill::before {
    content: '\f2f4';
}
.bi-dice-2::before {
    content: '\f2f5';
}
.bi-dice-3-fill::before {
    content: '\f2f6';
}
.bi-dice-3::before {
    content: '\f2f7';
}
.bi-dice-4-fill::before {
    content: '\f2f8';
}
.bi-dice-4::before {
    content: '\f2f9';
}
.bi-dice-5-fill::before {
    content: '\f2fa';
}
.bi-dice-5::before {
    content: '\f2fb';
}
.bi-dice-6-fill::before {
    content: '\f2fc';
}
.bi-dice-6::before {
    content: '\f2fd';
}
.bi-disc-fill::before {
    content: '\f2fe';
}
.bi-disc::before {
    content: '\f2ff';
}
.bi-discord::before {
    content: '\f300';
}
.bi-display-fill::before {
    content: '\f301';
}
.bi-display::before {
    content: '\f302';
}
.bi-distribute-horizontal::before {
    content: '\f303';
}
.bi-distribute-vertical::before {
    content: '\f304';
}
.bi-door-closed-fill::before {
    content: '\f305';
}
.bi-door-closed::before {
    content: '\f306';
}
.bi-door-open-fill::before {
    content: '\f307';
}
.bi-door-open::before {
    content: '\f308';
}
.bi-dot::before {
    content: '\f309';
}
.bi-download::before {
    content: '\f30a';
}
.bi-droplet-fill::before {
    content: '\f30b';
}
.bi-droplet-half::before {
    content: '\f30c';
}
.bi-droplet::before {
    content: '\f30d';
}
.bi-earbuds::before {
    content: '\f30e';
}
.bi-easel-fill::before {
    content: '\f30f';
}
.bi-easel::before {
    content: '\f310';
}
.bi-egg-fill::before {
    content: '\f311';
}
.bi-egg-fried::before {
    content: '\f312';
}
.bi-egg::before {
    content: '\f313';
}
.bi-eject-fill::before {
    content: '\f314';
}
.bi-eject::before {
    content: '\f315';
}
.bi-emoji-angry-fill::before {
    content: '\f316';
}
.bi-emoji-angry::before {
    content: '\f317';
}
.bi-emoji-dizzy-fill::before {
    content: '\f318';
}
.bi-emoji-dizzy::before {
    content: '\f319';
}
.bi-emoji-expressionless-fill::before {
    content: '\f31a';
}
.bi-emoji-expressionless::before {
    content: '\f31b';
}
.bi-emoji-frown-fill::before {
    content: '\f31c';
}
.bi-emoji-frown::before {
    content: '\f31d';
}
.bi-emoji-heart-eyes-fill::before {
    content: '\f31e';
}
.bi-emoji-heart-eyes::before {
    content: '\f31f';
}
.bi-emoji-laughing-fill::before {
    content: '\f320';
}
.bi-emoji-laughing::before {
    content: '\f321';
}
.bi-emoji-neutral-fill::before {
    content: '\f322';
}
.bi-emoji-neutral::before {
    content: '\f323';
}
.bi-emoji-smile-fill::before {
    content: '\f324';
}
.bi-emoji-smile-upside-down-fill::before {
    content: '\f325';
}
.bi-emoji-smile-upside-down::before {
    content: '\f326';
}
.bi-emoji-smile::before {
    content: '\f327';
}
.bi-emoji-sunglasses-fill::before {
    content: '\f328';
}
.bi-emoji-sunglasses::before {
    content: '\f329';
}
.bi-emoji-wink-fill::before {
    content: '\f32a';
}
.bi-emoji-wink::before {
    content: '\f32b';
}
.bi-envelope-fill::before {
    content: '\f32c';
}
.bi-envelope-open-fill::before {
    content: '\f32d';
}
.bi-envelope-open::before {
    content: '\f32e';
}
.bi-envelope::before {
    content: '\f32f';
}
.bi-eraser-fill::before {
    content: '\f330';
}
.bi-eraser::before {
    content: '\f331';
}
.bi-exclamation-circle-fill::before {
    content: '\f332';
}
.bi-exclamation-circle::before {
    content: '\f333';
}
.bi-exclamation-diamond-fill::before {
    content: '\f334';
}
.bi-exclamation-diamond::before {
    content: '\f335';
}
.bi-exclamation-octagon-fill::before {
    content: '\f336';
}
.bi-exclamation-octagon::before {
    content: '\f337';
}
.bi-exclamation-square-fill::before {
    content: '\f338';
}
.bi-exclamation-square::before {
    content: '\f339';
}
.bi-exclamation-triangle-fill::before {
    content: '\f33a';
}
.bi-exclamation-triangle::before {
    content: '\f33b';
}
.bi-exclamation::before {
    content: '\f33c';
}
.bi-exclude::before {
    content: '\f33d';
}
.bi-eye-fill::before {
    content: '\f33e';
}
.bi-eye-slash-fill::before {
    content: '\f33f';
}
.bi-eye-slash::before {
    content: '\f340';
}
.bi-eye::before {
    content: '\f341';
}
.bi-eyedropper::before {
    content: '\f342';
}
.bi-eyeglasses::before {
    content: '\f343';
}
.bi-facebook::before {
    content: '\f344';
}
.bi-file-arrow-down-fill::before {
    content: '\f345';
}
.bi-file-arrow-down::before {
    content: '\f346';
}
.bi-file-arrow-up-fill::before {
    content: '\f347';
}
.bi-file-arrow-up::before {
    content: '\f348';
}
.bi-file-bar-graph-fill::before {
    content: '\f349';
}
.bi-file-bar-graph::before {
    content: '\f34a';
}
.bi-file-binary-fill::before {
    content: '\f34b';
}
.bi-file-binary::before {
    content: '\f34c';
}
.bi-file-break-fill::before {
    content: '\f34d';
}
.bi-file-break::before {
    content: '\f34e';
}
.bi-file-check-fill::before {
    content: '\f34f';
}
.bi-file-check::before {
    content: '\f350';
}
.bi-file-code-fill::before {
    content: '\f351';
}
.bi-file-code::before {
    content: '\f352';
}
.bi-file-diff-fill::before {
    content: '\f353';
}
.bi-file-diff::before {
    content: '\f354';
}
.bi-file-earmark-arrow-down-fill::before {
    content: '\f355';
}
.bi-file-earmark-arrow-down::before {
    content: '\f356';
}
.bi-file-earmark-arrow-up-fill::before {
    content: '\f357';
}
.bi-file-earmark-arrow-up::before {
    content: '\f358';
}
.bi-file-earmark-bar-graph-fill::before {
    content: '\f359';
}
.bi-file-earmark-bar-graph::before {
    content: '\f35a';
}
.bi-file-earmark-binary-fill::before {
    content: '\f35b';
}
.bi-file-earmark-binary::before {
    content: '\f35c';
}
.bi-file-earmark-break-fill::before {
    content: '\f35d';
}
.bi-file-earmark-break::before {
    content: '\f35e';
}
.bi-file-earmark-check-fill::before {
    content: '\f35f';
}
.bi-file-earmark-check::before {
    content: '\f360';
}
.bi-file-earmark-code-fill::before {
    content: '\f361';
}
.bi-file-earmark-code::before {
    content: '\f362';
}
.bi-file-earmark-diff-fill::before {
    content: '\f363';
}
.bi-file-earmark-diff::before {
    content: '\f364';
}
.bi-file-earmark-easel-fill::before {
    content: '\f365';
}
.bi-file-earmark-easel::before {
    content: '\f366';
}
.bi-file-earmark-excel-fill::before {
    content: '\f367';
}
.bi-file-earmark-excel::before {
    content: '\f368';
}
.bi-file-earmark-fill::before {
    content: '\f369';
}
.bi-file-earmark-font-fill::before {
    content: '\f36a';
}
.bi-file-earmark-font::before {
    content: '\f36b';
}
.bi-file-earmark-image-fill::before {
    content: '\f36c';
}
.bi-file-earmark-image::before {
    content: '\f36d';
}
.bi-file-earmark-lock-fill::before {
    content: '\f36e';
}
.bi-file-earmark-lock::before {
    content: '\f36f';
}
.bi-file-earmark-lock2-fill::before {
    content: '\f370';
}
.bi-file-earmark-lock2::before {
    content: '\f371';
}
.bi-file-earmark-medical-fill::before {
    content: '\f372';
}
.bi-file-earmark-medical::before {
    content: '\f373';
}
.bi-file-earmark-minus-fill::before {
    content: '\f374';
}
.bi-file-earmark-minus::before {
    content: '\f375';
}
.bi-file-earmark-music-fill::before {
    content: '\f376';
}
.bi-file-earmark-music::before {
    content: '\f377';
}
.bi-file-earmark-person-fill::before {
    content: '\f378';
}
.bi-file-earmark-person::before {
    content: '\f379';
}
.bi-file-earmark-play-fill::before {
    content: '\f37a';
}
.bi-file-earmark-play::before {
    content: '\f37b';
}
.bi-file-earmark-plus-fill::before {
    content: '\f37c';
}
.bi-file-earmark-plus::before {
    content: '\f37d';
}
.bi-file-earmark-post-fill::before {
    content: '\f37e';
}
.bi-file-earmark-post::before {
    content: '\f37f';
}
.bi-file-earmark-ppt-fill::before {
    content: '\f380';
}
.bi-file-earmark-ppt::before {
    content: '\f381';
}
.bi-file-earmark-richtext-fill::before {
    content: '\f382';
}
.bi-file-earmark-richtext::before {
    content: '\f383';
}
.bi-file-earmark-ruled-fill::before {
    content: '\f384';
}
.bi-file-earmark-ruled::before {
    content: '\f385';
}
.bi-file-earmark-slides-fill::before {
    content: '\f386';
}
.bi-file-earmark-slides::before {
    content: '\f387';
}
.bi-file-earmark-spreadsheet-fill::before {
    content: '\f388';
}
.bi-file-earmark-spreadsheet::before {
    content: '\f389';
}
.bi-file-earmark-text-fill::before {
    content: '\f38a';
}
.bi-file-earmark-text::before {
    content: '\f38b';
}
.bi-file-earmark-word-fill::before {
    content: '\f38c';
}
.bi-file-earmark-word::before {
    content: '\f38d';
}
.bi-file-earmark-x-fill::before {
    content: '\f38e';
}
.bi-file-earmark-x::before {
    content: '\f38f';
}
.bi-file-earmark-zip-fill::before {
    content: '\f390';
}
.bi-file-earmark-zip::before {
    content: '\f391';
}
.bi-file-earmark::before {
    content: '\f392';
}
.bi-file-easel-fill::before {
    content: '\f393';
}
.bi-file-easel::before {
    content: '\f394';
}
.bi-file-excel-fill::before {
    content: '\f395';
}
.bi-file-excel::before {
    content: '\f396';
}
.bi-file-fill::before {
    content: '\f397';
}
.bi-file-font-fill::before {
    content: '\f398';
}
.bi-file-font::before {
    content: '\f399';
}
.bi-file-image-fill::before {
    content: '\f39a';
}
.bi-file-image::before {
    content: '\f39b';
}
.bi-file-lock-fill::before {
    content: '\f39c';
}
.bi-file-lock::before {
    content: '\f39d';
}
.bi-file-lock2-fill::before {
    content: '\f39e';
}
.bi-file-lock2::before {
    content: '\f39f';
}
.bi-file-medical-fill::before {
    content: '\f3a0';
}
.bi-file-medical::before {
    content: '\f3a1';
}
.bi-file-minus-fill::before {
    content: '\f3a2';
}
.bi-file-minus::before {
    content: '\f3a3';
}
.bi-file-music-fill::before {
    content: '\f3a4';
}
.bi-file-music::before {
    content: '\f3a5';
}
.bi-file-person-fill::before {
    content: '\f3a6';
}
.bi-file-person::before {
    content: '\f3a7';
}
.bi-file-play-fill::before {
    content: '\f3a8';
}
.bi-file-play::before {
    content: '\f3a9';
}
.bi-file-plus-fill::before {
    content: '\f3aa';
}
.bi-file-plus::before {
    content: '\f3ab';
}
.bi-file-post-fill::before {
    content: '\f3ac';
}
.bi-file-post::before {
    content: '\f3ad';
}
.bi-file-ppt-fill::before {
    content: '\f3ae';
}
.bi-file-ppt::before {
    content: '\f3af';
}
.bi-file-richtext-fill::before {
    content: '\f3b0';
}
.bi-file-richtext::before {
    content: '\f3b1';
}
.bi-file-ruled-fill::before {
    content: '\f3b2';
}
.bi-file-ruled::before {
    content: '\f3b3';
}
.bi-file-slides-fill::before {
    content: '\f3b4';
}
.bi-file-slides::before {
    content: '\f3b5';
}
.bi-file-spreadsheet-fill::before {
    content: '\f3b6';
}
.bi-file-spreadsheet::before {
    content: '\f3b7';
}
.bi-file-text-fill::before {
    content: '\f3b8';
}
.bi-file-text::before {
    content: '\f3b9';
}
.bi-file-word-fill::before {
    content: '\f3ba';
}
.bi-file-word::before {
    content: '\f3bb';
}
.bi-file-x-fill::before {
    content: '\f3bc';
}
.bi-file-x::before {
    content: '\f3bd';
}
.bi-file-zip-fill::before {
    content: '\f3be';
}
.bi-file-zip::before {
    content: '\f3bf';
}
.bi-file::before {
    content: '\f3c0';
}
.bi-files-alt::before {
    content: '\f3c1';
}
.bi-files::before {
    content: '\f3c2';
}
.bi-film::before {
    content: '\f3c3';
}
.bi-filter-circle-fill::before {
    content: '\f3c4';
}
.bi-filter-circle::before {
    content: '\f3c5';
}
.bi-filter-left::before {
    content: '\f3c6';
}
.bi-filter-right::before {
    content: '\f3c7';
}
.bi-filter-square-fill::before {
    content: '\f3c8';
}
.bi-filter-square::before {
    content: '\f3c9';
}
.bi-filter::before {
    content: '\f3ca';
}
.bi-flag-fill::before {
    content: '\f3cb';
}
.bi-flag::before {
    content: '\f3cc';
}
.bi-flower1::before {
    content: '\f3cd';
}
.bi-flower2::before {
    content: '\f3ce';
}
.bi-flower3::before {
    content: '\f3cf';
}
.bi-folder-check::before {
    content: '\f3d0';
}
.bi-folder-fill::before {
    content: '\f3d1';
}
.bi-folder-minus::before {
    content: '\f3d2';
}
.bi-folder-plus::before {
    content: '\f3d3';
}
.bi-folder-symlink-fill::before {
    content: '\f3d4';
}
.bi-folder-symlink::before {
    content: '\f3d5';
}
.bi-folder-x::before {
    content: '\f3d6';
}
.bi-folder::before {
    content: '\f3d7';
}
.bi-folder2-open::before {
    content: '\f3d8';
}
.bi-folder2::before {
    content: '\f3d9';
}
.bi-fonts::before {
    content: '\f3da';
}
.bi-forward-fill::before {
    content: '\f3db';
}
.bi-forward::before {
    content: '\f3dc';
}
.bi-front::before {
    content: '\f3dd';
}
.bi-fullscreen-exit::before {
    content: '\f3de';
}
.bi-fullscreen::before {
    content: '\f3df';
}
.bi-funnel-fill::before {
    content: '\f3e0';
}
.bi-funnel::before {
    content: '\f3e1';
}
.bi-gear-fill::before {
    content: '\f3e2';
}
.bi-gear-wide-connected::before {
    content: '\f3e3';
}
.bi-gear-wide::before {
    content: '\f3e4';
}
.bi-gear::before {
    content: '\f3e5';
}
.bi-gem::before {
    content: '\f3e6';
}
.bi-geo-alt-fill::before {
    content: '\f3e7';
}
.bi-geo-alt::before {
    content: '\f3e8';
}
.bi-geo-fill::before {
    content: '\f3e9';
}
.bi-geo::before {
    content: '\f3ea';
}
.bi-gift-fill::before {
    content: '\f3eb';
}
.bi-gift::before {
    content: '\f3ec';
}
.bi-github::before {
    content: '\f3ed';
}
.bi-globe::before {
    content: '\f3ee';
}
.bi-globe2::before {
    content: '\f3ef';
}
.bi-google::before {
    content: '\f3f0';
}
.bi-graph-down::before {
    content: '\f3f1';
}
.bi-graph-up::before {
    content: '\f3f2';
}
.bi-grid-1x2-fill::before {
    content: '\f3f3';
}
.bi-grid-1x2::before {
    content: '\f3f4';
}
.bi-grid-3x2-gap-fill::before {
    content: '\f3f5';
}
.bi-grid-3x2-gap::before {
    content: '\f3f6';
}
.bi-grid-3x2::before {
    content: '\f3f7';
}
.bi-grid-3x3-gap-fill::before {
    content: '\f3f8';
}
.bi-grid-3x3-gap::before {
    content: '\f3f9';
}
.bi-grid-3x3::before {
    content: '\f3fa';
}
.bi-grid-fill::before {
    content: '\f3fb';
}
.bi-grid::before {
    content: '\f3fc';
}
.bi-grip-horizontal::before {
    content: '\f3fd';
}
.bi-grip-vertical::before {
    content: '\f3fe';
}
.bi-hammer::before {
    content: '\f3ff';
}
.bi-hand-index-fill::before {
    content: '\f400';
}
.bi-hand-index-thumb-fill::before {
    content: '\f401';
}
.bi-hand-index-thumb::before {
    content: '\f402';
}
.bi-hand-index::before {
    content: '\f403';
}
.bi-hand-thumbs-down-fill::before {
    content: '\f404';
}
.bi-hand-thumbs-down::before {
    content: '\f405';
}
.bi-hand-thumbs-up-fill::before {
    content: '\f406';
}
.bi-hand-thumbs-up::before {
    content: '\f407';
}
.bi-handbag-fill::before {
    content: '\f408';
}
.bi-handbag::before {
    content: '\f409';
}
.bi-hash::before {
    content: '\f40a';
}
.bi-hdd-fill::before {
    content: '\f40b';
}
.bi-hdd-network-fill::before {
    content: '\f40c';
}
.bi-hdd-network::before {
    content: '\f40d';
}
.bi-hdd-rack-fill::before {
    content: '\f40e';
}
.bi-hdd-rack::before {
    content: '\f40f';
}
.bi-hdd-stack-fill::before {
    content: '\f410';
}
.bi-hdd-stack::before {
    content: '\f411';
}
.bi-hdd::before {
    content: '\f412';
}
.bi-headphones::before {
    content: '\f413';
}
.bi-headset::before {
    content: '\f414';
}
.bi-heart-fill::before {
    content: '\f415';
}
.bi-heart-half::before {
    content: '\f416';
}
.bi-heart::before {
    content: '\f417';
}
.bi-heptagon-fill::before {
    content: '\f418';
}
.bi-heptagon-half::before {
    content: '\f419';
}
.bi-heptagon::before {
    content: '\f41a';
}
.bi-hexagon-fill::before {
    content: '\f41b';
}
.bi-hexagon-half::before {
    content: '\f41c';
}
.bi-hexagon::before {
    content: '\f41d';
}
.bi-hourglass-bottom::before {
    content: '\f41e';
}
.bi-hourglass-split::before {
    content: '\f41f';
}
.bi-hourglass-top::before {
    content: '\f420';
}
.bi-hourglass::before {
    content: '\f421';
}
.bi-house-door-fill::before {
    content: '\f422';
}
.bi-house-door::before {
    content: '\f423';
}
.bi-house-fill::before {
    content: '\f424';
}
.bi-house::before {
    content: '\f425';
}
.bi-hr::before {
    content: '\f426';
}
.bi-hurricane::before {
    content: '\f427';
}
.bi-image-alt::before {
    content: '\f428';
}
.bi-image-fill::before {
    content: '\f429';
}
.bi-image::before {
    content: '\f42a';
}
.bi-images::before {
    content: '\f42b';
}
.bi-inbox-fill::before {
    content: '\f42c';
}
.bi-inbox::before {
    content: '\f42d';
}
.bi-inboxes-fill::before {
    content: '\f42e';
}
.bi-inboxes::before {
    content: '\f42f';
}
.bi-info-circle-fill::before {
    content: '\f430';
}
.bi-info-circle::before {
    content: '\f431';
}
.bi-info-square-fill::before {
    content: '\f432';
}
.bi-info-square::before {
    content: '\f433';
}
.bi-info::before {
    content: '\f434';
}
.bi-input-cursor-text::before {
    content: '\f435';
}
.bi-input-cursor::before {
    content: '\f436';
}
.bi-instagram::before {
    content: '\f437';
}
.bi-intersect::before {
    content: '\f438';
}
.bi-journal-album::before {
    content: '\f439';
}
.bi-journal-arrow-down::before {
    content: '\f43a';
}
.bi-journal-arrow-up::before {
    content: '\f43b';
}
.bi-journal-bookmark-fill::before {
    content: '\f43c';
}
.bi-journal-bookmark::before {
    content: '\f43d';
}
.bi-journal-check::before {
    content: '\f43e';
}
.bi-journal-code::before {
    content: '\f43f';
}
.bi-journal-medical::before {
    content: '\f440';
}
.bi-journal-minus::before {
    content: '\f441';
}
.bi-journal-plus::before {
    content: '\f442';
}
.bi-journal-richtext::before {
    content: '\f443';
}
.bi-journal-text::before {
    content: '\f444';
}
.bi-journal-x::before {
    content: '\f445';
}
.bi-journal::before {
    content: '\f446';
}
.bi-journals::before {
    content: '\f447';
}
.bi-joystick::before {
    content: '\f448';
}
.bi-justify-left::before {
    content: '\f449';
}
.bi-justify-right::before {
    content: '\f44a';
}
.bi-justify::before {
    content: '\f44b';
}
.bi-kanban-fill::before {
    content: '\f44c';
}
.bi-kanban::before {
    content: '\f44d';
}
.bi-key-fill::before {
    content: '\f44e';
}
.bi-key::before {
    content: '\f44f';
}
.bi-keyboard-fill::before {
    content: '\f450';
}
.bi-keyboard::before {
    content: '\f451';
}
.bi-ladder::before {
    content: '\f452';
}
.bi-lamp-fill::before {
    content: '\f453';
}
.bi-lamp::before {
    content: '\f454';
}
.bi-laptop-fill::before {
    content: '\f455';
}
.bi-laptop::before {
    content: '\f456';
}
.bi-layer-backward::before {
    content: '\f457';
}
.bi-layer-forward::before {
    content: '\f458';
}
.bi-layers-fill::before {
    content: '\f459';
}
.bi-layers-half::before {
    content: '\f45a';
}
.bi-layers::before {
    content: '\f45b';
}
.bi-layout-sidebar-inset-reverse::before {
    content: '\f45c';
}
.bi-layout-sidebar-inset::before {
    content: '\f45d';
}
.bi-layout-sidebar-reverse::before {
    content: '\f45e';
}
.bi-layout-sidebar::before {
    content: '\f45f';
}
.bi-layout-split::before {
    content: '\f460';
}
.bi-layout-text-sidebar-reverse::before {
    content: '\f461';
}
.bi-layout-text-sidebar::before {
    content: '\f462';
}
.bi-layout-text-window-reverse::before {
    content: '\f463';
}
.bi-layout-text-window::before {
    content: '\f464';
}
.bi-layout-three-columns::before {
    content: '\f465';
}
.bi-layout-wtf::before {
    content: '\f466';
}
.bi-life-preserver::before {
    content: '\f467';
}
.bi-lightbulb-fill::before {
    content: '\f468';
}
.bi-lightbulb-off-fill::before {
    content: '\f469';
}
.bi-lightbulb-off::before {
    content: '\f46a';
}
.bi-lightbulb::before {
    content: '\f46b';
}
.bi-lightning-charge-fill::before {
    content: '\f46c';
}
.bi-lightning-charge::before {
    content: '\f46d';
}
.bi-lightning-fill::before {
    content: '\f46e';
}
.bi-lightning::before {
    content: '\f46f';
}
.bi-link-45deg::before {
    content: '\f470';
}
.bi-link::before {
    content: '\f471';
}
.bi-linkedin::before {
    content: '\f472';
}
.bi-list-check::before {
    content: '\f473';
}
.bi-list-nested::before {
    content: '\f474';
}
.bi-list-ol::before {
    content: '\f475';
}
.bi-list-stars::before {
    content: '\f476';
}
.bi-list-task::before {
    content: '\f477';
}
.bi-list-ul::before {
    content: '\f478';
}
.bi-list::before {
    content: '\f479';
}
.bi-lock-fill::before {
    content: '\f47a';
}
.bi-lock::before {
    content: '\f47b';
}
.bi-mailbox::before {
    content: '\f47c';
}
.bi-mailbox2::before {
    content: '\f47d';
}
.bi-map-fill::before {
    content: '\f47e';
}
.bi-map::before {
    content: '\f47f';
}
.bi-markdown-fill::before {
    content: '\f480';
}
.bi-markdown::before {
    content: '\f481';
}
.bi-mask::before {
    content: '\f482';
}
.bi-megaphone-fill::before {
    content: '\f483';
}
.bi-megaphone::before {
    content: '\f484';
}
.bi-menu-app-fill::before {
    content: '\f485';
}
.bi-menu-app::before {
    content: '\f486';
}
.bi-menu-button-fill::before {
    content: '\f487';
}
.bi-menu-button-wide-fill::before {
    content: '\f488';
}
.bi-menu-button-wide::before {
    content: '\f489';
}
.bi-menu-button::before {
    content: '\f48a';
}
.bi-menu-down::before {
    content: '\f48b';
}
.bi-menu-up::before {
    content: '\f48c';
}
.bi-mic-fill::before {
    content: '\f48d';
}
.bi-mic-mute-fill::before {
    content: '\f48e';
}
.bi-mic-mute::before {
    content: '\f48f';
}
.bi-mic::before {
    content: '\f490';
}
.bi-minecart-loaded::before {
    content: '\f491';
}
.bi-minecart::before {
    content: '\f492';
}
.bi-moisture::before {
    content: '\f493';
}
.bi-moon-fill::before {
    content: '\f494';
}
.bi-moon-stars-fill::before {
    content: '\f495';
}
.bi-moon-stars::before {
    content: '\f496';
}
.bi-moon::before {
    content: '\f497';
}
.bi-mouse-fill::before {
    content: '\f498';
}
.bi-mouse::before {
    content: '\f499';
}
.bi-mouse2-fill::before {
    content: '\f49a';
}
.bi-mouse2::before {
    content: '\f49b';
}
.bi-mouse3-fill::before {
    content: '\f49c';
}
.bi-mouse3::before {
    content: '\f49d';
}
.bi-music-note-beamed::before {
    content: '\f49e';
}
.bi-music-note-list::before {
    content: '\f49f';
}
.bi-music-note::before {
    content: '\f4a0';
}
.bi-music-player-fill::before {
    content: '\f4a1';
}
.bi-music-player::before {
    content: '\f4a2';
}
.bi-newspaper::before {
    content: '\f4a3';
}
.bi-node-minus-fill::before {
    content: '\f4a4';
}
.bi-node-minus::before {
    content: '\f4a5';
}
.bi-node-plus-fill::before {
    content: '\f4a6';
}
.bi-node-plus::before {
    content: '\f4a7';
}
.bi-nut-fill::before {
    content: '\f4a8';
}
.bi-nut::before {
    content: '\f4a9';
}
.bi-octagon-fill::before {
    content: '\f4aa';
}
.bi-octagon-half::before {
    content: '\f4ab';
}
.bi-octagon::before {
    content: '\f4ac';
}
.bi-option::before {
    content: '\f4ad';
}
.bi-outlet::before {
    content: '\f4ae';
}
.bi-paint-bucket::before {
    content: '\f4af';
}
.bi-palette-fill::before {
    content: '\f4b0';
}
.bi-palette::before {
    content: '\f4b1';
}
.bi-palette2::before {
    content: '\f4b2';
}
.bi-paperclip::before {
    content: '\f4b3';
}
.bi-paragraph::before {
    content: '\f4b4';
}
.bi-patch-check-fill::before {
    content: '\f4b5';
}
.bi-patch-check::before {
    content: '\f4b6';
}
.bi-patch-exclamation-fill::before {
    content: '\f4b7';
}
.bi-patch-exclamation::before {
    content: '\f4b8';
}
.bi-patch-minus-fill::before {
    content: '\f4b9';
}
.bi-patch-minus::before {
    content: '\f4ba';
}
.bi-patch-plus-fill::before {
    content: '\f4bb';
}
.bi-patch-plus::before {
    content: '\f4bc';
}
.bi-patch-question-fill::before {
    content: '\f4bd';
}
.bi-patch-question::before {
    content: '\f4be';
}
.bi-pause-btn-fill::before {
    content: '\f4bf';
}
.bi-pause-btn::before {
    content: '\f4c0';
}
.bi-pause-circle-fill::before {
    content: '\f4c1';
}
.bi-pause-circle::before {
    content: '\f4c2';
}
.bi-pause-fill::before {
    content: '\f4c3';
}
.bi-pause::before {
    content: '\f4c4';
}
.bi-peace-fill::before {
    content: '\f4c5';
}
.bi-peace::before {
    content: '\f4c6';
}
.bi-pen-fill::before {
    content: '\f4c7';
}
.bi-pen::before {
    content: '\f4c8';
}
.bi-pencil-fill::before {
    content: '\f4c9';
}
.bi-pencil-square::before {
    content: '\f4ca';
}
.bi-pencil::before {
    content: '\f4cb';
}
.bi-pentagon-fill::before {
    content: '\f4cc';
}
.bi-pentagon-half::before {
    content: '\f4cd';
}
.bi-pentagon::before {
    content: '\f4ce';
}
.bi-people-fill::before {
    content: '\f4cf';
}
.bi-people::before {
    content: '\f4d0';
}
.bi-percent::before {
    content: '\f4d1';
}
.bi-person-badge-fill::before {
    content: '\f4d2';
}
.bi-person-badge::before {
    content: '\f4d3';
}
.bi-person-bounding-box::before {
    content: '\f4d4';
}
.bi-person-check-fill::before {
    content: '\f4d5';
}
.bi-person-check::before {
    content: '\f4d6';
}
.bi-person-circle::before {
    content: '\f4d7';
}
.bi-person-dash-fill::before {
    content: '\f4d8';
}
.bi-person-dash::before {
    content: '\f4d9';
}
.bi-person-fill::before {
    content: '\f4da';
}
.bi-person-lines-fill::before {
    content: '\f4db';
}
.bi-person-plus-fill::before {
    content: '\f4dc';
}
.bi-person-plus::before {
    content: '\f4dd';
}
.bi-person-square::before {
    content: '\f4de';
}
.bi-person-x-fill::before {
    content: '\f4df';
}
.bi-person-x::before {
    content: '\f4e0';
}
.bi-person::before {
    content: '\f4e1';
}
.bi-phone-fill::before {
    content: '\f4e2';
}
.bi-phone-landscape-fill::before {
    content: '\f4e3';
}
.bi-phone-landscape::before {
    content: '\f4e4';
}
.bi-phone-vibrate-fill::before {
    content: '\f4e5';
}
.bi-phone-vibrate::before {
    content: '\f4e6';
}
.bi-phone::before {
    content: '\f4e7';
}
.bi-pie-chart-fill::before {
    content: '\f4e8';
}
.bi-pie-chart::before {
    content: '\f4e9';
}
.bi-pin-angle-fill::before {
    content: '\f4ea';
}
.bi-pin-angle::before {
    content: '\f4eb';
}
.bi-pin-fill::before {
    content: '\f4ec';
}
.bi-pin::before {
    content: '\f4ed';
}
.bi-pip-fill::before {
    content: '\f4ee';
}
.bi-pip::before {
    content: '\f4ef';
}
.bi-play-btn-fill::before {
    content: '\f4f0';
}
.bi-play-btn::before {
    content: '\f4f1';
}
.bi-play-circle-fill::before {
    content: '\f4f2';
}
.bi-play-circle::before {
    content: '\f4f3';
}
.bi-play-fill::before {
    content: '\f4f4';
}
.bi-play::before {
    content: '\f4f5';
}
.bi-plug-fill::before {
    content: '\f4f6';
}
.bi-plug::before {
    content: '\f4f7';
}
.bi-plus-circle-dotted::before {
    content: '\f4f8';
}
.bi-plus-circle-fill::before {
    content: '\f4f9';
}
.bi-plus-circle::before {
    content: '\f4fa';
}
.bi-plus-square-dotted::before {
    content: '\f4fb';
}
.bi-plus-square-fill::before {
    content: '\f4fc';
}
.bi-plus-square::before {
    content: '\f4fd';
}
.bi-plus::before {
    content: '\f4fe';
}
.bi-power::before {
    content: '\f4ff';
}
.bi-printer-fill::before {
    content: '\f500';
}
.bi-printer::before {
    content: '\f501';
}
.bi-puzzle-fill::before {
    content: '\f502';
}
.bi-puzzle::before {
    content: '\f503';
}
.bi-question-circle-fill::before {
    content: '\f504';
}
.bi-question-circle::before {
    content: '\f505';
}
.bi-question-diamond-fill::before {
    content: '\f506';
}
.bi-question-diamond::before {
    content: '\f507';
}
.bi-question-octagon-fill::before {
    content: '\f508';
}
.bi-question-octagon::before {
    content: '\f509';
}
.bi-question-square-fill::before {
    content: '\f50a';
}
.bi-question-square::before {
    content: '\f50b';
}
.bi-question::before {
    content: '\f50c';
}
.bi-rainbow::before {
    content: '\f50d';
}
.bi-receipt-cutoff::before {
    content: '\f50e';
}
.bi-receipt::before {
    content: '\f50f';
}
.bi-reception-0::before {
    content: '\f510';
}
.bi-reception-1::before {
    content: '\f511';
}
.bi-reception-2::before {
    content: '\f512';
}
.bi-reception-3::before {
    content: '\f513';
}
.bi-reception-4::before {
    content: '\f514';
}
.bi-record-btn-fill::before {
    content: '\f515';
}
.bi-record-btn::before {
    content: '\f516';
}
.bi-record-circle-fill::before {
    content: '\f517';
}
.bi-record-circle::before {
    content: '\f518';
}
.bi-record-fill::before {
    content: '\f519';
}
.bi-record::before {
    content: '\f51a';
}
.bi-record2-fill::before {
    content: '\f51b';
}
.bi-record2::before {
    content: '\f51c';
}
.bi-reply-all-fill::before {
    content: '\f51d';
}
.bi-reply-all::before {
    content: '\f51e';
}
.bi-reply-fill::before {
    content: '\f51f';
}
.bi-reply::before {
    content: '\f520';
}
.bi-rss-fill::before {
    content: '\f521';
}
.bi-rss::before {
    content: '\f522';
}
.bi-rulers::before {
    content: '\f523';
}
.bi-save-fill::before {
    content: '\f524';
}
.bi-save::before {
    content: '\f525';
}
.bi-save2-fill::before {
    content: '\f526';
}
.bi-save2::before {
    content: '\f527';
}
.bi-scissors::before {
    content: '\f528';
}
.bi-screwdriver::before {
    content: '\f529';
}
.bi-search::before {
    content: '\f52a';
}
.bi-segmented-nav::before {
    content: '\f52b';
}
.bi-server::before {
    content: '\f52c';
}
.bi-share-fill::before {
    content: '\f52d';
}
.bi-share::before {
    content: '\f52e';
}
.bi-shield-check::before {
    content: '\f52f';
}
.bi-shield-exclamation::before {
    content: '\f530';
}
.bi-shield-fill-check::before {
    content: '\f531';
}
.bi-shield-fill-exclamation::before {
    content: '\f532';
}
.bi-shield-fill-minus::before {
    content: '\f533';
}
.bi-shield-fill-plus::before {
    content: '\f534';
}
.bi-shield-fill-x::before {
    content: '\f535';
}
.bi-shield-fill::before {
    content: '\f536';
}
.bi-shield-lock-fill::before {
    content: '\f537';
}
.bi-shield-lock::before {
    content: '\f538';
}
.bi-shield-minus::before {
    content: '\f539';
}
.bi-shield-plus::before {
    content: '\f53a';
}
.bi-shield-shaded::before {
    content: '\f53b';
}
.bi-shield-slash-fill::before {
    content: '\f53c';
}
.bi-shield-slash::before {
    content: '\f53d';
}
.bi-shield-x::before {
    content: '\f53e';
}
.bi-shield::before {
    content: '\f53f';
}
.bi-shift-fill::before {
    content: '\f540';
}
.bi-shift::before {
    content: '\f541';
}
.bi-shop-window::before {
    content: '\f542';
}
.bi-shop::before {
    content: '\f543';
}
.bi-shuffle::before {
    content: '\f544';
}
.bi-signpost-2-fill::before {
    content: '\f545';
}
.bi-signpost-2::before {
    content: '\f546';
}
.bi-signpost-fill::before {
    content: '\f547';
}
.bi-signpost-split-fill::before {
    content: '\f548';
}
.bi-signpost-split::before {
    content: '\f549';
}
.bi-signpost::before {
    content: '\f54a';
}
.bi-sim-fill::before {
    content: '\f54b';
}
.bi-sim::before {
    content: '\f54c';
}
.bi-skip-backward-btn-fill::before {
    content: '\f54d';
}
.bi-skip-backward-btn::before {
    content: '\f54e';
}
.bi-skip-backward-circle-fill::before {
    content: '\f54f';
}
.bi-skip-backward-circle::before {
    content: '\f550';
}
.bi-skip-backward-fill::before {
    content: '\f551';
}
.bi-skip-backward::before {
    content: '\f552';
}
.bi-skip-end-btn-fill::before {
    content: '\f553';
}
.bi-skip-end-btn::before {
    content: '\f554';
}
.bi-skip-end-circle-fill::before {
    content: '\f555';
}
.bi-skip-end-circle::before {
    content: '\f556';
}
.bi-skip-end-fill::before {
    content: '\f557';
}
.bi-skip-end::before {
    content: '\f558';
}
.bi-skip-forward-btn-fill::before {
    content: '\f559';
}
.bi-skip-forward-btn::before {
    content: '\f55a';
}
.bi-skip-forward-circle-fill::before {
    content: '\f55b';
}
.bi-skip-forward-circle::before {
    content: '\f55c';
}
.bi-skip-forward-fill::before {
    content: '\f55d';
}
.bi-skip-forward::before {
    content: '\f55e';
}
.bi-skip-start-btn-fill::before {
    content: '\f55f';
}
.bi-skip-start-btn::before {
    content: '\f560';
}
.bi-skip-start-circle-fill::before {
    content: '\f561';
}
.bi-skip-start-circle::before {
    content: '\f562';
}
.bi-skip-start-fill::before {
    content: '\f563';
}
.bi-skip-start::before {
    content: '\f564';
}
.bi-slack::before {
    content: '\f565';
}
.bi-slash-circle-fill::before {
    content: '\f566';
}
.bi-slash-circle::before {
    content: '\f567';
}
.bi-slash-square-fill::before {
    content: '\f568';
}
.bi-slash-square::before {
    content: '\f569';
}
.bi-slash::before {
    content: '\f56a';
}
.bi-sliders::before {
    content: '\f56b';
}
.bi-smartwatch::before {
    content: '\f56c';
}
.bi-snow::before {
    content: '\f56d';
}
.bi-snow2::before {
    content: '\f56e';
}
.bi-snow3::before {
    content: '\f56f';
}
.bi-sort-alpha-down-alt::before {
    content: '\f570';
}
.bi-sort-alpha-down::before {
    content: '\f571';
}
.bi-sort-alpha-up-alt::before {
    content: '\f572';
}
.bi-sort-alpha-up::before {
    content: '\f573';
}
.bi-sort-down-alt::before {
    content: '\f574';
}
.bi-sort-down::before {
    content: '\f575';
}
.bi-sort-numeric-down-alt::before {
    content: '\f576';
}
.bi-sort-numeric-down::before {
    content: '\f577';
}
.bi-sort-numeric-up-alt::before {
    content: '\f578';
}
.bi-sort-numeric-up::before {
    content: '\f579';
}
.bi-sort-up-alt::before {
    content: '\f57a';
}
.bi-sort-up::before {
    content: '\f57b';
}
.bi-soundwave::before {
    content: '\f57c';
}
.bi-speaker-fill::before {
    content: '\f57d';
}
.bi-speaker::before {
    content: '\f57e';
}
.bi-speedometer::before {
    content: '\f57f';
}
.bi-speedometer2::before {
    content: '\f580';
}
.bi-spellcheck::before {
    content: '\f581';
}
.bi-square-fill::before {
    content: '\f582';
}
.bi-square-half::before {
    content: '\f583';
}
.bi-square::before {
    content: '\f584';
}
.bi-stack::before {
    content: '\f585';
}
.bi-star-fill::before {
    content: '\f586';
}
.bi-star-half::before {
    content: '\f587';
}
.bi-star::before {
    content: '\f588';
}
.bi-stars::before {
    content: '\f589';
}
.bi-stickies-fill::before {
    content: '\f58a';
}
.bi-stickies::before {
    content: '\f58b';
}
.bi-sticky-fill::before {
    content: '\f58c';
}
.bi-sticky::before {
    content: '\f58d';
}
.bi-stop-btn-fill::before {
    content: '\f58e';
}
.bi-stop-btn::before {
    content: '\f58f';
}
.bi-stop-circle-fill::before {
    content: '\f590';
}
.bi-stop-circle::before {
    content: '\f591';
}
.bi-stop-fill::before {
    content: '\f592';
}
.bi-stop::before {
    content: '\f593';
}
.bi-stoplights-fill::before {
    content: '\f594';
}
.bi-stoplights::before {
    content: '\f595';
}
.bi-stopwatch-fill::before {
    content: '\f596';
}
.bi-stopwatch::before {
    content: '\f597';
}
.bi-subtract::before {
    content: '\f598';
}
.bi-suit-club-fill::before {
    content: '\f599';
}
.bi-suit-club::before {
    content: '\f59a';
}
.bi-suit-diamond-fill::before {
    content: '\f59b';
}
.bi-suit-diamond::before {
    content: '\f59c';
}
.bi-suit-heart-fill::before {
    content: '\f59d';
}
.bi-suit-heart::before {
    content: '\f59e';
}
.bi-suit-spade-fill::before {
    content: '\f59f';
}
.bi-suit-spade::before {
    content: '\f5a0';
}
.bi-sun-fill::before {
    content: '\f5a1';
}
.bi-sun::before {
    content: '\f5a2';
}
.bi-sunglasses::before {
    content: '\f5a3';
}
.bi-sunrise-fill::before {
    content: '\f5a4';
}
.bi-sunrise::before {
    content: '\f5a5';
}
.bi-sunset-fill::before {
    content: '\f5a6';
}
.bi-sunset::before {
    content: '\f5a7';
}
.bi-symmetry-horizontal::before {
    content: '\f5a8';
}
.bi-symmetry-vertical::before {
    content: '\f5a9';
}
.bi-table::before {
    content: '\f5aa';
}
.bi-tablet-fill::before {
    content: '\f5ab';
}
.bi-tablet-landscape-fill::before {
    content: '\f5ac';
}
.bi-tablet-landscape::before {
    content: '\f5ad';
}
.bi-tablet::before {
    content: '\f5ae';
}
.bi-tag-fill::before {
    content: '\f5af';
}
.bi-tag::before {
    content: '\f5b0';
}
.bi-tags-fill::before {
    content: '\f5b1';
}
.bi-tags::before {
    content: '\f5b2';
}
.bi-telegram::before {
    content: '\f5b3';
}
.bi-telephone-fill::before {
    content: '\f5b4';
}
.bi-telephone-forward-fill::before {
    content: '\f5b5';
}
.bi-telephone-forward::before {
    content: '\f5b6';
}
.bi-telephone-inbound-fill::before {
    content: '\f5b7';
}
.bi-telephone-inbound::before {
    content: '\f5b8';
}
.bi-telephone-minus-fill::before {
    content: '\f5b9';
}
.bi-telephone-minus::before {
    content: '\f5ba';
}
.bi-telephone-outbound-fill::before {
    content: '\f5bb';
}
.bi-telephone-outbound::before {
    content: '\f5bc';
}
.bi-telephone-plus-fill::before {
    content: '\f5bd';
}
.bi-telephone-plus::before {
    content: '\f5be';
}
.bi-telephone-x-fill::before {
    content: '\f5bf';
}
.bi-telephone-x::before {
    content: '\f5c0';
}
.bi-telephone::before {
    content: '\f5c1';
}
.bi-terminal-fill::before {
    content: '\f5c2';
}
.bi-terminal::before {
    content: '\f5c3';
}
.bi-text-center::before {
    content: '\f5c4';
}
.bi-text-indent-left::before {
    content: '\f5c5';
}
.bi-text-indent-right::before {
    content: '\f5c6';
}
.bi-text-left::before {
    content: '\f5c7';
}
.bi-text-paragraph::before {
    content: '\f5c8';
}
.bi-text-right::before {
    content: '\f5c9';
}
.bi-textarea-resize::before {
    content: '\f5ca';
}
.bi-textarea-t::before {
    content: '\f5cb';
}
.bi-textarea::before {
    content: '\f5cc';
}
.bi-thermometer-half::before {
    content: '\f5cd';
}
.bi-thermometer-high::before {
    content: '\f5ce';
}
.bi-thermometer-low::before {
    content: '\f5cf';
}
.bi-thermometer-snow::before {
    content: '\f5d0';
}
.bi-thermometer-sun::before {
    content: '\f5d1';
}
.bi-thermometer::before {
    content: '\f5d2';
}
.bi-three-dots-vertical::before {
    content: '\f5d3';
}
.bi-three-dots::before {
    content: '\f5d4';
}
.bi-toggle-off::before {
    content: '\f5d5';
}
.bi-toggle-on::before {
    content: '\f5d6';
}
.bi-toggle2-off::before {
    content: '\f5d7';
}
.bi-toggle2-on::before {
    content: '\f5d8';
}
.bi-toggles::before {
    content: '\f5d9';
}
.bi-toggles2::before {
    content: '\f5da';
}
.bi-tools::before {
    content: '\f5db';
}
.bi-tornado::before {
    content: '\f5dc';
}
.bi-trash-fill::before {
    content: '\f5dd';
}
.bi-trash::before {
    content: '\f5de';
}
.bi-trash2-fill::before {
    content: '\f5df';
}
.bi-trash2::before {
    content: '\f5e0';
}
.bi-tree-fill::before {
    content: '\f5e1';
}
.bi-tree::before {
    content: '\f5e2';
}
.bi-triangle-fill::before {
    content: '\f5e3';
}
.bi-triangle-half::before {
    content: '\f5e4';
}
.bi-triangle::before {
    content: '\f5e5';
}
.bi-trophy-fill::before {
    content: '\f5e6';
}
.bi-trophy::before {
    content: '\f5e7';
}
.bi-tropical-storm::before {
    content: '\f5e8';
}
.bi-truck-flatbed::before {
    content: '\f5e9';
}
.bi-truck::before {
    content: '\f5ea';
}
.bi-tsunami::before {
    content: '\f5eb';
}
.bi-tv-fill::before {
    content: '\f5ec';
}
.bi-tv::before {
    content: '\f5ed';
}
.bi-twitch::before {
    content: '\f5ee';
}
.bi-twitter::before {
    content: '\f5ef';
}
.bi-type-bold::before {
    content: '\f5f0';
}
.bi-type-h1::before {
    content: '\f5f1';
}
.bi-type-h2::before {
    content: '\f5f2';
}
.bi-type-h3::before {
    content: '\f5f3';
}
.bi-type-italic::before {
    content: '\f5f4';
}
.bi-type-strikethrough::before {
    content: '\f5f5';
}
.bi-type-underline::before {
    content: '\f5f6';
}
.bi-type::before {
    content: '\f5f7';
}
.bi-ui-checks-grid::before {
    content: '\f5f8';
}
.bi-ui-checks::before {
    content: '\f5f9';
}
.bi-ui-radios-grid::before {
    content: '\f5fa';
}
.bi-ui-radios::before {
    content: '\f5fb';
}
.bi-umbrella-fill::before {
    content: '\f5fc';
}
.bi-umbrella::before {
    content: '\f5fd';
}
.bi-union::before {
    content: '\f5fe';
}
.bi-unlock-fill::before {
    content: '\f5ff';
}
.bi-unlock::before {
    content: '\f600';
}
.bi-upc-scan::before {
    content: '\f601';
}
.bi-upc::before {
    content: '\f602';
}
.bi-upload::before {
    content: '\f603';
}
.bi-vector-pen::before {
    content: '\f604';
}
.bi-view-list::before {
    content: '\f605';
}
.bi-view-stacked::before {
    content: '\f606';
}
.bi-vinyl-fill::before {
    content: '\f607';
}
.bi-vinyl::before {
    content: '\f608';
}
.bi-voicemail::before {
    content: '\f609';
}
.bi-volume-down-fill::before {
    content: '\f60a';
}
.bi-volume-down::before {
    content: '\f60b';
}
.bi-volume-mute-fill::before {
    content: '\f60c';
}
.bi-volume-mute::before {
    content: '\f60d';
}
.bi-volume-off-fill::before {
    content: '\f60e';
}
.bi-volume-off::before {
    content: '\f60f';
}
.bi-volume-up-fill::before {
    content: '\f610';
}
.bi-volume-up::before {
    content: '\f611';
}
.bi-vr::before {
    content: '\f612';
}
.bi-wallet-fill::before {
    content: '\f613';
}
.bi-wallet::before {
    content: '\f614';
}
.bi-wallet2::before {
    content: '\f615';
}
.bi-watch::before {
    content: '\f616';
}
.bi-water::before {
    content: '\f617';
}
.bi-whatsapp::before {
    content: '\f618';
}
.bi-wifi-1::before {
    content: '\f619';
}
.bi-wifi-2::before {
    content: '\f61a';
}
.bi-wifi-off::before {
    content: '\f61b';
}
.bi-wifi::before {
    content: '\f61c';
}
.bi-wind::before {
    content: '\f61d';
}
.bi-window-dock::before {
    content: '\f61e';
}
.bi-window-sidebar::before {
    content: '\f61f';
}
.bi-window::before {
    content: '\f620';
}
.bi-wrench::before {
    content: '\f621';
}
.bi-x-circle-fill::before {
    content: '\f622';
}
.bi-x-circle::before {
    content: '\f623';
}
.bi-x-diamond-fill::before {
    content: '\f624';
}
.bi-x-diamond::before {
    content: '\f625';
}
.bi-x-octagon-fill::before {
    content: '\f626';
}
.bi-x-octagon::before {
    content: '\f627';
}
.bi-x-square-fill::before {
    content: '\f628';
}
.bi-x-square::before {
    content: '\f629';
}
.bi-x::before {
    content: '\f62a';
}
.bi-youtube::before {
    content: '\f62b';
}
.bi-zoom-in::before {
    content: '\f62c';
}
.bi-zoom-out::before {
    content: '\f62d';
}
.bi-bank::before {
    content: '\f62e';
}
.bi-bank2::before {
    content: '\f62f';
}
.bi-bell-slash-fill::before {
    content: '\f630';
}
.bi-bell-slash::before {
    content: '\f631';
}
.bi-cash-coin::before {
    content: '\f632';
}
.bi-check-lg::before {
    content: '\f633';
}
.bi-coin::before {
    content: '\f634';
}
.bi-currency-bitcoin::before {
    content: '\f635';
}
.bi-currency-dollar::before {
    content: '\f636';
}
.bi-currency-euro::before {
    content: '\f637';
}
.bi-currency-exchange::before {
    content: '\f638';
}
.bi-currency-pound::before {
    content: '\f639';
}
.bi-currency-yen::before {
    content: '\f63a';
}
.bi-dash-lg::before {
    content: '\f63b';
}
.bi-exclamation-lg::before {
    content: '\f63c';
}
.bi-file-earmark-pdf-fill::before {
    content: '\f63d';
}
.bi-file-earmark-pdf::before {
    content: '\f63e';
}
.bi-file-pdf-fill::before {
    content: '\f63f';
}
.bi-file-pdf::before {
    content: '\f640';
}
.bi-gender-ambiguous::before {
    content: '\f641';
}
.bi-gender-female::before {
    content: '\f642';
}
.bi-gender-male::before {
    content: '\f643';
}
.bi-gender-trans::before {
    content: '\f644';
}
.bi-headset-vr::before {
    content: '\f645';
}
.bi-info-lg::before {
    content: '\f646';
}
.bi-mastodon::before {
    content: '\f647';
}
.bi-messenger::before {
    content: '\f648';
}
.bi-piggy-bank-fill::before {
    content: '\f649';
}
.bi-piggy-bank::before {
    content: '\f64a';
}
.bi-pin-map-fill::before {
    content: '\f64b';
}
.bi-pin-map::before {
    content: '\f64c';
}
.bi-plus-lg::before {
    content: '\f64d';
}
.bi-question-lg::before {
    content: '\f64e';
}
.bi-recycle::before {
    content: '\f64f';
}
.bi-reddit::before {
    content: '\f650';
}
.bi-safe-fill::before {
    content: '\f651';
}
.bi-safe2-fill::before {
    content: '\f652';
}
.bi-safe2::before {
    content: '\f653';
}
.bi-sd-card-fill::before {
    content: '\f654';
}
.bi-sd-card::before {
    content: '\f655';
}
.bi-skype::before {
    content: '\f656';
}
.bi-slash-lg::before {
    content: '\f657';
}
.bi-translate::before {
    content: '\f658';
}
.bi-x-lg::before {
    content: '\f659';
}
.bi-safe::before {
    content: '\f65a';
}
.bi-apple::before {
    content: '\f65b';
}
.bi-microsoft::before {
    content: '\f65d';
}
.bi-windows::before {
    content: '\f65e';
}
.bi-behance::before {
    content: '\f65c';
}
.bi-dribbble::before {
    content: '\f65f';
}
.bi-line::before {
    content: '\f660';
}
.bi-medium::before {
    content: '\f661';
}
.bi-paypal::before {
    content: '\f662';
}
.bi-pinterest::before {
    content: '\f663';
}
.bi-signal::before {
    content: '\f664';
}
.bi-snapchat::before {
    content: '\f665';
}
.bi-spotify::before {
    content: '\f666';
}
.bi-stack-overflow::before {
    content: '\f667';
}
.bi-strava::before {
    content: '\f668';
}
.bi-wordpress::before {
    content: '\f669';
}
.bi-vimeo::before {
    content: '\f66a';
}
.bi-activity::before {
    content: '\f66b';
}
.bi-easel2-fill::before {
    content: '\f66c';
}
.bi-easel2::before {
    content: '\f66d';
}
.bi-easel3-fill::before {
    content: '\f66e';
}
.bi-easel3::before {
    content: '\f66f';
}
.bi-fan::before {
    content: '\f670';
}
.bi-fingerprint::before {
    content: '\f671';
}
.bi-graph-down-arrow::before {
    content: '\f672';
}
.bi-graph-up-arrow::before {
    content: '\f673';
}
.bi-hypnotize::before {
    content: '\f674';
}
.bi-magic::before {
    content: '\f675';
}
.bi-person-rolodex::before {
    content: '\f676';
}
.bi-person-video::before {
    content: '\f677';
}
.bi-person-video2::before {
    content: '\f678';
}
.bi-person-video3::before {
    content: '\f679';
}
.bi-person-workspace::before {
    content: '\f67a';
}
.bi-radioactive::before {
    content: '\f67b';
}
.bi-webcam-fill::before {
    content: '\f67c';
}
.bi-webcam::before {
    content: '\f67d';
}
.bi-yin-yang::before {
    content: '\f67e';
}
.bi-bandaid-fill::before {
    content: '\f680';
}
.bi-bandaid::before {
    content: '\f681';
}
.bi-bluetooth::before {
    content: '\f682';
}
.bi-body-text::before {
    content: '\f683';
}
.bi-boombox::before {
    content: '\f684';
}
.bi-boxes::before {
    content: '\f685';
}
.bi-dpad-fill::before {
    content: '\f686';
}
.bi-dpad::before {
    content: '\f687';
}
.bi-ear-fill::before {
    content: '\f688';
}
.bi-ear::before {
    content: '\f689';
}
.bi-envelope-check-fill::before {
    content: '\f68b';
}
.bi-envelope-check::before {
    content: '\f68c';
}
.bi-envelope-dash-fill::before {
    content: '\f68e';
}
.bi-envelope-dash::before {
    content: '\f68f';
}
.bi-envelope-exclamation-fill::before {
    content: '\f691';
}
.bi-envelope-exclamation::before {
    content: '\f692';
}
.bi-envelope-plus-fill::before {
    content: '\f693';
}
.bi-envelope-plus::before {
    content: '\f694';
}
.bi-envelope-slash-fill::before {
    content: '\f696';
}
.bi-envelope-slash::before {
    content: '\f697';
}
.bi-envelope-x-fill::before {
    content: '\f699';
}
.bi-envelope-x::before {
    content: '\f69a';
}
.bi-explicit-fill::before {
    content: '\f69b';
}
.bi-explicit::before {
    content: '\f69c';
}
.bi-git::before {
    content: '\f69d';
}
.bi-infinity::before {
    content: '\f69e';
}
.bi-list-columns-reverse::before {
    content: '\f69f';
}
.bi-list-columns::before {
    content: '\f6a0';
}
.bi-meta::before {
    content: '\f6a1';
}
.bi-nintendo-switch::before {
    content: '\f6a4';
}
.bi-pc-display-horizontal::before {
    content: '\f6a5';
}
.bi-pc-display::before {
    content: '\f6a6';
}
.bi-pc-horizontal::before {
    content: '\f6a7';
}
.bi-pc::before {
    content: '\f6a8';
}
.bi-playstation::before {
    content: '\f6a9';
}
.bi-plus-slash-minus::before {
    content: '\f6aa';
}
.bi-projector-fill::before {
    content: '\f6ab';
}
.bi-projector::before {
    content: '\f6ac';
}
.bi-qr-code-scan::before {
    content: '\f6ad';
}
.bi-qr-code::before {
    content: '\f6ae';
}
.bi-quora::before {
    content: '\f6af';
}
.bi-quote::before {
    content: '\f6b0';
}
.bi-robot::before {
    content: '\f6b1';
}
.bi-send-check-fill::before {
    content: '\f6b2';
}
.bi-send-check::before {
    content: '\f6b3';
}
.bi-send-dash-fill::before {
    content: '\f6b4';
}
.bi-send-dash::before {
    content: '\f6b5';
}
.bi-send-exclamation-fill::before {
    content: '\f6b7';
}
.bi-send-exclamation::before {
    content: '\f6b8';
}
.bi-send-fill::before {
    content: '\f6b9';
}
.bi-send-plus-fill::before {
    content: '\f6ba';
}
.bi-send-plus::before {
    content: '\f6bb';
}
.bi-send-slash-fill::before {
    content: '\f6bc';
}
.bi-send-slash::before {
    content: '\f6bd';
}
.bi-send-x-fill::before {
    content: '\f6be';
}
.bi-send-x::before {
    content: '\f6bf';
}
.bi-send::before {
    content: '\f6c0';
}
.bi-steam::before {
    content: '\f6c1';
}
.bi-terminal-dash::before {
    content: '\f6c3';
}
.bi-terminal-plus::before {
    content: '\f6c4';
}
.bi-terminal-split::before {
    content: '\f6c5';
}
.bi-ticket-detailed-fill::before {
    content: '\f6c6';
}
.bi-ticket-detailed::before {
    content: '\f6c7';
}
.bi-ticket-fill::before {
    content: '\f6c8';
}
.bi-ticket-perforated-fill::before {
    content: '\f6c9';
}
.bi-ticket-perforated::before {
    content: '\f6ca';
}
.bi-ticket::before {
    content: '\f6cb';
}
.bi-tiktok::before {
    content: '\f6cc';
}
.bi-window-dash::before {
    content: '\f6cd';
}
.bi-window-desktop::before {
    content: '\f6ce';
}
.bi-window-fullscreen::before {
    content: '\f6cf';
}
.bi-window-plus::before {
    content: '\f6d0';
}
.bi-window-split::before {
    content: '\f6d1';
}
.bi-window-stack::before {
    content: '\f6d2';
}
.bi-window-x::before {
    content: '\f6d3';
}
.bi-xbox::before {
    content: '\f6d4';
}
.bi-ethernet::before {
    content: '\f6d5';
}
.bi-hdmi-fill::before {
    content: '\f6d6';
}
.bi-hdmi::before {
    content: '\f6d7';
}
.bi-usb-c-fill::before {
    content: '\f6d8';
}
.bi-usb-c::before {
    content: '\f6d9';
}
.bi-usb-fill::before {
    content: '\f6da';
}
.bi-usb-plug-fill::before {
    content: '\f6db';
}
.bi-usb-plug::before {
    content: '\f6dc';
}
.bi-usb-symbol::before {
    content: '\f6dd';
}
.bi-usb::before {
    content: '\f6de';
}
.bi-boombox-fill::before {
    content: '\f6df';
}
.bi-displayport::before {
    content: '\f6e1';
}
.bi-gpu-card::before {
    content: '\f6e2';
}
.bi-memory::before {
    content: '\f6e3';
}
.bi-modem-fill::before {
    content: '\f6e4';
}
.bi-modem::before {
    content: '\f6e5';
}
.bi-motherboard-fill::before {
    content: '\f6e6';
}
.bi-motherboard::before {
    content: '\f6e7';
}
.bi-optical-audio-fill::before {
    content: '\f6e8';
}
.bi-optical-audio::before {
    content: '\f6e9';
}
.bi-pci-card::before {
    content: '\f6ea';
}
.bi-router-fill::before {
    content: '\f6eb';
}
.bi-router::before {
    content: '\f6ec';
}
.bi-thunderbolt-fill::before {
    content: '\f6ef';
}
.bi-thunderbolt::before {
    content: '\f6f0';
}
.bi-usb-drive-fill::before {
    content: '\f6f1';
}
.bi-usb-drive::before {
    content: '\f6f2';
}
.bi-usb-micro-fill::before {
    content: '\f6f3';
}
.bi-usb-micro::before {
    content: '\f6f4';
}
.bi-usb-mini-fill::before {
    content: '\f6f5';
}
.bi-usb-mini::before {
    content: '\f6f6';
}
.bi-cloud-haze2::before {
    content: '\f6f7';
}
.bi-device-hdd-fill::before {
    content: '\f6f8';
}
.bi-device-hdd::before {
    content: '\f6f9';
}
.bi-device-ssd-fill::before {
    content: '\f6fa';
}
.bi-device-ssd::before {
    content: '\f6fb';
}
.bi-displayport-fill::before {
    content: '\f6fc';
}
.bi-mortarboard-fill::before {
    content: '\f6fd';
}
.bi-mortarboard::before {
    content: '\f6fe';
}
.bi-terminal-x::before {
    content: '\f6ff';
}
.bi-arrow-through-heart-fill::before {
    content: '\f700';
}
.bi-arrow-through-heart::before {
    content: '\f701';
}
.bi-badge-sd-fill::before {
    content: '\f702';
}
.bi-badge-sd::before {
    content: '\f703';
}
.bi-bag-heart-fill::before {
    content: '\f704';
}
.bi-bag-heart::before {
    content: '\f705';
}
.bi-balloon-fill::before {
    content: '\f706';
}
.bi-balloon-heart-fill::before {
    content: '\f707';
}
.bi-balloon-heart::before {
    content: '\f708';
}
.bi-balloon::before {
    content: '\f709';
}
.bi-box2-fill::before {
    content: '\f70a';
}
.bi-box2-heart-fill::before {
    content: '\f70b';
}
.bi-box2-heart::before {
    content: '\f70c';
}
.bi-box2::before {
    content: '\f70d';
}
.bi-braces-asterisk::before {
    content: '\f70e';
}
.bi-calendar-heart-fill::before {
    content: '\f70f';
}
.bi-calendar-heart::before {
    content: '\f710';
}
.bi-calendar2-heart-fill::before {
    content: '\f711';
}
.bi-calendar2-heart::before {
    content: '\f712';
}
.bi-chat-heart-fill::before {
    content: '\f713';
}
.bi-chat-heart::before {
    content: '\f714';
}
.bi-chat-left-heart-fill::before {
    content: '\f715';
}
.bi-chat-left-heart::before {
    content: '\f716';
}
.bi-chat-right-heart-fill::before {
    content: '\f717';
}
.bi-chat-right-heart::before {
    content: '\f718';
}
.bi-chat-square-heart-fill::before {
    content: '\f719';
}
.bi-chat-square-heart::before {
    content: '\f71a';
}
.bi-clipboard-check-fill::before {
    content: '\f71b';
}
.bi-clipboard-data-fill::before {
    content: '\f71c';
}
.bi-clipboard-fill::before {
    content: '\f71d';
}
.bi-clipboard-heart-fill::before {
    content: '\f71e';
}
.bi-clipboard-heart::before {
    content: '\f71f';
}
.bi-clipboard-minus-fill::before {
    content: '\f720';
}
.bi-clipboard-plus-fill::before {
    content: '\f721';
}
.bi-clipboard-pulse::before {
    content: '\f722';
}
.bi-clipboard-x-fill::before {
    content: '\f723';
}
.bi-clipboard2-check-fill::before {
    content: '\f724';
}
.bi-clipboard2-check::before {
    content: '\f725';
}
.bi-clipboard2-data-fill::before {
    content: '\f726';
}
.bi-clipboard2-data::before {
    content: '\f727';
}
.bi-clipboard2-fill::before {
    content: '\f728';
}
.bi-clipboard2-heart-fill::before {
    content: '\f729';
}
.bi-clipboard2-heart::before {
    content: '\f72a';
}
.bi-clipboard2-minus-fill::before {
    content: '\f72b';
}
.bi-clipboard2-minus::before {
    content: '\f72c';
}
.bi-clipboard2-plus-fill::before {
    content: '\f72d';
}
.bi-clipboard2-plus::before {
    content: '\f72e';
}
.bi-clipboard2-pulse-fill::before {
    content: '\f72f';
}
.bi-clipboard2-pulse::before {
    content: '\f730';
}
.bi-clipboard2-x-fill::before {
    content: '\f731';
}
.bi-clipboard2-x::before {
    content: '\f732';
}
.bi-clipboard2::before {
    content: '\f733';
}
.bi-emoji-kiss-fill::before {
    content: '\f734';
}
.bi-emoji-kiss::before {
    content: '\f735';
}
.bi-envelope-heart-fill::before {
    content: '\f736';
}
.bi-envelope-heart::before {
    content: '\f737';
}
.bi-envelope-open-heart-fill::before {
    content: '\f738';
}
.bi-envelope-open-heart::before {
    content: '\f739';
}
.bi-envelope-paper-fill::before {
    content: '\f73a';
}
.bi-envelope-paper-heart-fill::before {
    content: '\f73b';
}
.bi-envelope-paper-heart::before {
    content: '\f73c';
}
.bi-envelope-paper::before {
    content: '\f73d';
}
.bi-filetype-aac::before {
    content: '\f73e';
}
.bi-filetype-ai::before {
    content: '\f73f';
}
.bi-filetype-bmp::before {
    content: '\f740';
}
.bi-filetype-cs::before {
    content: '\f741';
}
.bi-filetype-css::before {
    content: '\f742';
}
.bi-filetype-csv::before {
    content: '\f743';
}
.bi-filetype-doc::before {
    content: '\f744';
}
.bi-filetype-docx::before {
    content: '\f745';
}
.bi-filetype-exe::before {
    content: '\f746';
}
.bi-filetype-gif::before {
    content: '\f747';
}
.bi-filetype-heic::before {
    content: '\f748';
}
.bi-filetype-html::before {
    content: '\f749';
}
.bi-filetype-java::before {
    content: '\f74a';
}
.bi-filetype-jpg::before {
    content: '\f74b';
}
.bi-filetype-js::before {
    content: '\f74c';
}
.bi-filetype-jsx::before {
    content: '\f74d';
}
.bi-filetype-key::before {
    content: '\f74e';
}
.bi-filetype-m4p::before {
    content: '\f74f';
}
.bi-filetype-md::before {
    content: '\f750';
}
.bi-filetype-mdx::before {
    content: '\f751';
}
.bi-filetype-mov::before {
    content: '\f752';
}
.bi-filetype-mp3::before {
    content: '\f753';
}
.bi-filetype-mp4::before {
    content: '\f754';
}
.bi-filetype-otf::before {
    content: '\f755';
}
.bi-filetype-pdf::before {
    content: '\f756';
}
.bi-filetype-php::before {
    content: '\f757';
}
.bi-filetype-png::before {
    content: '\f758';
}
.bi-filetype-ppt::before {
    content: '\f75a';
}
.bi-filetype-psd::before {
    content: '\f75b';
}
.bi-filetype-py::before {
    content: '\f75c';
}
.bi-filetype-raw::before {
    content: '\f75d';
}
.bi-filetype-rb::before {
    content: '\f75e';
}
.bi-filetype-sass::before {
    content: '\f75f';
}
.bi-filetype-scss::before {
    content: '\f760';
}
.bi-filetype-sh::before {
    content: '\f761';
}
.bi-filetype-svg::before {
    content: '\f762';
}
.bi-filetype-tiff::before {
    content: '\f763';
}
.bi-filetype-tsx::before {
    content: '\f764';
}
.bi-filetype-ttf::before {
    content: '\f765';
}
.bi-filetype-txt::before {
    content: '\f766';
}
.bi-filetype-wav::before {
    content: '\f767';
}
.bi-filetype-woff::before {
    content: '\f768';
}
.bi-filetype-xls::before {
    content: '\f76a';
}
.bi-filetype-xml::before {
    content: '\f76b';
}
.bi-filetype-yml::before {
    content: '\f76c';
}
.bi-heart-arrow::before {
    content: '\f76d';
}
.bi-heart-pulse-fill::before {
    content: '\f76e';
}
.bi-heart-pulse::before {
    content: '\f76f';
}
.bi-heartbreak-fill::before {
    content: '\f770';
}
.bi-heartbreak::before {
    content: '\f771';
}
.bi-hearts::before {
    content: '\f772';
}
.bi-hospital-fill::before {
    content: '\f773';
}
.bi-hospital::before {
    content: '\f774';
}
.bi-house-heart-fill::before {
    content: '\f775';
}
.bi-house-heart::before {
    content: '\f776';
}
.bi-incognito::before {
    content: '\f777';
}
.bi-magnet-fill::before {
    content: '\f778';
}
.bi-magnet::before {
    content: '\f779';
}
.bi-person-heart::before {
    content: '\f77a';
}
.bi-person-hearts::before {
    content: '\f77b';
}
.bi-phone-flip::before {
    content: '\f77c';
}
.bi-plugin::before {
    content: '\f77d';
}
.bi-postage-fill::before {
    content: '\f77e';
}
.bi-postage-heart-fill::before {
    content: '\f77f';
}
.bi-postage-heart::before {
    content: '\f780';
}
.bi-postage::before {
    content: '\f781';
}
.bi-postcard-fill::before {
    content: '\f782';
}
.bi-postcard-heart-fill::before {
    content: '\f783';
}
.bi-postcard-heart::before {
    content: '\f784';
}
.bi-postcard::before {
    content: '\f785';
}
.bi-search-heart-fill::before {
    content: '\f786';
}
.bi-search-heart::before {
    content: '\f787';
}
.bi-sliders2-vertical::before {
    content: '\f788';
}
.bi-sliders2::before {
    content: '\f789';
}
.bi-trash3-fill::before {
    content: '\f78a';
}
.bi-trash3::before {
    content: '\f78b';
}
.bi-valentine::before {
    content: '\f78c';
}
.bi-valentine2::before {
    content: '\f78d';
}
.bi-wrench-adjustable-circle-fill::before {
    content: '\f78e';
}
.bi-wrench-adjustable-circle::before {
    content: '\f78f';
}
.bi-wrench-adjustable::before {
    content: '\f790';
}
.bi-filetype-json::before {
    content: '\f791';
}
.bi-filetype-pptx::before {
    content: '\f792';
}
.bi-filetype-xlsx::before {
    content: '\f793';
}
.bi-1-circle-fill::before {
    content: '\f796';
}
.bi-1-circle::before {
    content: '\f797';
}
.bi-1-square-fill::before {
    content: '\f798';
}
.bi-1-square::before {
    content: '\f799';
}
.bi-2-circle-fill::before {
    content: '\f79c';
}
.bi-2-circle::before {
    content: '\f79d';
}
.bi-2-square-fill::before {
    content: '\f79e';
}
.bi-2-square::before {
    content: '\f79f';
}
.bi-3-circle-fill::before {
    content: '\f7a2';
}
.bi-3-circle::before {
    content: '\f7a3';
}
.bi-3-square-fill::before {
    content: '\f7a4';
}
.bi-3-square::before {
    content: '\f7a5';
}
.bi-4-circle-fill::before {
    content: '\f7a8';
}
.bi-4-circle::before {
    content: '\f7a9';
}
.bi-4-square-fill::before {
    content: '\f7aa';
}
.bi-4-square::before {
    content: '\f7ab';
}
.bi-5-circle-fill::before {
    content: '\f7ae';
}
.bi-5-circle::before {
    content: '\f7af';
}
.bi-5-square-fill::before {
    content: '\f7b0';
}
.bi-5-square::before {
    content: '\f7b1';
}
.bi-6-circle-fill::before {
    content: '\f7b4';
}
.bi-6-circle::before {
    content: '\f7b5';
}
.bi-6-square-fill::before {
    content: '\f7b6';
}
.bi-6-square::before {
    content: '\f7b7';
}
.bi-7-circle-fill::before {
    content: '\f7ba';
}
.bi-7-circle::before {
    content: '\f7bb';
}
.bi-7-square-fill::before {
    content: '\f7bc';
}
.bi-7-square::before {
    content: '\f7bd';
}
.bi-8-circle-fill::before {
    content: '\f7c0';
}
.bi-8-circle::before {
    content: '\f7c1';
}
.bi-8-square-fill::before {
    content: '\f7c2';
}
.bi-8-square::before {
    content: '\f7c3';
}
.bi-9-circle-fill::before {
    content: '\f7c6';
}
.bi-9-circle::before {
    content: '\f7c7';
}
.bi-9-square-fill::before {
    content: '\f7c8';
}
.bi-9-square::before {
    content: '\f7c9';
}
.bi-airplane-engines-fill::before {
    content: '\f7ca';
}
.bi-airplane-engines::before {
    content: '\f7cb';
}
.bi-airplane-fill::before {
    content: '\f7cc';
}
.bi-airplane::before {
    content: '\f7cd';
}
.bi-alexa::before {
    content: '\f7ce';
}
.bi-alipay::before {
    content: '\f7cf';
}
.bi-android::before {
    content: '\f7d0';
}
.bi-android2::before {
    content: '\f7d1';
}
.bi-box-fill::before {
    content: '\f7d2';
}
.bi-box-seam-fill::before {
    content: '\f7d3';
}
.bi-browser-chrome::before {
    content: '\f7d4';
}
.bi-browser-edge::before {
    content: '\f7d5';
}
.bi-browser-firefox::before {
    content: '\f7d6';
}
.bi-browser-safari::before {
    content: '\f7d7';
}
.bi-c-circle-fill::before {
    content: '\f7da';
}
.bi-c-circle::before {
    content: '\f7db';
}
.bi-c-square-fill::before {
    content: '\f7dc';
}
.bi-c-square::before {
    content: '\f7dd';
}
.bi-capsule-pill::before {
    content: '\f7de';
}
.bi-capsule::before {
    content: '\f7df';
}
.bi-car-front-fill::before {
    content: '\f7e0';
}
.bi-car-front::before {
    content: '\f7e1';
}
.bi-cassette-fill::before {
    content: '\f7e2';
}
.bi-cassette::before {
    content: '\f7e3';
}
.bi-cc-circle-fill::before {
    content: '\f7e6';
}
.bi-cc-circle::before {
    content: '\f7e7';
}
.bi-cc-square-fill::before {
    content: '\f7e8';
}
.bi-cc-square::before {
    content: '\f7e9';
}
.bi-cup-hot-fill::before {
    content: '\f7ea';
}
.bi-cup-hot::before {
    content: '\f7eb';
}
.bi-currency-rupee::before {
    content: '\f7ec';
}
.bi-dropbox::before {
    content: '\f7ed';
}
.bi-escape::before {
    content: '\f7ee';
}
.bi-fast-forward-btn-fill::before {
    content: '\f7ef';
}
.bi-fast-forward-btn::before {
    content: '\f7f0';
}
.bi-fast-forward-circle-fill::before {
    content: '\f7f1';
}
.bi-fast-forward-circle::before {
    content: '\f7f2';
}
.bi-fast-forward-fill::before {
    content: '\f7f3';
}
.bi-fast-forward::before {
    content: '\f7f4';
}
.bi-filetype-sql::before {
    content: '\f7f5';
}
.bi-fire::before {
    content: '\f7f6';
}
.bi-google-play::before {
    content: '\f7f7';
}
.bi-h-circle-fill::before {
    content: '\f7fa';
}
.bi-h-circle::before {
    content: '\f7fb';
}
.bi-h-square-fill::before {
    content: '\f7fc';
}
.bi-h-square::before {
    content: '\f7fd';
}
.bi-indent::before {
    content: '\f7fe';
}
.bi-lungs-fill::before {
    content: '\f7ff';
}
.bi-lungs::before {
    content: '\f800';
}
.bi-microsoft-teams::before {
    content: '\f801';
}
.bi-p-circle-fill::before {
    content: '\f804';
}
.bi-p-circle::before {
    content: '\f805';
}
.bi-p-square-fill::before {
    content: '\f806';
}
.bi-p-square::before {
    content: '\f807';
}
.bi-pass-fill::before {
    content: '\f808';
}
.bi-pass::before {
    content: '\f809';
}
.bi-prescription::before {
    content: '\f80a';
}
.bi-prescription2::before {
    content: '\f80b';
}
.bi-r-circle-fill::before {
    content: '\f80e';
}
.bi-r-circle::before {
    content: '\f80f';
}
.bi-r-square-fill::before {
    content: '\f810';
}
.bi-r-square::before {
    content: '\f811';
}
.bi-repeat-1::before {
    content: '\f812';
}
.bi-repeat::before {
    content: '\f813';
}
.bi-rewind-btn-fill::before {
    content: '\f814';
}
.bi-rewind-btn::before {
    content: '\f815';
}
.bi-rewind-circle-fill::before {
    content: '\f816';
}
.bi-rewind-circle::before {
    content: '\f817';
}
.bi-rewind-fill::before {
    content: '\f818';
}
.bi-rewind::before {
    content: '\f819';
}
.bi-train-freight-front-fill::before {
    content: '\f81a';
}
.bi-train-freight-front::before {
    content: '\f81b';
}
.bi-train-front-fill::before {
    content: '\f81c';
}
.bi-train-front::before {
    content: '\f81d';
}
.bi-train-lightrail-front-fill::before {
    content: '\f81e';
}
.bi-train-lightrail-front::before {
    content: '\f81f';
}
.bi-truck-front-fill::before {
    content: '\f820';
}
.bi-truck-front::before {
    content: '\f821';
}
.bi-ubuntu::before {
    content: '\f822';
}
.bi-unindent::before {
    content: '\f823';
}
.bi-unity::before {
    content: '\f824';
}
.bi-universal-access-circle::before {
    content: '\f825';
}
.bi-universal-access::before {
    content: '\f826';
}
.bi-virus::before {
    content: '\f827';
}
.bi-virus2::before {
    content: '\f828';
}
.bi-wechat::before {
    content: '\f829';
}
.bi-yelp::before {
    content: '\f82a';
}
.bi-sign-stop-fill::before {
    content: '\f82b';
}
.bi-sign-stop-lights-fill::before {
    content: '\f82c';
}
.bi-sign-stop-lights::before {
    content: '\f82d';
}
.bi-sign-stop::before {
    content: '\f82e';
}
.bi-sign-turn-left-fill::before {
    content: '\f82f';
}
.bi-sign-turn-left::before {
    content: '\f830';
}
.bi-sign-turn-right-fill::before {
    content: '\f831';
}
.bi-sign-turn-right::before {
    content: '\f832';
}
.bi-sign-turn-slight-left-fill::before {
    content: '\f833';
}
.bi-sign-turn-slight-left::before {
    content: '\f834';
}
.bi-sign-turn-slight-right-fill::before {
    content: '\f835';
}
.bi-sign-turn-slight-right::before {
    content: '\f836';
}
.bi-sign-yield-fill::before {
    content: '\f837';
}
.bi-sign-yield::before {
    content: '\f838';
}
.bi-ev-station-fill::before {
    content: '\f839';
}
.bi-ev-station::before {
    content: '\f83a';
}
.bi-fuel-pump-diesel-fill::before {
    content: '\f83b';
}
.bi-fuel-pump-diesel::before {
    content: '\f83c';
}
.bi-fuel-pump-fill::before {
    content: '\f83d';
}
.bi-fuel-pump::before {
    content: '\f83e';
}
.bi-0-circle-fill::before {
    content: '\f83f';
}
.bi-0-circle::before {
    content: '\f840';
}
.bi-0-square-fill::before {
    content: '\f841';
}
.bi-0-square::before {
    content: '\f842';
}
.bi-rocket-fill::before {
    content: '\f843';
}
.bi-rocket-takeoff-fill::before {
    content: '\f844';
}
.bi-rocket-takeoff::before {
    content: '\f845';
}
.bi-rocket::before {
    content: '\f846';
}
.bi-stripe::before {
    content: '\f847';
}
.bi-subscript::before {
    content: '\f848';
}
.bi-superscript::before {
    content: '\f849';
}
.bi-trello::before {
    content: '\f84a';
}
.bi-envelope-at-fill::before {
    content: '\f84b';
}
.bi-envelope-at::before {
    content: '\f84c';
}
.bi-regex::before {
    content: '\f84d';
}
.bi-text-wrap::before {
    content: '\f84e';
}
.bi-sign-dead-end-fill::before {
    content: '\f84f';
}
.bi-sign-dead-end::before {
    content: '\f850';
}
.bi-sign-do-not-enter-fill::before {
    content: '\f851';
}
.bi-sign-do-not-enter::before {
    content: '\f852';
}
.bi-sign-intersection-fill::before {
    content: '\f853';
}
.bi-sign-intersection-side-fill::before {
    content: '\f854';
}
.bi-sign-intersection-side::before {
    content: '\f855';
}
.bi-sign-intersection-t-fill::before {
    content: '\f856';
}
.bi-sign-intersection-t::before {
    content: '\f857';
}
.bi-sign-intersection-y-fill::before {
    content: '\f858';
}
.bi-sign-intersection-y::before {
    content: '\f859';
}
.bi-sign-intersection::before {
    content: '\f85a';
}
.bi-sign-merge-left-fill::before {
    content: '\f85b';
}
.bi-sign-merge-left::before {
    content: '\f85c';
}
.bi-sign-merge-right-fill::before {
    content: '\f85d';
}
.bi-sign-merge-right::before {
    content: '\f85e';
}
.bi-sign-no-left-turn-fill::before {
    content: '\f85f';
}
.bi-sign-no-left-turn::before {
    content: '\f860';
}
.bi-sign-no-parking-fill::before {
    content: '\f861';
}
.bi-sign-no-parking::before {
    content: '\f862';
}
.bi-sign-no-right-turn-fill::before {
    content: '\f863';
}
.bi-sign-no-right-turn::before {
    content: '\f864';
}
.bi-sign-railroad-fill::before {
    content: '\f865';
}
.bi-sign-railroad::before {
    content: '\f866';
}
.bi-building-add::before {
    content: '\f867';
}
.bi-building-check::before {
    content: '\f868';
}
.bi-building-dash::before {
    content: '\f869';
}
.bi-building-down::before {
    content: '\f86a';
}
.bi-building-exclamation::before {
    content: '\f86b';
}
.bi-building-fill-add::before {
    content: '\f86c';
}
.bi-building-fill-check::before {
    content: '\f86d';
}
.bi-building-fill-dash::before {
    content: '\f86e';
}
.bi-building-fill-down::before {
    content: '\f86f';
}
.bi-building-fill-exclamation::before {
    content: '\f870';
}
.bi-building-fill-gear::before {
    content: '\f871';
}
.bi-building-fill-lock::before {
    content: '\f872';
}
.bi-building-fill-slash::before {
    content: '\f873';
}
.bi-building-fill-up::before {
    content: '\f874';
}
.bi-building-fill-x::before {
    content: '\f875';
}
.bi-building-fill::before {
    content: '\f876';
}
.bi-building-gear::before {
    content: '\f877';
}
.bi-building-lock::before {
    content: '\f878';
}
.bi-building-slash::before {
    content: '\f879';
}
.bi-building-up::before {
    content: '\f87a';
}
.bi-building-x::before {
    content: '\f87b';
}
.bi-buildings-fill::before {
    content: '\f87c';
}
.bi-buildings::before {
    content: '\f87d';
}
.bi-bus-front-fill::before {
    content: '\f87e';
}
.bi-bus-front::before {
    content: '\f87f';
}
.bi-ev-front-fill::before {
    content: '\f880';
}
.bi-ev-front::before {
    content: '\f881';
}
.bi-globe-americas::before {
    content: '\f882';
}
.bi-globe-asia-australia::before {
    content: '\f883';
}
.bi-globe-central-south-asia::before {
    content: '\f884';
}
.bi-globe-europe-africa::before {
    content: '\f885';
}
.bi-house-add-fill::before {
    content: '\f886';
}
.bi-house-add::before {
    content: '\f887';
}
.bi-house-check-fill::before {
    content: '\f888';
}
.bi-house-check::before {
    content: '\f889';
}
.bi-house-dash-fill::before {
    content: '\f88a';
}
.bi-house-dash::before {
    content: '\f88b';
}
.bi-house-down-fill::before {
    content: '\f88c';
}
.bi-house-down::before {
    content: '\f88d';
}
.bi-house-exclamation-fill::before {
    content: '\f88e';
}
.bi-house-exclamation::before {
    content: '\f88f';
}
.bi-house-gear-fill::before {
    content: '\f890';
}
.bi-house-gear::before {
    content: '\f891';
}
.bi-house-lock-fill::before {
    content: '\f892';
}
.bi-house-lock::before {
    content: '\f893';
}
.bi-house-slash-fill::before {
    content: '\f894';
}
.bi-house-slash::before {
    content: '\f895';
}
.bi-house-up-fill::before {
    content: '\f896';
}
.bi-house-up::before {
    content: '\f897';
}
.bi-house-x-fill::before {
    content: '\f898';
}
.bi-house-x::before {
    content: '\f899';
}
.bi-person-add::before {
    content: '\f89a';
}
.bi-person-down::before {
    content: '\f89b';
}
.bi-person-exclamation::before {
    content: '\f89c';
}
.bi-person-fill-add::before {
    content: '\f89d';
}
.bi-person-fill-check::before {
    content: '\f89e';
}
.bi-person-fill-dash::before {
    content: '\f89f';
}
.bi-person-fill-down::before {
    content: '\f8a0';
}
.bi-person-fill-exclamation::before {
    content: '\f8a1';
}
.bi-person-fill-gear::before {
    content: '\f8a2';
}
.bi-person-fill-lock::before {
    content: '\f8a3';
}
.bi-person-fill-slash::before {
    content: '\f8a4';
}
.bi-person-fill-up::before {
    content: '\f8a5';
}
.bi-person-fill-x::before {
    content: '\f8a6';
}
.bi-person-gear::before {
    content: '\f8a7';
}
.bi-person-lock::before {
    content: '\f8a8';
}
.bi-person-slash::before {
    content: '\f8a9';
}
.bi-person-up::before {
    content: '\f8aa';
}
.bi-scooter::before {
    content: '\f8ab';
}
.bi-taxi-front-fill::before {
    content: '\f8ac';
}
.bi-taxi-front::before {
    content: '\f8ad';
}
.bi-amd::before {
    content: '\f8ae';
}
.bi-database-add::before {
    content: '\f8af';
}
.bi-database-check::before {
    content: '\f8b0';
}
.bi-database-dash::before {
    content: '\f8b1';
}
.bi-database-down::before {
    content: '\f8b2';
}
.bi-database-exclamation::before {
    content: '\f8b3';
}
.bi-database-fill-add::before {
    content: '\f8b4';
}
.bi-database-fill-check::before {
    content: '\f8b5';
}
.bi-database-fill-dash::before {
    content: '\f8b6';
}
.bi-database-fill-down::before {
    content: '\f8b7';
}
.bi-database-fill-exclamation::before {
    content: '\f8b8';
}
.bi-database-fill-gear::before {
    content: '\f8b9';
}
.bi-database-fill-lock::before {
    content: '\f8ba';
}
.bi-database-fill-slash::before {
    content: '\f8bb';
}
.bi-database-fill-up::before {
    content: '\f8bc';
}
.bi-database-fill-x::before {
    content: '\f8bd';
}
.bi-database-fill::before {
    content: '\f8be';
}
.bi-database-gear::before {
    content: '\f8bf';
}
.bi-database-lock::before {
    content: '\f8c0';
}
.bi-database-slash::before {
    content: '\f8c1';
}
.bi-database-up::before {
    content: '\f8c2';
}
.bi-database-x::before {
    content: '\f8c3';
}
.bi-database::before {
    content: '\f8c4';
}
.bi-houses-fill::before {
    content: '\f8c5';
}
.bi-houses::before {
    content: '\f8c6';
}
.bi-nvidia::before {
    content: '\f8c7';
}
.bi-person-vcard-fill::before {
    content: '\f8c8';
}
.bi-person-vcard::before {
    content: '\f8c9';
}
.bi-sina-weibo::before {
    content: '\f8ca';
}
.bi-tencent-qq::before {
    content: '\f8cb';
}
.bi-wikipedia::before {
    content: '\f8cc';
}
.bi-alphabet-uppercase::before {
    content: '\f2a5';
}
.bi-alphabet::before {
    content: '\f68a';
}
.bi-amazon::before {
    content: '\f68d';
}
.bi-arrows-collapse-vertical::before {
    content: '\f690';
}
.bi-arrows-expand-vertical::before {
    content: '\f695';
}
.bi-arrows-vertical::before {
    content: '\f698';
}
.bi-arrows::before {
    content: '\f6a2';
}
.bi-ban-fill::before {
    content: '\f6a3';
}
.bi-ban::before {
    content: '\f6b6';
}
.bi-bing::before {
    content: '\f6c2';
}
.bi-cake::before {
    content: '\f6e0';
}
.bi-cake2::before {
    content: '\f6ed';
}
.bi-cookie::before {
    content: '\f6ee';
}
.bi-copy::before {
    content: '\f759';
}
.bi-crosshair::before {
    content: '\f769';
}
.bi-crosshair2::before {
    content: '\f794';
}
.bi-emoji-astonished-fill::before {
    content: '\f795';
}
.bi-emoji-astonished::before {
    content: '\f79a';
}
.bi-emoji-grimace-fill::before {
    content: '\f79b';
}
.bi-emoji-grimace::before {
    content: '\f7a0';
}
.bi-emoji-grin-fill::before {
    content: '\f7a1';
}
.bi-emoji-grin::before {
    content: '\f7a6';
}
.bi-emoji-surprise-fill::before {
    content: '\f7a7';
}
.bi-emoji-surprise::before {
    content: '\f7ac';
}
.bi-emoji-tear-fill::before {
    content: '\f7ad';
}
.bi-emoji-tear::before {
    content: '\f7b2';
}
.bi-envelope-arrow-down-fill::before {
    content: '\f7b3';
}
.bi-envelope-arrow-down::before {
    content: '\f7b8';
}
.bi-envelope-arrow-up-fill::before {
    content: '\f7b9';
}
.bi-envelope-arrow-up::before {
    content: '\f7be';
}
.bi-feather::before {
    content: '\f7bf';
}
.bi-feather2::before {
    content: '\f7c4';
}
.bi-floppy-fill::before {
    content: '\f7c5';
}
.bi-floppy::before {
    content: '\f7d8';
}
.bi-floppy2-fill::before {
    content: '\f7d9';
}
.bi-floppy2::before {
    content: '\f7e4';
}
.bi-gitlab::before {
    content: '\f7e5';
}
.bi-highlighter::before {
    content: '\f7f8';
}
.bi-marker-tip::before {
    content: '\f802';
}
.bi-nvme-fill::before {
    content: '\f803';
}
.bi-nvme::before {
    content: '\f80c';
}
.bi-opencollective::before {
    content: '\f80d';
}
.bi-pci-card-network::before {
    content: '\f8cd';
}
.bi-pci-card-sound::before {
    content: '\f8ce';
}
.bi-radar::before {
    content: '\f8cf';
}
.bi-send-arrow-down-fill::before {
    content: '\f8d0';
}
.bi-send-arrow-down::before {
    content: '\f8d1';
}
.bi-send-arrow-up-fill::before {
    content: '\f8d2';
}
.bi-send-arrow-up::before {
    content: '\f8d3';
}
.bi-sim-slash-fill::before {
    content: '\f8d4';
}
.bi-sim-slash::before {
    content: '\f8d5';
}
.bi-sourceforge::before {
    content: '\f8d6';
}
.bi-substack::before {
    content: '\f8d7';
}
.bi-threads-fill::before {
    content: '\f8d8';
}
.bi-threads::before {
    content: '\f8d9';
}
.bi-transparency::before {
    content: '\f8da';
}
.bi-twitter-x::before {
    content: '\f8db';
}
.bi-type-h4::before {
    content: '\f8dc';
}
.bi-type-h5::before {
    content: '\f8dd';
}
.bi-type-h6::before {
    content: '\f8de';
}
.bi-backpack-fill::before {
    content: '\f8df';
}
.bi-backpack::before {
    content: '\f8e0';
}
.bi-backpack2-fill::before {
    content: '\f8e1';
}
.bi-backpack2::before {
    content: '\f8e2';
}
.bi-backpack3-fill::before {
    content: '\f8e3';
}
.bi-backpack3::before {
    content: '\f8e4';
}
.bi-backpack4-fill::before {
    content: '\f8e5';
}
.bi-backpack4::before {
    content: '\f8e6';
}
.bi-brilliance::before {
    content: '\f8e7';
}
.bi-cake-fill::before {
    content: '\f8e8';
}
.bi-cake2-fill::before {
    content: '\f8e9';
}
.bi-duffle-fill::before {
    content: '\f8ea';
}
.bi-duffle::before {
    content: '\f8eb';
}
.bi-exposure::before {
    content: '\f8ec';
}
.bi-gender-neuter::before {
    content: '\f8ed';
}
.bi-highlights::before {
    content: '\f8ee';
}
.bi-luggage-fill::before {
    content: '\f8ef';
}
.bi-luggage::before {
    content: '\f8f0';
}
.bi-mailbox-flag::before {
    content: '\f8f1';
}
.bi-mailbox2-flag::before {
    content: '\f8f2';
}
.bi-noise-reduction::before {
    content: '\f8f3';
}
.bi-passport-fill::before {
    content: '\f8f4';
}
.bi-passport::before {
    content: '\f8f5';
}
.bi-person-arms-up::before {
    content: '\f8f6';
}
.bi-person-raised-hand::before {
    content: '\f8f7';
}
.bi-person-standing-dress::before {
    content: '\f8f8';
}
.bi-person-standing::before {
    content: '\f8f9';
}
.bi-person-walking::before {
    content: '\f8fa';
}
.bi-person-wheelchair::before {
    content: '\f8fb';
}
.bi-shadows::before {
    content: '\f8fc';
}
.bi-suitcase-fill::before {
    content: '\f8fd';
}
.bi-suitcase-lg-fill::before {
    content: '\f8fe';
}
.bi-suitcase-lg::before {
    content: '\f8ff';
}
.bi-suitcase::before {
    content: '\f900';
}
.bi-suitcase2-fill::before {
    content: '\f901';
}
.bi-suitcase2::before {
    content: '\f902';
}
.bi-vignette::before {
    content: '\f903';
}
[data-bs-theme='dark'] {
    --xn-primary: #c00000;
    --xn-primary-rgb: 192, 0, 0;
    --xn-secondary: #161616;
    --xn-success: #22c55e;
    --xn-success-rgb: 34, 197, 94;
    --xn-color: #e6e6e6;
    --xn-color-secondary: #b0b0b0;
    --xn-color-light: #ffffff;
    --xn-bg: #050505;
    --xn-bg-color: #0a0a0a;
    --xn-gray: #808080;
    --xn-border-color: #262626;
    --xn-warning: #ffaa00;
    --xn-accent: #c00000;
    --xn-accent-glow: rgba(192, 0, 0, 0.3);
    --xn-glass-bg: rgba(5, 5, 5, 0.8);
    --xn-glass-border: rgba(255, 255, 255, 0.08);
    --xn-glass-shadow: rgba(0, 0, 0, 0.3);
    --xn-header-scrolled-bg: rgba(8, 8, 8, 0.92);
    --xn-text-muted: rgba(255, 255, 255, 0.5);
    --xn-text-hover: #ffffff;
    --xn-element-bg: rgba(255, 255, 255, 0.04);
    --xn-element-hover-bg: rgba(255, 255, 255, 0.08);
    --xn-element-active-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    --xn-overlay-bg: rgba(0, 0, 0, 0.6);
    --xn-panel-bg: rgba(18, 18, 18, 0.98);
    --xn-panel-bg-solid: #121212;
    --xn-dropdown-bg: rgba(20, 20, 20, 0.95);
    --xn-card-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    --xn-footer-bg: linear-gradient(180deg, rgba(8, 8, 8, 0.98) 0%, rgba(4, 4, 4, 1) 100%);
    --xn-hero-bg: linear-gradient(135deg, rgba(15, 15, 15, 0.95) 0%, rgba(8, 8, 8, 0.98) 100%);
    --xn-offcanvas-bg: linear-gradient(180deg, rgba(12, 12, 12, 0.98) 0%, rgba(8, 8, 8, 0.98) 100%);
    --xn-search-box-bg: linear-gradient(135deg, rgba(20, 20, 20, 0.98) 0%, rgba(12, 12, 12, 0.98) 100%);
    --xn-input-bg: rgba(255, 255, 255, 0.05);
    --xn-close-btn-bg: rgba(255, 255, 255, 0.06);
    --xn-handle-bg: rgba(255, 255, 255, 0.2);
    --xn-scrollbar-color: rgba(192, 0, 0, 0.5);
    --xn-transition-fast: 0.15s ease;
    --xn-transition-base: 0.2s ease;
    --xn-transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --xn-transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --xn-radius-sm: 0.375rem;
    --xn-radius-base: 0.5rem;
    --xn-radius-lg: 0.75rem;
    --xn-radius-xl: 1rem;
    --xn-radius-2xl: 1.5rem;
    --xn-radius-full: 50%;
    --xn-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --xn-shadow-base: 0 4px 16px rgba(0, 0, 0, 0.3);
    --xn-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
    --xn-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5);
}
[data-bs-theme='light'] {
    --xn-primary: #c00000;
    --xn-primary-rgb: 192, 0, 0;
    --xn-secondary: #f5f5f5;
    --xn-success: #22c55e;
    --xn-success-rgb: 34, 197, 94;
    --xn-color: #1a1a1a;
    --xn-color-secondary: #4a4a4a;
    --xn-color-light: #ffffff;
    --xn-bg: #ffffff;
    --xn-bg-color: #f8f9fa;
    --xn-gray: #6c757d;
    --xn-border-color: #dee2e6;
    --xn-warning: #ffa500;
    --xn-accent: #c00000;
    --xn-accent-glow: rgba(192, 0, 0, 0.15);
    --xn-glass-bg: rgba(255, 255, 255, 0.85);
    --xn-glass-border: rgba(0, 0, 0, 0.08);
    --xn-glass-shadow: rgba(0, 0, 0, 0.08);
    --xn-header-scrolled-bg: rgba(255, 255, 255, 0.95);
    --xn-text-muted: rgba(0, 0, 0, 0.6);
    --xn-text-hover: rgba(0, 0, 0, 0.95);
    --xn-element-bg: rgba(0, 0, 0, 0.04);
    --xn-element-hover-bg: rgba(0, 0, 0, 0.08);
    --xn-element-active-bg: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.05));
    --xn-overlay-bg: rgba(0, 0, 0, 0.4);
    --xn-panel-bg: rgba(255, 255, 255, 0.98);
    --xn-panel-bg-solid: #ffffff;
    --xn-dropdown-bg: rgba(255, 255, 255, 0.98);
    --xn-card-bg: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.01) 100%);
    --xn-footer-bg: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
    --xn-hero-bg: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    --xn-offcanvas-bg: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    --xn-search-box-bg: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    --xn-input-bg: rgba(0, 0, 0, 0.03);
    --xn-close-btn-bg: rgba(0, 0, 0, 0.05);
    --xn-handle-bg: rgba(0, 0, 0, 0.15);
    --xn-scrollbar-color: rgba(192, 0, 0, 0.4);
    --xn-transition-fast: 0.15s ease;
    --xn-transition-base: 0.2s ease;
    --xn-transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --xn-transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --xn-radius-sm: 0.375rem;
    --xn-radius-base: 0.5rem;
    --xn-radius-lg: 0.75rem;
    --xn-radius-xl: 1rem;
    --xn-radius-2xl: 1.5rem;
    --xn-radius-full: 50%;
    --xn-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --xn-shadow-base: 0 4px 16px rgba(0, 0, 0, 0.08);
    --xn-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --xn-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);
}
*,
::after,
::before {
    transition-property: background-color, border-color, color, fill, stroke, box-shadow;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.no-theme-transition,
.no-theme-transition *,
canvas,
iframe,
img,
video {
    transition-property: none !important;
}
body {
    background-color: var(--xn-bg);
    color: var(--xn-color);
}
a {
    color: var(--xn-color);
    text-decoration: none;
}
a:active,
a:hover {
    color: var(--xn-primary);
    text-decoration: none;
    outline: 0;
}
.btn-primary {
    background-color: var(--xn-primary);
    border-color: var(--xn-primary);
}
.btn-dark {
    color: var(--xn-color);
    background-color: var(--xn-bg-color);
    border-color: var(--xn-border-color);
}
.btn-black {
    background-color: var(--xn-bg);
    border-color: var(--xn-border-color);
}
.btn.show,
.btn:first-child:active {
    background-color: var(--xn-primary);
    border-color: var(--xn-primary);
}
.xn-header-glass {
    background: var(--xn-glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--xn-glass-border);
    box-shadow: var(--xn-shadow-base);
    transition: all var(--xn-transition-slow);
}
.xn-header-glass.scrolled {
    background: var(--xn-header-scrolled-bg);
    box-shadow: var(--xn-shadow-sm);
}
.xn-header-glass.header-hidden {
    transform: translateY(-100%);
    box-shadow: none;
}
.xn-header-glass.header-visible {
    transform: translateY(0);
}
.xn-nav-btn {
    color: var(--xn-text-muted);
    background: var(--xn-element-bg);
    border: none;
    border-radius: 100px;
    padding: 10px 16px;
    transition: all var(--xn-transition-smooth);
    position: relative;
    overflow: hidden;
}
.xn-nav-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--xn-element-active-bg);
    border-radius: 100px;
    opacity: 0;
    transform: scale(0.8);
    transition: all var(--xn-transition-smooth);
}
.xn-nav-btn:hover {
    color: var(--xn-color-light);
    background-color: var(--xn-primary);
}
.xn-nav-btn:hover::before {
    opacity: 1;
    transform: scale(1);
}
.xn-nav-btn:active {
    transform: scale(0.96);
}
.xn-nav-btn i,
.xn-nav-btn span {
    position: relative;
    z-index: 1;
}
.xn-desktop-nav {
    display: none;
}
@media (min-width: 992px) {
    .xn-desktop-nav {
        display: flex;
        align-items: center;
        background: var(--xn-element-bg);
        border-radius: 100px;
        padding: 4px;
        gap: 4px;
    }
}
.xn-nav-link {
    color: var(--xn-text-muted);
    padding: 8px 18px;
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--xn-transition-smooth);
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    overflow: hidden;
}
.xn-nav-link span {
    position: relative;
    z-index: 1;
}
.xn-nav-link i {
    font-size: 0.85rem;
    position: relative;
    z-index: 1;
}
.xn-nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--xn-accent), #f33);
    border-radius: 100px;
    opacity: 0;
    transform: scale(0.8);
    transition: all var(--xn-transition-smooth);
}
.xn-nav-link:hover {
    color: var(--xn-color);
}
.xn-nav-link:hover::before {
    opacity: 0.15;
    transform: scale(1);
}
.xn-nav-link.active {
    color: var(--xn-color-light);
}
.xn-nav-link.active::before {
    opacity: 1;
    transform: scale(1);
}
.xn-nav-more {
    position: relative;
}
.xn-nav-more .xn-nav-link {
    cursor: pointer;
}
.xn-nav-more .xn-nav-link i.bi-chevron-down {
    font-size: 0.65rem;
    transition: transform 0.3s ease;
}
.xn-nav-more:hover .xn-nav-link i.bi-chevron-down {
    transform: rotate(180deg);
}
.xn-more-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--xn-dropdown-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--xn-glass-border);
    border-radius: 16px;
    padding: 8px;
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transition: all var(--xn-transition-smooth);
    box-shadow: var(--xn-shadow-lg);
    z-index: 1000;
}
.xn-nav-more:hover .xn-more-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.xn-more-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-bottom-color: var(--xn-glass-border);
}
.xn-more-dropdown::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: var(--xn-dropdown-bg);
}
.xn-more-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: var(--xn-text-muted);
    text-decoration: none;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: all var(--xn-transition-base);
    position: relative;
    overflow: hidden;
}
.xn-more-item i {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    position: relative;
    z-index: 1;
}
.xn-more-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--xn-accent), #f33);
    border-radius: 10px;
    opacity: 0;
    transform: scale(0.9);
    transition: all var(--xn-transition-base);
}
.xn-more-item span {
    position: relative;
    z-index: 1;
}
.xn-more-item:hover {
    color: var(--xn-color);
}
.xn-more-item:hover::before {
    opacity: 0.15;
    transform: scale(1);
}
.xn-more-item.active {
    color: var(--xn-color-light);
}
.xn-more-item.active::before {
    opacity: 1;
    transform: scale(1);
}
.xn-more-divider {
    height: 1px;
    background: var(--xn-element-hover-bg);
    margin: 6px 0;
}
.xn-user-avatar {
    border: 2px solid var(--xn-glass-border);
    border-radius: 100px;
    padding: 2px;
    transition: all var(--xn-transition-smooth);
    display: block;
    background: var(--xn-element-bg);
}
.xn-user-avatar:hover {
    border-color: var(--xn-accent);
    background: linear-gradient(135deg, var(--xn-accent), #f33);
}
.xn-user-avatar img {
    border-radius: 100px;
    display: block;
}
.xn-search-btn {
    position: relative;
    overflow: hidden;
}
.xn-search-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
    transform: translateX(-100%) rotate(45deg);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.xn-search-btn:hover::after {
    transform: translateX(100%) rotate(45deg);
}
.xn-btn-upload {
    background: var(--xn-element-bg);
    border: none;
    color: var(--xn-text-muted);
}
.xn-btn-upload::before {
    background: linear-gradient(135deg, var(--xn-accent), #f33) !important;
}
.xn-btn-upload:hover {
    color: var(--xn-color-light);
}
.xn-btn-signup {
    background: var(--xn-element-bg);
    border: none;
    border-radius: 100px;
    font-weight: 500;
    padding: 10px 20px;
    transition: all var(--xn-transition-smooth);
    position: relative;
    overflow: hidden;
    color: var(--xn-color);
}
.xn-btn-signup::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--xn-accent), #f33);
    border-radius: 100px;
    opacity: 1;
    transform: scale(1);
    transition: all var(--xn-transition-smooth);
}
.xn-btn-signup i,
.xn-btn-signup span {
    position: relative;
    z-index: 1;
}
.xn-btn-signup:hover {
    color: var(--xn-color);
    transform: scale(1.02);
}
.xn-btn-signup:hover::before {
    opacity: 0.9;
    transform: scale(1.05);
}
.xn-notification-badge {
    font-size: 0.6rem;
    padding: 3px 6px;
    animation: pulse-badge 2s infinite;
}
@keyframes pulse-badge {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(220, 53, 69, 0);
    }
}
.xn-logo {
    transition: all var(--xn-transition-smooth);
    padding: 4px 8px;
    border-radius: 12px;
    margin: -4px -8px;
}
.xn-mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--xn-glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid var(--xn-glass-border);
    padding: 6px 8px;
    z-index: 1019;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
}
@media (max-width: 991px) {
    .xn-mobile-bottom-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .xn-main-content {
        padding-bottom: 72px;
    }
    .short-view-page .xn-header-glass {
        display: none !important;
    }
    .short-view-page .xn-mobile-bottom-nav {
        display: none !important;
    }
    .short-view-page .xn-footer {
        display: none !important;
    }
    .short-view-page .xn-main-content {
        padding-bottom: 0;
        padding-top: 0;
    }
}
.xn-bottom-nav-container {
    display: flex;
    align-items: center;
    background: var(--xn-element-bg);
    border-radius: 100px;
    padding: 4px;
    gap: 2px;
    width: 100%;
    justify-content: space-around;
}
.xn-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--xn-text-muted);
    text-decoration: none;
    padding: 0;
    border-radius: 100px;
    transition: all var(--xn-transition-smooth);
    font-size: 0.6rem;
    font-weight: 500;
    gap: 2px;
    position: relative;
    overflow: hidden;
    background: 0 0;
    border: none;
    cursor: pointer;
    flex: 1;
    max-width: 72px;
}
.xn-bottom-nav-item i {
    font-size: 1.15rem;
    position: relative;
    z-index: 1;
}
.xn-bottom-nav-item span {
    position: relative;
    z-index: 1;
}
.xn-bottom-nav-item:hover {
    color: var(--xn-color);
}
.xn-bottom-nav-item:hover::before {
    opacity: 0.15;
    transform: scale(1);
}
.xn-bottom-nav-item:active {
    transform: scale(0.95);
}
.xn-bottom-nav-item.active {
    color: var(--xn-primary);
}
.xn-bottom-nav-item.active::before {
    opacity: 1;
    transform: scale(1);
}
.xn-bottom-nav-item.xn-upload-btn {
    flex: 0 0 auto;
    padding: 10px 14px;
}
.xn-bottom-nav-item.xn-upload-btn i {
    font-size: 1.25rem;
}
.xn-bottom-nav-item.xn-upload-btn::before {
    opacity: 1;
    transform: scale(1);
}
.xn-bottom-nav-item.xn-upload-btn span {
    display: none;
}
.xn-bottom-nav-divider {
    display: none;
}
.xn-mobile-more-overlay {
    position: fixed;
    inset: 0;
    background: var(--xn-overlay-bg);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1060;
    opacity: 0;
    visibility: hidden;
    transition: all var(--xn-transition-smooth);
}
.xn-mobile-more-overlay.active {
    opacity: 1;
    visibility: visible;
}
.xn-mobile-more-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--xn-panel-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    padding: 12px 16px 24px;
    z-index: 1061;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 70vh;
    overflow-y: auto;
}
.xn-mobile-more-overlay.active .xn-mobile-more-panel {
    transform: translateY(0);
}
.xn-mobile-more-handle {
    width: 40px;
    height: 4px;
    background: var(--xn-handle-bg);
    border-radius: 4px;
    margin: 0 auto 16px;
}
.xn-mobile-more-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.xn-mobile-more-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 8px;
    color: var(--xn-text-muted);
    text-decoration: none;
    border-radius: 16px;
    font-size: 0.7rem;
    font-weight: 500;
    transition: all var(--xn-transition-smooth);
    position: relative;
    overflow: hidden;
    background: var(--xn-element-bg);
}
.xn-mobile-more-item i {
    font-size: 1.35rem;
    position: relative;
    z-index: 1;
}
.xn-mobile-more-item span {
    position: relative;
    z-index: 1;
    text-align: center;
}
.xn-mobile-more-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--xn-accent), #f33);
    border-radius: 16px;
    opacity: 0;
    transform: scale(0.9);
    transition: all var(--xn-transition-smooth);
}
.xn-mobile-more-item:active {
    transform: scale(0.95);
}
.xn-mobile-more-item.active,
.xn-mobile-more-item:hover {
    color: var(--xn-color);
}
.xn-mobile-more-item.active::before {
    opacity: 1;
    transform: scale(1);
}
.xn-mobile-more-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px;
    margin-top: 12px;
    color: var(--xn-text-muted);
    background: var(--xn-close-btn-bg);
    border: none;
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--xn-transition-base);
    cursor: pointer;
}
.xn-mobile-more-close:hover {
    background: var(--xn-element-hover-bg);
    color: var(--xn-color);
}
.offcanvas {
    background: var(--xn-offcanvas-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.offcanvas-header {
    border-bottom: 1px solid var(--xn-glass-border);
}
.xn-offcanvas {
    background: var(--xn-offcanvas-bg);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border-left: 1px solid var(--xn-glass-border);
    box-shadow: var(--xn-shadow-xl);
    width: 320px !important;
}
.xn-offcanvas .offcanvas-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--xn-glass-border);
    background: linear-gradient(135deg, rgba(192, 0, 0, 0.06) 0, transparent 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.xn-offcanvas-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--xn-color);
    letter-spacing: 0.3px;
}
.xn-offcanvas-title i {
    font-size: 1.1rem;
    color: var(--xn-accent);
}
.xn-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--xn-text-muted);
    cursor: pointer;
    transition: all var(--xn-transition-base);
}
.xn-close-btn:hover {
    background: rgba(192, 0, 0, 0.15);
    border-color: rgba(192, 0, 0, 0.3);
    color: var(--xn-color);
    transform: scale(1.05);
}
.xn-close-btn:active {
    transform: scale(0.95);
}
.xn-close-btn i {
    font-size: 1.1rem;
    transition: transform 0.25s ease;
}
.xn-close-btn:hover i {
    transform: rotate(90deg);
}
.xn-offcanvas .offcanvas-body {
    padding: 0;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--xn-scrollbar-color) transparent;
}
.xn-offcanvas .offcanvas-body::-webkit-scrollbar {
    width: 4px;
}
.xn-offcanvas .offcanvas-body::-webkit-scrollbar-track {
    background: 0 0;
}
.xn-offcanvas .offcanvas-body::-webkit-scrollbar-thumb {
    background: var(--xn-scrollbar-color);
    border-radius: 10px;
}
.xn-profile-card {
    margin: 20px;
    padding: 20px;
    background: var(--xn-card-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}
.xn-profile-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(135deg, rgba(192, 0, 0, 0.15) 0, transparent 100%);
    pointer-events: none;
}
.xn-profile-header {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
}
.xn-profile-avatar {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    border: 2px solid rgba(192, 0, 0, 0.5);
    padding: 2px;
    background: linear-gradient(135deg, rgba(192, 0, 0, 0.3), transparent);
    transition: all var(--xn-transition-smooth);
    overflow: hidden;
}
.xn-profile-avatar:hover {
    border-color: var(--xn-accent);
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(192, 0, 0, 0.4);
}
.xn-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}
.xn-profile-info {
    flex: 1;
}
.xn-profile-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--xn-color);
    text-decoration: none;
    display: block;
    margin-bottom: 2px;
    transition: color 0.2s ease;
}
.xn-profile-name:hover {
    color: var(--xn-accent);
}
.xn-profile-subs {
    font-size: 0.75rem;
    color: var(--xn-text-muted);
}
.xn-profile-subs span {
    color: var(--xn-accent);
    font-weight: 600;
}
.xn-profile-badges {
    display: flex;
    gap: 8px;
}
.xn-badge-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--xn-input-bg);
    border: 1px solid var(--xn-glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--xn-text-muted);
    text-decoration: none;
    position: relative;
    transition: all var(--xn-transition-smooth);
}
.xn-badge-btn:hover {
    background: rgba(192, 0, 0, 0.2);
    border-color: rgba(192, 0, 0, 0.3);
    color: var(--xn-color);
    transform: translateY(-2px);
}
.xn-badge-btn i {
    font-size: 1.1rem;
}
.xn-badge-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.65rem;
    font-weight: 700;
    background: linear-gradient(135deg, #dc3545, #c82333);
    border-radius: 100px;
    color: var(--xn-color);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: xn-pulse 2s infinite;
}
@keyframes xn-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.6);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(220, 53, 69, 0);
    }
}
.xn-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 0 20px 20px;
}
.xn-quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 16px;
    text-decoration: none;
    color: var(--xn-text-muted);
    transition: all var(--xn-transition-smooth);
    position: relative;
    overflow: hidden;
}
.xn-quick-action::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--xn-accent), #f33);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.xn-quick-action:hover {
    color: var(--xn-color);
    border-color: rgba(192, 0, 0, 0.3);
    transform: translateY(-3px);
    box-shadow: var(--xn-shadow-base);
}
.xn-quick-action:hover::before {
    opacity: 0.15;
}
.xn-quick-action i {
    font-size: 1.4rem;
    position: relative;
    z-index: 1;
}
.xn-quick-action span {
    font-size: 0.65rem;
    font-weight: 500;
    text-align: center;
    position: relative;
    z-index: 1;
}
.xn-quick-action.xn-accent::before {
    opacity: 1;
}
.xn-quick-action.xn-accent {
    color: var(--xn-color);
}
.xn-menu-section {
    padding: 0 12px;
    margin-bottom: 12px;
}
.xn-menu-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--xn-text-muted);
    padding: 12px 12px 8px;
    margin: 0;
}
.xn-menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    color: var(--xn-text-muted);
    text-decoration: none;
    border-radius: 12px;
    margin-bottom: 2px;
    transition: all var(--xn-transition-base);
    position: relative;
    overflow: hidden;
}
.xn-menu-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, var(--xn-accent), #f33);
    border-radius: 0 3px 3px 0;
    transition: height 0.25s ease;
}
.xn-menu-item:hover {
    color: var(--xn-color);
    background: var(--xn-element-hover-bg);
}
.xn-menu-item:hover::before {
    height: 60%;
}
.xn-menu-item:active {
    transform: scale(0.98);
}
.xn-menu-item i {
    font-size: 1.15rem;
    width: 24px;
    text-align: center;
    opacity: 0.8;
    transition: all var(--xn-transition-base);
}
.xn-menu-item:hover i {
    opacity: 1;
    color: var(--xn-accent);
}
.xn-menu-item span {
    font-size: 0.875rem;
    font-weight: 500;
}
.xn-menu-item .xn-menu-arrow {
    margin-left: auto;
    font-size: 0.75rem;
    opacity: 0;
    transform: translateX(-5px);
    transition: all var(--xn-transition-base);
}
.xn-menu-item:hover .xn-menu-arrow {
    opacity: 0.5;
    transform: translateX(0);
}
.xn-menu-item.xn-logout {
    margin-top: 8px;
    background: rgba(220, 53, 69, 0.08);
    border: 1px solid rgba(220, 53, 69, 0.15);
}
.xn-menu-item.xn-logout:hover {
    background: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.3);
}
.xn-menu-item.xn-logout i {
    color: #dc3545;
}
.xn-guest-welcome {
    margin: 20px;
    padding: 24px;
    background: var(--xn-hero-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 20px;
    text-align: center;
}
.xn-guest-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, rgba(192, 0, 0, 0.2), transparent);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.xn-guest-icon i {
    font-size: 2rem;
    color: var(--xn-accent);
}
.xn-guest-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--xn-color);
    margin-bottom: 8px;
}
.xn-guest-desc {
    font-size: 0.8rem;
    color: var(--xn-text-muted);
    line-height: 1.5;
    margin-bottom: 20px;
}
.xn-auth-buttons {
    display: flex;
    gap: 10px;
}
.xn-btn-auth {
    flex: 1;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all var(--xn-transition-smooth);
}
.xn-btn-auth.xn-primary {
    background: linear-gradient(135deg, var(--xn-accent), #e62222);
    color: #fff;
    border: none;
}
.xn-btn-auth.xn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(192, 0, 0, 0.4);
}
.xn-btn-auth.xn-secondary {
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-border-color);
    color: var(--xn-color);
}
.xn-btn-auth.xn-secondary:hover {
    background: var(--xn-element-hover-bg);
    color: var(--xn-color);
    transform: translateY(-2px);
}
.xn-pref-section {
    margin: 0 12px 12px;
    padding-top: 12px;
    border-top: 1px solid var(--xn-glass-border);
}
.xn-pref-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 10px;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 12px;
    color: var(--xn-text-muted);
    cursor: pointer;
    transition: all var(--xn-transition-base);
    font-size: 0.875rem;
    font-weight: 500;
}
.xn-pref-toggle:hover {
    background: var(--xn-element-hover-bg);
    color: var(--xn-color);
}
.xn-pref-toggle[aria-expanded='true'] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}
.xn-pref-toggle i:first-child {
    margin-right: 12px;
    font-size: 1.1rem;
    opacity: 0.8;
}
.xn-pref-toggle .xn-pref-arrow {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}
.xn-pref-toggle[aria-expanded='true'] .xn-pref-arrow {
    transform: rotate(180deg);
}
.xn-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1070;
    opacity: 0;
    visibility: hidden;
    transition: all var(--xn-transition-smooth);
}
.xn-search-overlay.active {
    opacity: 1;
    visibility: visible;
}
.xn-search-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1071;
    padding: 16px;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.xn-search-overlay.active .xn-search-container {
    transform: translateY(0);
}
.xn-search-wrapper {
    max-width: 720px;
    margin: 0 auto;
}
.xn-search-box {
    background: var(--xn-search-box-bg);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid var(--xn-glass-border);
    border-radius: 20px;
    padding: 8px;
    box-shadow: var(--xn-shadow-xl);
}
.xn-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
}
.xn-search-input-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}
.xn-search-icon {
    position: absolute;
    left: 16px;
    color: var(--xn-text-muted);
    font-size: 1.1rem;
    pointer-events: none;
    transition: color 0.3s ease;
}
.xn-search-input {
    width: 100%;
    background: var(--xn-input-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 14px;
    padding: 14px 16px 14px 48px;
    font-size: 1rem;
    color: var(--xn-color);
    outline: 0;
    transition: all var(--xn-transition-smooth);
}
.xn-search-input::placeholder {
    color: var(--xn-text-muted);
}
.xn-search-input:focus {
    background: var(--xn-element-hover-bg);
    border-color: rgba(192, 0, 0, 0.3);
    box-shadow: 0 0 0 3px rgba(192, 0, 0, 0.1);
}
.xn-search-input-wrapper:hover .xn-search-icon,
.xn-search-input:focus + .xn-search-icon {
    color: var(--xn-accent);
}
.xn-search-filter {
    position: relative;
}
.xn-filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 18px;
    background: var(--xn-input-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 14px;
    color: var(--xn-text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--xn-transition-smooth);
    white-space: nowrap;
}
.xn-filter-btn:hover {
    background: var(--xn-element-hover-bg);
    color: var(--xn-color);
}
.xn-filter-btn i {
    font-size: 1.1rem;
}
.xn-filter-btn .xn-filter-arrow {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}
.xn-filter-btn[aria-expanded='true'] .xn-filter-arrow {
    transform: rotate(180deg);
}
.xn-filter-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: var(--xn-dropdown-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--xn-glass-border);
    border-radius: 16px;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--xn-transition-smooth);
    box-shadow: var(--xn-shadow-lg);
    z-index: 10;
}
.xn-search-filter.show .xn-filter-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.xn-filter-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    color: var(--xn-text-muted);
    text-decoration: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--xn-transition-base);
    position: relative;
    overflow: hidden;
}
.xn-filter-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--xn-accent), #f33);
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.xn-filter-item i,
.xn-filter-item span {
    position: relative;
    z-index: 1;
}
.xn-filter-item i {
    font-size: 1.1rem;
    width: 22px;
    text-align: center;
}
.xn-filter-item:hover {
    color: var(--xn-color);
}
.xn-filter-item:hover::before {
    opacity: 0.15;
}
.xn-filter-item.active {
    color: var(--xn-color-light);
}
.xn-filter-item.active::before {
    opacity: 1;
}
.xn-filter-item .xn-check {
    margin-left: auto;
    opacity: 0;
    transform: scale(0.5);
    transition: all var(--xn-transition-base);
}
.xn-filter-item.active .xn-check {
    opacity: 1;
    transform: scale(1);
}
.xn-search-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--xn-accent), #e62222);
    border: none;
    border-radius: 14px;
    color: var(--xn-color-light);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all var(--xn-transition-smooth);
    position: relative;
    overflow: hidden;
}
.xn-search-submit:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(192, 0, 0, 0.4);
}
.xn-search-submit:hover::before {
    transform: translateX(100%) rotate(45deg);
}
.xn-search-submit:active {
    transform: scale(0.98);
}
.xn-search-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--xn-bg);
    border: 1px solid var(--xn-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--xn-color);
    cursor: pointer;
    transition: all var(--xn-transition-base);
    z-index: 1072;
}
.xn-search-close:hover {
    color: var(--xn-primary);
}
.xn-search-close i {
    font-size: 1.2rem;
    transition: transform 0.25s ease;
}
.xn-search-close:hover i {
    transform: rotate(90deg);
}
.xn-search-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding: 0 4px;
}
.xn-search-tag {
    padding: 8px 14px;
    background: var(--xn-bg);
    border: 1px solid var(--xn-border-color);
    border-radius: 100px;
    color: var(--xn-color);
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--xn-transition-base);
}
.xn-search-tag:hover {
    color: var(--xn-primary);
}
.xn-search-tag i {
    margin-right: 6px;
    font-size: 0.85rem;
}
@media (max-width: 576px) {
    .xn-search-container {
        padding: 12px;
    }
    .xn-search-box {
        padding: 6px;
        border-radius: 16px;
    }
    .xn-search-input {
        padding: 12px 12px 12px 44px;
        font-size: 0.9rem;
    }
    .xn-search-icon {
        left: 14px;
    }
    .xn-filter-btn {
        padding: 12px 14px;
    }
    .xn-filter-btn span {
        display: none;
    }
    .xn-filter-btn .xn-filter-arrow {
        display: none;
    }
    .xn-search-submit {
        width: 48px;
        height: 48px;
    }
    .xn-search-tags {
        display: none;
    }
}
@media (max-width: 960px) {
    .xn-search-close {
        top: auto;
        bottom: 100px;
        right: 50%;
        transform: translateX(50%);
        width: 50px;
        height: 50px;
        border-radius: var(--xn-radius-full);
        background: var(--xn-dropdown-bg);
        border: 1px solid var(--xn-glass-border);
        box-shadow: var(--xn-shadow-base);
    }
}
.xn-layout-full .xn-main-content {
    margin-left: 0;
}
@media all and (min-width: 768px) {
    .xn-layout-full .xn-sidebar {
        margin-left: -15rem;
    }
    .xn-layout-full #main.toggled .xn-sidebar {
        margin-left: 0;
    }
}
.xn-main-content {
    min-height: calc(100vh - 161px);
}
.xujan-container {
    width: 100%;
    padding-right: calc(15rem * 0.5);
    padding-left: calc(15rem * 0.5);
    margin-right: auto;
    margin-left: auto;
}
@media all and (max-width: 1199px) {
    .xujan-container {
        padding-right: calc(1rem * 0.5);
        padding-left: calc(1rem * 0.5);
    }
}
.search-con-holder {
    position: fixed;
    top: 60px;
    background: var(--xn-bg-color);
    width: 100%;
    padding: 10px;
    z-index: 999999;
}
.search {
    position: relative;
    display: flex;
}
.search input {
    background: var(--xn-bg);
    border: 1px solid var(--xn-border-color);
    border-right: none;
    border-radius: 20px 0 0 20px;
    color: var(--xn-gray);
    height: 40px;
    padding: 0 60px 0 15px;
    position: relative;
    width: 97%;
}
.search input[type='text']:focus {
    outline: 0 !important;
}
.search .search-submit {
    border-left: 1px solid var(--xn-border-color);
    border-radius: 0 20px 20px 0;
    display: block;
    height: 40px;
    margin: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 60px;
}
.search .search-submit .btn-search {
    background: var(--xn-bg);
    color: var(--xn-gray);
    border: 1px solid var(--xn-border-color);
    border-radius: 0 20px 20px 0;
    border-left: 0;
    cursor: pointer;
    display: block;
    height: 40px;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 59px;
}
.search .search-choose {
    font-size: 18px;
    position: absolute;
    right: 60px;
    top: 0;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
}
.section {
    width: 100%;
    padding-right: calc(1.5rem * 0.5);
    padding-left: calc(1.5rem * 0.5);
    margin-right: auto;
    margin-left: auto;
    min-width: 1300px;
    max-width: 1320px;
}
.col-section {
    margin-bottom: 1.5rem;
}
.col-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.col-head h1 {
    font-size: 1.25rem;
    font-weight: 600;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}
.col-head h2 {
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}
.col-head h3 {
    font-size: 1rem;
    font-weight: 500;
    padding: 0;
    margin: 0;
}
.xn-sec {
    margin-bottom: 1.5rem;
}
.xn-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.xn-head h1,
.xn-head h2,
.xn-head h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}
.xn-head h1 {
    font-size: 1.0625rem;
}
.xn-head a {
    color: var(--xn-color, #fff);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.xn-head a .bi-chevron-right {
    font-size: 0.7rem;
    opacity: 0.4;
}
.xn-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 1rem;
    flex-shrink: 0;
}
.xn-ico--fire {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
}
.xn-ico--primary {
    background: rgba(var(--xn-primary-rgb, 192, 0, 0), 0.15);
    color: var(--xn-primary, #c00);
}
.xn-ico--warn {
    background: rgba(255, 170, 0, 0.15);
    color: #fa0;
}
.xn-ico--purple {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}
.xn-ico--fire {
    animation: xn-flicker 1.5s ease-in-out infinite;
}
@keyframes xn-flicker {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08) rotate(2deg);
    }
}
.xn-more {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--xn-element-bg, #1a1a1a);
    border: 1px solid var(--xn-glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--xn-color, #fff);
    white-space: nowrap;
}
.xn-more span {
    display: none;
}
.xn-pills {
    display: flex;
    gap: 0.25rem;
    padding: 3px;
    background: var(--xn-element-bg, #1a1a1a);
    border: 1px solid var(--xn-glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 100px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.xn-pills::-webkit-scrollbar {
    display: none;
}
.xn-pill {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.625rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--xn-text-muted, #888);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 32px;
    -webkit-tap-highlight-color: transparent;
}
.xn-pill span {
    display: none;
}
.xn-pill.active span {
    display: inline;
}
.xn-pill.active {
    color: #fff;
    background: var(--xn-primary, #c00);
}
.xn-pill i {
    font-size: 0.875rem;
}
.xn-foot {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}
.xn-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem;
    background: var(--xn-primary, #c00);
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.xn-cta:active {
    transform: scale(0.97);
    color: #fff;
}
.xn-load-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem;
    background: var(--xn-primary);
    border: 1px solid var(--xn-glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--xn-color-light);
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.xn-load-btn:active {
    background: var(--xn-primary, #c00);
    border-color: var(--xn-primary, #c00);
    color: #fff;
}
.xn-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}
.xn-tag {
    padding: 0.375rem 0.75rem;
    background: var(--xn-element-bg, #1a1a1a);
    border: 1px solid var(--xn-glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--xn-text-muted, #888);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.xn-tag i {
    opacity: 0.4;
    font-size: 0.8125rem;
}
.xn-cat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.xn-cat-chip--arm {
    order: -1;
    border-color: rgba(230, 57, 70, 0.4);
}
.xn-cat-chip--arm:hover {
    border-color: var(--xn-primary, #e63946);
}
.xn-cat-chip-flag {
    font-size: 0.875rem;
    line-height: 1;
}
.xn-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.875rem;
    background: var(--xn-element-bg, #1a1a1a);
    border: 1px solid var(--xn-glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 100px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        border-color 0.15s,
        background 0.15s;
}
.xn-cat-chip:hover {
    border-color: var(--xn-primary, #e63946);
    background: var(--xn-element-hover-bg, #222);
}
.xn-cat-chip-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--xn-color, #e0e0e0);
    white-space: nowrap;
}
.xn-cat-chip-count {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--xn-text-muted, #888);
    background: var(--xn-glass-bg, rgba(255, 255, 255, 0.05));
    border-radius: 100px;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
}
@media (min-width: 576px) {
    .xn-sec {
        margin-bottom: 1.75rem;
    }
    .xn-head h1 {
        font-size: 1.125rem;
    }
    .xn-head h2 {
        font-size: 1.0625rem;
    }
    .xn-ico {
        width: 36px;
        height: 36px;
        font-size: 1.0625rem;
    }
    .xn-pill span {
        display: inline;
    }
    .xn-pill {
        padding: 0.375rem 0.75rem;
    }
    .xn-more span {
        display: inline;
    }
    .xn-cta,
    .xn-load-btn {
        width: auto;
        padding: 0.75rem 1.5rem;
    }
    .xn-tags {
        gap: 0.5rem;
    }
    .xn-tag {
        font-size: 0.8125rem;
    }
}
@media (min-width: 768px) {
    .xn-sec {
        margin-bottom: 2rem;
    }
    .xn-head {
        margin-bottom: 1rem;
    }
    .xn-head h1 {
        font-size: 1.25rem;
    }
    .xn-head h2 {
        font-size: 1.15rem;
    }
    .xn-ico {
        width: 40px;
        height: 40px;
        font-size: 1.125rem;
        border-radius: 10px;
    }
    .xn-pills {
        overflow-x: visible;
    }
    .xn-pill {
        padding: 0.4375rem 1rem;
        font-size: 0.8125rem;
    }
    .xn-more {
        padding: 0.4375rem 1rem;
        font-size: 0.8125rem;
    }
    .xn-foot {
        margin-top: 1.5rem;
    }
    .xn-cta {
        padding: 0.875rem 2rem;
        font-size: 0.875rem;
    }
}
@media (min-width: 992px) {
    .xn-sec {
        margin-bottom: 2.5rem;
    }
    .xn-head {
        margin-bottom: 1.25rem;
    }
    .xn-head h1 {
        font-size: 1.375rem;
    }
    .xn-head h2 {
        font-size: 1.25rem;
    }
    .xn-ico {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
        border-radius: 12px;
        transition: transform 0.2s;
    }
    .xn-ico:hover {
        transform: scale(1.08);
    }
    .xn-head a {
        transition: color 0.2s;
    }
    .xn-head a .bi-chevron-right {
        transition:
            opacity 0.2s,
            transform 0.2s;
    }
    .xn-head a:hover .bi-chevron-right {
        opacity: 1;
        transform: translateX(2px);
    }
    .xn-pill {
        transition:
            background 0.2s,
            color 0.2s;
    }
    .xn-pill:hover {
        color: var(--xn-color, #fff);
        background: var(--xn-element-hover-bg, #252525);
    }
    .xn-more {
        transition: all 0.2s;
    }
    .xn-more:hover {
        background: var(--xn-primary, #c00);
        border-color: var(--xn-primary, #c00);
        color: #fff;
    }
    .xn-cta {
        transition:
            transform 0.2s,
            box-shadow 0.2s;
    }
    .xn-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(var(--xn-primary-rgb, 192, 0, 0), 0.35);
        color: #fff;
    }
    .xn-load-btn {
        transition: all 0.2s;
    }
    .xn-load-btn:hover {
        background: var(--xn-primary, #c00);
        border-color: var(--xn-primary, #c00);
        color: #fff;
    }
    .xn-tag {
        transition: all 0.2s;
    }
    .xn-tag:hover {
        background: var(--xn-element-hover-bg, #252525);
        color: var(--xn-primary, #c00);
        border-color: rgba(var(--xn-primary-rgb, 192, 0, 0), 0.3);
        transform: translateY(-2px);
    }
    .xn-tag:hover i {
        opacity: 1;
    }
}
@media (prefers-reduced-motion: reduce) {
    .xn-ico--fire {
        animation: none;
    }
}
.tag-pill {
    transition: all var(--xn-transition-base);
    border-radius: 50rem;
}
.tag-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(192, 0, 0, 0.3);
}
.tag-pill i {
    opacity: 0.7;
}
.btn-outline-primary {
    color: var(--xn-primary);
    border-color: var(--xn-primary);
    border-radius: 50rem;
    transition: all var(--xn-transition-smooth);
}
.btn-outline-primary:hover {
    background-color: var(--xn-primary);
    border-color: var(--xn-primary);
    color: var(--xn-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(192, 0, 0, 0.4);
}
.media-col {
    margin-bottom: 0.5rem;
}
.media-card {
    display: flex;
    flex-direction: column;
    background-color: var(--xn-bg-color);
    border: 1px solid var(--xn-border-color);
    border-radius: var(--xn-radius-base);
}
.media-thumb {
    position: relative;
}
.media-thumb img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: var(--xn-radius-base) 0.5rem 0 0;
    aspect-ratio: 16/9;
}
.media-duration {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: rgb(0 0 0 / 70%);
    color: var(--xn-color-light);
    font-size: 11px;
    letter-spacing: 0.7px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 12px;
    z-index: 3;
}
.media-body {
    padding: 0.45rem;
    background-color: var(--xn-bg-color);
    border-radius: 0 0 0.5rem 0.5rem;
}
.media-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.media-info {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 5px;
}
.media-info-avatar {
    width: 35px;
    height: 35px;
}
.media-state {
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
    color: var(--xn-gray);
}
.media-state-info {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
}
.album-thumb img,
.model-thumb img {
    aspect-ratio: 1/1;
}
.album-col,
.blog-col,
.model-col,
.short-col,
.video-col {
    margin-bottom: 1.5rem;
}
.album-user,
.blog-user,
.model-user,
.short-user,
.video-user {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 1rem;
}
.album-username,
.blog-username,
.model-username,
.short-username,
.video-username {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.album-username a,
.blog-username a,
.model-username a,
.short-username a,
.video-username a {
    font-size: 0.8rem;
}
.album-info,
.blog-info,
.model-info,
.video-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--xn-gray);
    margin-top: 0.5rem;
}
.album-info-more,
.blog-info-more,
.model-info-more,
.video-info-more {
    display: flex;
    gap: 5px;
    align-items: center;
}
.blog-desk i,
.model-desk i {
    padding: 0 0.25rem;
}
.album-thumb,
.model-thumb,
.short-thumb,
.video-thumb {
    position: relative;
}
.album-thumb img,
.model-thumb img,
.short-thumb img,
.video-thumb img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: var(--xn-radius-base) 0.5rem 0 0;
    aspect-ratio: 16/9;
}
.album-desk,
.blog-desk,
.model-desk,
.short-desk,
.video-desk {
    margin-top: 0.5rem;
}
.blog-card {
    display: flex;
    background-color: var(--xn-bg-color);
    border: 1px solid var(--xn-border-color);
    border-radius: var(--xn-radius-base);
    overflow: hidden;
    transition:
        border-color var(--xn-transition-base),
        box-shadow var(--xn-transition-base);
}
.blog-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: var(--xn-shadow-sm);
}
.blog-card-accent {
    width: 4px;
    min-height: 100%;
    background: var(--xn-primary);
    flex-shrink: 0;
    border-radius: var(--xn-radius-base) 0 0 var(--xn-radius-base);
}
.blog-card-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    width: 100%;
    min-width: 0;
}
.blog-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.blog-card-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.blog-card-title a {
    color: var(--xn-color);
    transition: color var(--xn-transition-fast);
}
.blog-card-title a:hover {
    color: var(--xn-primary);
}
.blog-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.blog-card-stats {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-shrink: 0;
}
.blog-card-stat {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--xn-gray);
    cursor: default;
}
.blog-card-stat i {
    font-size: 0.8rem;
    opacity: 0.7;
}
@media (max-width: 575.98px) {
    .blog-card-content {
        padding: 0.65rem 0.75rem;
        gap: 0.5rem;
    }
    .blog-card-title {
        font-size: 0.9rem;
        line-height: 1.35;
    }
    .blog-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }
    .blog-card-footer .media-info {
        margin-top: 0;
        width: 100%;
    }
    .blog-card-stats {
        padding-left: 2.5rem;
        gap: 0.65rem;
    }
    .blog-card-stat {
        font-size: 0.7rem;
    }
    .blog-card-stat i {
        font-size: 0.75rem;
    }
    .blog-card-accent {
        width: 3px;
    }
}
@media (min-width: 576px) and (max-width: 767.98px) {
    .blog-card-content {
        padding: 0.75rem 0.85rem;
    }
    .blog-card-title {
        font-size: 0.95rem;
    }
}
@media (hover: none) {
    .blog-card:hover {
        border-color: var(--xn-border-color);
        box-shadow: none;
    }
    .blog-card:active {
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: var(--xn-shadow-sm);
    }
}
.user-avatar-img {
    border-radius: var(--xn-radius-full);
    border: 1px solid var(--xn-border-color);
}
.user-noavatar-img {
    background-color: var(--xn-bg-color);
    border-radius: var(--xn-radius-full);
    border: 1px solid var(--xn-border-color);
    color: var(--xn-color);
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    height: 100% !important;
}
.short-thumb img {
    aspect-ratio: 9/16;
}
.album-thumb img,
.model-thumb img {
    aspect-ratio: 1/1;
}
.thumb-overlay {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}
.thumb-overlay img {
    width: 100%;
    max-width: 100%;
    height: auto;
}
.duration {
    background-color: rgb(0 0 0 / 70%);
    color: var(--xn-color);
    font-size: 12px;
    letter-spacing: 0.7px;
    font-weight: 500;
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 5px;
    padding: 2px 8px;
    border-radius: 12px;
    z-index: 3;
}
.video-webp {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--xn-bg);
    border-radius: var(--xn-radius-base) 0.5rem 0 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.video-loader {
    position: absolute;
    display: block;
    width: 0%;
    height: 3px;
    bottom: 0;
    left: 0;
    z-index: 10;
    background: var(--xn-primary);
}
.bi-gender-male {
    color: #0d6efd;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}
.bi-gender-female {
    color: #dc3545;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}
.gender-holder {
    position: absolute;
    top: -10px;
    right: -6px;
    font-size: 1.2rem;
    text-shadow: 0 0 10px var(--xn-bg);
}
.premium-holder {
    position: absolute;
    bottom: -2px;
    right: -1px;
    font-size: 1rem;
    color: #ffc107;
    text-shadow: 0 0 10px var(--xn-bg);
}
.adholder {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 300px;
    min-height: 50px;
    background: var(--xn-bg-color);
    border: 1px solid var(--xn-border-color);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.adholder-big {
    width: 100%;
    min-height: 250px;
    margin-bottom: 15px;
    overflow: hidden;
}
.nb-holder {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 90px;
    overflow: hidden;
}
.nb-holder-mob {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 50px;
    overflow: hidden;
}
.card {
    background-color: var(--xn-bg-color);
    border: 1px solid var(--xn-border-color);
    margin-bottom: 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.card-body iframe,
.card-body img {
    max-width: 100%;
}
.small-avatar {
    width: 30px;
    height: 30px;
    border-radius: var(--xn-radius-full);
}
.medium-avatar {
    width: 50px;
    height: 50px;
    border-radius: var(--xn-radius-full);
}
.blogs-body {
    height: 120px;
    overflow: hidden;
}
.bg-dark {
    background-color: var(--xn-bg-color) !important;
}
.text-highlighted {
    color: var(--xn-color);
}
.text-xs {
    font-size: 12px;
}
.text-gray {
    color: var(--xn-gray) !important;
}
.bg-black {
    background-color: var(--xn-bg) !important;
}
.border-dark {
    border-color: var(--xn-border-color) !important;
}
.bg-white {
    background-color: var(--xn-bg-color) !important;
}
.dropdown-menu {
    background-color: var(--xn-bg-color);
    border: 1px solid var(--xn-border-color);
    border-radius: var(--xn-radius-base);
    z-index: 99999;
}
.dropdown-item {
    color: var(--xn-color);
    padding: 0.5rem 0.75rem;
}
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--xn-primary);
}
.nav-tabs .nav-link {
    color: var(--xn-primary);
}
.nav-tabs .nav-link.active {
    background-color: var(--xn-bg-color);
    border-color: var(--xn-border-color);
}
.nav-tabs {
    border-bottom: 1px solid var(--xn-border-color);
}
.nav-tabs .nav-link:hover {
    background-color: var(--xn-bg-color);
    border-color: var(--xn-border-color);
}
.offcanvas {
    background-color: var(--xn-bg-color);
    z-index: 999999;
}
.vjs-parent {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
    outline: 0;
    height: auto;
}
.vjs-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    max-height: none;
    min-height: 0;
    max-width: 100%;
    width: 100%;
}
.video-js {
    border-radius: 12px;
}
.video-js .vjs-iframe-holder {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translate(-50%);
    height: 50px;
    width: 300px;
    overflow: hidden;
    display: none;
}
.video-js.vjs-has-started .vjs-iframe-holder {
    display: block;
}
.video-js .vjs-iframe-holder .vjs-close-btn-iframe {
    position: absolute;
    top: 0;
    right: 0;
    margin: 3px;
    cursor: pointer;
}
.video-js .vjs-iframe-holder .vjs-close-btn-iframe::after {
    border: none;
    content: '\F622';
    font-family: bootstrap-icons;
    font-size: 1.2rem;
}
.video-js.vjs-playing .vjs-iframe-holder,
.video-js.vjs-user-inactive.vjs-playing .vjs-iframe-holder {
    bottom: 20px;
}
.video-js.vjs-paused .vjs-iframe-holder,
.video-js.vjs-playing:hover .vjs-iframe-holder,
.video-js.vjs-user-active.vjs-playing .vjs-iframe-holder {
    bottom: 80px;
}
.video-js.vjs-ad-playing .vjs-iframe-holder {
    display: none;
}
#swipe {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
    max-width: 520px;
}
#swipe .short-holder {
    position: relative;
    display: flex;
    justify-content: center;
    width: 400px;
}
#swipe .video-js .vjs-tech {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
#swipe .video-js .vjs-iframe-holder {
    top: 10px !important;
}
.short-holder #canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    filter: blur(50px);
    -webkit-filter: blur(50px);
    z-index: -1;
}
.short-right {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.short-right .short-btn {
    background-color: var(--xn-bg-color);
    padding: 0.375rem 0.75rem;
    border-radius: var(--xn-radius-full);
    border: 1px solid var(--xn-border-color);
    color: var(--xn-color);
    font-size: 1.2rem;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
}
.short-right .short-btn:hover {
    background-color: var(--xn-primary);
}
.short-bottom {
    position: absolute;
    bottom: 20px;
    left: 10px;
    width: 100%;
    max-width: 390px;
    height: 100%;
    max-height: 70px;
    overflow-y: auto;
    color: var(--xn-color);
}
@media all and (max-width: 720px) {
    #swipe {
        max-width: 400px;
    }
    .short-right {
        right: 0.3rem;
    }
}
.xn-channel-bg {
    width: 100%;
    object-fit: cover;
    height: 100%;
    min-height: 125px;
    max-height: 285px;
}
.bounce-up {
    animation-name: bounce-up;
    animation-timing-function: ease;
}
.bounce-down {
    animation-name: bounce-down;
    animation-timing-function: ease;
}
@keyframes bounce-up {
    0% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-3px);
    }
    50% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(0);
    }
}
@keyframes bounce-down {
    0% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(3px);
    }
    50% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(0);
    }
}
.text-small {
    font-size: 80%;
    font-weight: 400;
}
.popular-tag-left {
    width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.popular-tag a {
    color: var(--xn-gray);
}
.popular-tag {
    padding: 8px 15px 8px 0;
    height: 32px;
}
.popular-tag i {
    font-size: 10px;
    color: var(--xn-color);
}
.tag-item {
    padding: 8px 15px;
    height: 32px;
}
.tag-item i {
    font-size: 10px;
    color: var(--xn-gray);
}
.tag-counter {
    font-size: 14px;
    color: var(--xn-gray);
}
.tag-heading {
    margin-top: 15px;
    color: var(--xn-color);
    font-size: 24px;
    font-weight: 500;
    background-color: var(--xn-bg-color);
    border-radius: 4px;
}
.nav-underline .nav-link {
    color: var(--xn-color-secondary);
}
.nav-underline .nav-link.active {
    border-bottom-color: var(--xn-primary);
    font-weight: 400 !important;
    color: var(--xn-color-light);
}
.content-mini-nav button {
    background: 0 0;
    border: none;
    cursor: pointer;
}
.content-mini-nav button:focus-visible {
    outline: 2px solid var(--xn-primary);
    outline-offset: 2px;
    border-radius: 4px;
}
.content-mini-nav button[aria-pressed='true'] .bi-hand-thumbs-up {
    color: var(--xn-primary);
}
.content-mini-nav button[aria-pressed='true'] .bi-hand-thumbs-down {
    color: var(--xn-warning);
}
.content-mini-nav {
    display: flex;
    align-items: center;
    background-color: var(--xn-bg-color);
    border: 1px solid var(--xn-border-color);
    border-radius: 50rem;
    padding: 0 0.4rem;
}
.content-mini-nav .like {
    display: flex;
    align-items: center;
    font-size: 1.3rem;
    padding-right: 1rem;
    border-right: 1px solid var(--xn-border-color);
    color: green;
    cursor: pointer;
}
.content-mini-nav .dislike {
    display: flex;
    align-items: center;
    font-size: 1.3rem;
    padding-left: 1rem;
    color: red;
    cursor: pointer;
}
.content-mini-nav .add-friend,
.content-mini-nav .default,
.content-mini-nav .remove-friend,
.content-mini-nav .send-message {
    display: flex;
    align-items: center;
    font-size: 1.3rem;
    cursor: pointer;
}
.content-mini-nav .dislike span,
.content-mini-nav .like span {
    padding-left: 0.4rem;
    font-size: 0.8rem;
    color: var(--xn-gray);
}
.content-mini-nav .add-friend:hover,
.content-mini-nav .like:hover,
.content-mini-nav .send-message:hover {
    color: var(--xn-success);
    transition: color 0.3s ease-in-out;
}
.content-mini-nav .dislike:hover,
.content-mini-nav .remove-friend:hover {
    color: var(--xn-primary);
    transition: color 0.3s ease-in-out;
}
.hvr-icon-bounce .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.hvr-icon-bounce:active .hvr-icon,
.hvr-icon-bounce:focus .hvr-icon,
.hvr-icon-bounce:hover .hvr-icon {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
.hvr-underline-from-center {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    position: relative;
    overflow: hidden;
}
.hvr-underline-from-center:before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 51%;
    right: 51%;
    bottom: 0;
    background: var(--xn-primary);
    height: 2px;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.hvr-underline-from-center:active:before,
.hvr-underline-from-center:focus:before,
.hvr-underline-from-center:hover:before {
    left: 0;
    right: 0;
}
.online {
    width: 10px;
    height: 10px;
    border-radius: var(--xn-radius-full);
    background-color: var(--xn-success);
    animation: on-line 1.5s linear 0.5s infinite alternate;
}
@keyframes on-line {
    0% {
        background-color: var(--xn-success);
    }
    100% {
        background-color: #6eff00;
    }
}
.tag-heading {
    margin-top: 15px;
    color: var(--xn-color);
    font-size: 24px;
    font-weight: 500;
    background-color: var(--xn-bg-color);
    border-radius: 4px;
}
.popular-tag-left {
    width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.popular-tag a {
    color: var(--xn-gray);
}
.popular-tag {
    padding: 8px 15px 8px 0;
    height: 32px;
}
.popular-tag i {
    font-size: 10px;
    color: var(--xn-gray);
}
.tag-item {
    padding: 8px 15px;
    height: 32px;
}
.tag-item i {
    font-size: 10px;
    color: var(--xn-gray);
}
.tag-counter {
    font-size: 14px;
    color: var(--xn-gray);
}
.lb-outerContainer {
    background-color: var(--xn-bg-color) !important;
}
.lightbox .lb-image {
    border: 4px solid var(--xn-border-color) !important;
}
#cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1018;
}
.photo-next,
.photo-prev {
    background: rgb(0 0 0 / 15%);
    box-shadow: 0 0 5px #333;
}
.photo-next i,
.photo-prev i {
    font-size: 3rem;
}
.photo-next:hover,
.photo-prev:hover {
    background: rgb(0 0 0 / 30%);
    color: var(--xn-primary);
}
.photo-viewer {
    position: relative;
    touch-action: pan-y pinch-zoom;
}
.photo-image-container {
    width: 100%;
}
.photo-image-container img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 85vh;
    object-fit: contain;
}
.photo-overlay-nav {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
    min-width: 48px;
    z-index: 2;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        color var(--xn-transition-base),
        background var(--xn-transition-base);
    cursor: pointer;
    user-select: none;
}
.photo-overlay-nav i {
    font-size: 2rem;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
    transition: transform var(--xn-transition-fast);
}
.photo-overlay-prev {
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.25), transparent);
    border-radius: var(--xn-radius-lg) 0 0 var(--xn-radius-lg);
}
.photo-overlay-next {
    right: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.25), transparent);
    border-radius: 0 var(--xn-radius-lg) var(--xn-radius-lg) 0;
}
.photo-overlay-nav:hover {
    color: #fff;
}
.photo-overlay-nav:hover i {
    transform: scale(1.2);
}
.photo-overlay-nav:active {
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
}
.photo-overlay-nav:active i {
    transform: scale(0.95);
}
@media (max-width: 575.98px) {
    .photo-overlay-nav {
        width: 25%;
    }
    .photo-overlay-nav i {
        font-size: 1.75rem;
    }
}
@media (min-width: 992px) {
    .photo-overlay-nav {
        width: 15%;
        opacity: 0;
    }
    .photo-viewer:hover .photo-overlay-nav {
        opacity: 1;
    }
    .photo-overlay-nav i {
        font-size: 2.5rem;
    }
}
.photo-nav-bar {
    margin-top: 0.75rem;
}
.photo-nav-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--xn-radius-sm);
    padding: var(--xn-radius-sm);
    border-radius: var(--xn-radius-lg);
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    box-shadow: var(--xn-shadow-sm);
}
.photo-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--xn-radius-sm);
    padding: 0.5rem 0.875rem;
    border-radius: var(--xn-radius-base);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--xn-color);
    text-decoration: none;
    white-space: nowrap;
    transition:
        background var(--xn-transition-base),
        color var(--xn-transition-base),
        box-shadow var(--xn-transition-base),
        transform var(--xn-transition-fast);
    -webkit-tap-highlight-color: transparent;
}
.photo-nav-btn i {
    font-size: 1rem;
    line-height: 1;
}
.photo-nav-btn:hover {
    background: var(--xn-element-hover-bg);
    color: var(--xn-text-hover);
}
.photo-nav-btn:active {
    transform: scale(0.96);
    background: rgba(var(--xn-primary-rgb), 0.15);
    color: var(--xn-primary);
}
.photo-nav-btn.photo-nav-album {
    background: rgba(var(--xn-primary-rgb), 0.1);
    color: var(--xn-color);
    border: 1px solid rgba(var(--xn-primary-rgb), 0.15);
}
.photo-nav-btn.photo-nav-album:hover {
    background: var(--xn-primary);
    color: var(--xn-color-light);
    box-shadow: 0 0 12px var(--xn-accent-glow);
}
.photo-nav-btn.is-disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
    color: var(--xn-text-muted);
}
@media (max-width: 575.98px) {
    .photo-nav-btn {
        padding: 0.5rem 0.625rem;
        font-size: 0.75rem;
    }
    .photo-nav-btn i {
        font-size: 1.125rem;
    }
    .photo-nav-bar-inner {
        gap: 0.25rem;
        padding: 0.25rem;
    }
}
@media (min-width: 768px) {
    .photo-nav-btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    .photo-nav-btn i {
        font-size: 1.125rem;
    }
}
@media (min-width: 992px) {
    .photo-nav-btn {
        padding: 0.625rem 1.25rem;
    }
}
.col-slider {
    width: 100%;
    margin-bottom: 1rem;
    padding: 1rem 0;
    overflow-x: auto;
    display: flex;
    gap: 10px;
    align-items: center;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    flex-flow: row nowrap;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}
.col-slider .active {
    background-color: var(--xn-primary) !important;
    border-color: var(--xn-primary) !important;
}
.horizontal-slider-container {
    position: relative;
    width: 100%;
    min-height: 40px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem 0;
}
.carousel-container {
    width: 100%;
    padding: 0;
    margin: 0;
    overflow-x: auto;
    display: flex;
    gap: 10px;
    align-items: center;
    scroll-snap-type: x mandatory;
    flex-flow: row nowrap;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.carousel-arrow {
    position: absolute;
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    color: var(--xn-gray);
    cursor: pointer;
    opacity: 0.7;
}
.carousel-arrow:focus,
.carousel-arrow:hover {
    opacity: 1;
}
.carousel-arrow--prev {
    left: 0;
    background: linear-gradient(90deg, var(--xn-bg) 50%, rgba(0, 0, 0, 0) 100%);
    padding-right: 35px;
}
.carousel-arrow--next {
    right: 0;
    background: linear-gradient(275deg, var(--xn-bg) 50%, rgba(0, 0, 0, 0) 100%);
    padding-left: 35px;
}
.carousel-container::-webkit-scrollbar {
    display: none;
}
.xn-pagination-nav {
    width: 100%;
    padding: 1rem 0;
}
.xn-pagination-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.xn-pagination-wrapper::-webkit-scrollbar {
    display: none;
}
.pagination {
    gap: 0.25rem;
    white-space: nowrap;
}
.page-link {
    color: var(--xn-color);
    text-decoration: none;
    background-color: var(--xn-bg-color);
    border: 1px solid var(--xn-border-color);
    border-radius: 0.5rem !important;
    min-width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}
.page-link:focus,
.page-link:hover {
    color: var(--xn-color);
    background-color: color-mix(in srgb, var(--xn-primary) 20%, var(--xn-bg-color));
    border-color: var(--xn-primary);
    box-shadow: none;
    outline: 0;
}
.page-item {
    border: none !important;
}
.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border-radius: 0.5rem !important;
}
.page-item.active > .page-link,
.page-link.active {
    z-index: 3;
    color: #fff;
    background-color: var(--xn-primary);
    border-color: var(--xn-primary);
}
.page-item.disabled .page-link {
    color: var(--xn-gray);
    opacity: 0.4;
    pointer-events: none;
    background-color: var(--xn-bg-color);
    border-color: var(--xn-border-color);
}
@media (max-width: 575.98px) {
    .xn-pagination-wrapper {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
    }
    .pagination {
        flex-wrap: nowrap;
        justify-content: flex-start !important;
        gap: 0.35rem;
        padding: 0 0.5rem;
    }
    .page-item {
        scroll-snap-align: center;
        flex-shrink: 0;
    }
    .page-link {
        min-width: 2.75rem;
        height: 2.75rem;
        font-size: 0.9375rem;
        padding: 0.35rem 0.6rem;
    }
}
@media (min-width: 576px) and (max-width: 767.98px) {
    .page-link {
        min-width: 2.5rem;
        height: 2.5rem;
        font-size: 0.875rem;
    }
}
@media (min-width: 768px) {
    .page-link {
        min-width: 2.5rem;
        height: 2.5rem;
        font-size: 0.9375rem;
        padding: 0.375rem 0.75rem;
    }
}
.has-error input.form-control,
.has-error textarea.form-control {
    border: 1px solid var(--xn-primary);
}
#alerts {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 99999999;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 420px;
    width: 100%;
    pointer-events: none;
}
.xn-toast {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    border-radius: var(--xn-radius-lg);
    background: var(--xn-glass-bg);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid var(--xn-glass-border);
    box-shadow:
        var(--xn-shadow-lg),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
    animation: xnToastSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    pointer-events: auto;
}
.xn-toast-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    border-radius: 3px 0 0 3px;
}
.xn-toast-success .xn-toast-accent {
    background: var(--xn-success);
    box-shadow: 0 0 12px rgba(var(--xn-success-rgb), 0.4);
}
.xn-toast-error .xn-toast-accent {
    background: var(--xn-primary);
    box-shadow: 0 0 12px var(--xn-accent-glow);
}
.xn-toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--xn-radius-full);
    flex-shrink: 0;
    font-size: 1.125rem;
}
.xn-toast-success .xn-toast-icon {
    background: rgba(var(--xn-success-rgb), 0.12);
    color: var(--xn-success);
}
.xn-toast-error .xn-toast-icon {
    background: rgba(var(--xn-primary-rgb), 0.12);
    color: var(--xn-primary);
}
.xn-toast-content {
    flex: 1;
    min-width: 0;
}
.xn-toast-text {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--xn-color);
    line-height: 1.5;
}
.xn-toast-text + .xn-toast-text {
    margin-top: 0.25rem;
}
.xn-toast-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--xn-radius-sm);
    border: none;
    background: 0 0;
    color: var(--xn-gray);
    cursor: pointer;
    transition: all var(--xn-transition-fast);
    flex-shrink: 0;
    font-size: 0.75rem;
    padding: 0;
}
.xn-toast-close:hover {
    background: var(--xn-element-hover-bg);
    color: var(--xn-color);
}
.xn-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    border-radius: 0 0 0 var(--xn-radius-lg);
    animation: xnToastProgress 4s linear forwards;
}
.xn-toast-success .xn-toast-progress {
    background: linear-gradient(90deg, var(--xn-success), rgba(var(--xn-success-rgb), 0.3));
}
.xn-toast-error .xn-toast-progress {
    background: linear-gradient(90deg, var(--xn-primary), rgba(var(--xn-primary-rgb), 0.3));
}
@keyframes xnToastSlideIn {
    from {
        opacity: 0;
        transform: translateX(40px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}
@keyframes xnToastProgress {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}
.xn-toast.xn-toast-out {
    animation: xnToastSlideOut 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes xnToastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(40px) scale(0.96);
    }
}
@media (max-width: 576px) {
    #alerts {
        top: 12px;
        right: 10px;
        left: 10px;
        max-width: none;
        gap: 0.5rem;
        padding-top: env(safe-area-inset-top, 0);
    }
    .xn-toast {
        gap: 0.625rem;
        padding: 0.75rem 0.875rem;
        border-radius: var(--xn-radius-base);
        animation: xnToastSlideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .xn-toast-icon {
        width: 30px;
        height: 30px;
        font-size: 0.9375rem;
    }
    .xn-toast-text {
        font-size: 0.8125rem;
    }
    .xn-toast-close {
        width: 32px;
        height: 32px;
        font-size: 0.8125rem;
    }
    .xn-toast.xn-toast-out {
        animation: xnToastSlideUp 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
    }
    @keyframes xnToastSlideDown {
        from {
            opacity: 0;
            transform: translateY(-20px) scale(0.97);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    @keyframes xnToastSlideUp {
        from {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        to {
            opacity: 0;
            transform: translateY(-20px) scale(0.97);
        }
    }
}
@media (max-width: 380px) {
    .xn-toast {
        padding: 0.625rem 0.75rem;
        gap: 0.5rem;
    }
    .xn-toast-icon {
        width: 26px;
        height: 26px;
        font-size: 0.8125rem;
    }
    .xn-toast-text {
        font-size: 0.75rem;
    }
}
.alert-success {
    color: var(--xn-color);
}
.alert-danger {
    color: var(--xn-color);
}
.modal-content {
    background-color: var(--xn-bg-color);
    border-radius: var(--xn-radius-base);
    border: none;
}
.modal-header {
    border: none;
}
.modal-title {
    color: var(--xn-color);
}
.modal-body {
    color: var(--xn-gray);
    padding: 0 1rem;
}
.modal-footer {
    border: none;
}
.modal .close {
    color: var(--xn-color);
}
.modal-small {
    max-width: 400px;
}
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--xn-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--xn-border-color);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--xn-gray);
}
.m-0 {
    margin: 0 !important;
}
.mt-0 {
    margin-top: 0 !important;
}
.mr-0 {
    margin-right: 0 !important;
}
.mb-0 {
    margin-bottom: 0 !important;
}
.ml-0 {
    margin-left: 0 !important;
}
.m-1 {
    margin: 0.25rem !important;
}
.mt-1 {
    margin-top: 0.25rem !important;
}
.mr-1 {
    margin-right: 0.25rem !important;
}
.mb-1 {
    margin-bottom: 0.25rem !important;
}
.ml-1 {
    margin-left: 0.25rem !important;
}
.m-2 {
    margin: 0.5rem !important;
}
.mt-2 {
    margin-top: 0.5rem !important;
}
.mr-2 {
    margin-right: 0.5rem !important;
}
.mb-2 {
    margin-bottom: 0.5rem !important;
}
.ml-2 {
    margin-left: 0.5rem !important;
}
.m-3 {
    margin: 1rem !important;
}
.mt-3 {
    margin-top: 1rem !important;
}
.mr-3 {
    margin-right: 1rem !important;
}
.mb-3 {
    margin-bottom: 1rem !important;
}
.ml-3 {
    margin-left: 1rem !important;
}
.m-4 {
    margin: 1.5rem !important;
}
.mt-4 {
    margin-top: 1.5rem !important;
}
.mr-4 {
    margin-right: 1.5rem !important;
}
.mb-4 {
    margin-bottom: 1.5rem !important;
}
.ml-4 {
    margin-left: 1.5rem !important;
}
.m-5 {
    margin: 3rem !important;
}
.mt-5 {
    margin-top: 3rem !important;
}
.mr-5 {
    margin-right: 3rem !important;
}
.mb-5 {
    margin-bottom: 3rem !important;
}
.ml-5 {
    margin-left: 3rem !important;
}
.p-0 {
    padding: 0 !important;
}
.pt-0 {
    padding-top: 0 !important;
}
.pr-0 {
    padding-right: 0 !important;
}
.pb-0 {
    padding-bottom: 0 !important;
}
.pl-0 {
    padding-left: 0 !important;
}
.p-1 {
    padding: 0.25rem !important;
}
.pt-1 {
    padding-top: 0.25rem !important;
}
.pr-1 {
    padding-right: 0.25rem !important;
}
.pb-1 {
    padding-bottom: 0.25rem !important;
}
.pl-1 {
    padding-left: 0.25rem !important;
}
.p-2 {
    padding: 0.5rem !important;
}
.pt-2 {
    padding-top: 0.5rem !important;
}
.pr-2 {
    padding-right: 0.5rem !important;
}
.pb-2 {
    padding-bottom: 0.5rem !important;
}
.pl-2 {
    padding-left: 0.5rem !important;
}
.p-3 {
    padding: 1rem !important;
}
.pt-3 {
    padding-top: 1rem !important;
}
.pr-3 {
    padding-right: 1rem !important;
}
.pb-3 {
    padding-bottom: 1rem !important;
}
.pl-3 {
    padding-left: 1rem !important;
}
.p-4 {
    padding: 1.5rem !important;
}
.pt-4 {
    padding-top: 1.5rem !important;
}
.pr-4 {
    padding-right: 1.5rem !important;
}
.pb-4 {
    padding-bottom: 1.5rem !important;
}
.pl-4 {
    padding-left: 1.5rem !important;
}
.p-5 {
    padding: 3rem !important;
}
.pt-5 {
    padding-top: 3rem !important;
}
.pr-5 {
    padding-right: 3rem !important;
}
.pb-5 {
    padding-bottom: 3rem !important;
}
.pl-5 {
    padding-left: 3rem !important;
}
.fs-1 {
    font-size: 2.5rem !important;
}
.fs-2 {
    font-size: 2rem !important;
}
.fs-3 {
    font-size: 1.75rem !important;
}
.fs-4 {
    font-size: 1.5rem !important;
}
.fs-5 {
    font-size: 1.25rem !important;
}
.fs-6 {
    font-size: 1rem !important;
}
.font-xl {
    font-size: 2rem;
}
.font-lg {
    font-size: 1.5rem;
}
.font-sm {
    font-size: 1rem;
}
.font-s {
    font-size: 0.85rem;
}
.font-xs {
    font-size: 0.75rem;
}
.content-header-section {
    padding: 0.25rem 0;
}
.content-title {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 0.75rem 0;
    color: var(--xn-color);
    letter-spacing: -0.02em;
}
.content-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.meta-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--xn-text-muted);
    cursor: default;
}
.meta-item i {
    font-size: 0.9rem;
    opacity: 0.7;
}
.meta-divider {
    width: 4px;
    height: 4px;
    background: var(--xn-gray);
    border-radius: var(--xn-radius-full);
}
.creator-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--xn-border-color);
    border-radius: 12px;
}
.creator-avatar-link {
    flex-shrink: 0;
    text-decoration: none;
}
.creator-avatar {
    position: relative;
    width: 52px;
    height: 52px;
}
.creator-avatar img {
    width: 52px;
    height: 52px;
    border-radius: var(--xn-radius-full);
    object-fit: cover;
    border: 2px solid transparent;
    transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.creator-avatar-link:hover .creator-avatar img {
    border-color: var(--xn-primary);
}
.avatar-ring {
    position: absolute;
    inset: -4px;
    border: 2px solid var(--xn-primary);
    border-radius: var(--xn-radius-full);
    opacity: 0;
    transform: scale(0.9);
    transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.creator-avatar-link:hover .avatar-ring {
    opacity: 0.5;
    transform: scale(1);
}
.creator-info {
    flex: 1;
    min-width: 0;
}
.creator-name {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--xn-color);
    text-decoration: none;
}
.creator-name:hover {
    color: var(--xn-primary);
}
.creator-stats {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: var(--xn-text-muted);
}
.stat-item strong {
    color: var(--xn-color);
    font-weight: 600;
}
.stat-dot {
    color: var(--xn-gray);
}
.creator-actions {
    flex-shrink: 0;
}
.btn-subscribe {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.7rem;
    background: linear-gradient(135deg, var(--xn-primary) 0, #ff002b 100%);
    border: none;
    border-radius: 50px;
    color: var(--xn-color-light);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(231, 3, 3, 0.35);
}
.btn-subscribe:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(156, 2, 2, 0.45);
    color: var(--xn-color-light);
}
.btn-subscribe i {
    animation: bellRing 0.5s ease infinite;
    animation-play-state: paused;
}
.btn-subscribe:hover i {
    animation-play-state: running;
}
@keyframes bellRing {
    0%,
    100% {
        transform: rotate(0);
    }
    25% {
        transform: rotate(15deg);
    }
    75% {
        transform: rotate(-15deg);
    }
}
.btn-edit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    background: 0 0;
    border: 1px solid var(--xn-border-color);
    border-radius: 50px;
    color: var(--xn-color);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
}
.btn-edit:hover {
    background: var(--xn-secondary);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--xn-color);
}
.description-card {
    background: var(--xn-bg-color);
    border: 1px solid var(--xn-border-color);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.description-header {
    padding: 1rem 1.25rem 0;
}
.category-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    background: var(--xn-bg-color);
    border: 1px solid var(--xn-border-color);
    border-radius: 50px;
    color: var(--xn-primary);
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.category-chip:hover {
    background: var(--xn-bg-color);
    color: var(--xn-color);
    transform: translateY(-1px);
}
.category-chip i {
    font-size: 0.85rem;
}
.description-body {
    padding: 1rem 1.25rem;
}
.description-preview {
    color: var(--xn-text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}
.description-expanded {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--xn-border-color);
}
.tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.tag-chip {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background: var(--xn-secondary);
    border-radius: 8px;
    color: var(--xn-text-muted);
    font-size: 0.8rem;
    text-decoration: none;
}
.tag-chip:hover {
    background: var(--xn-bg-color);
    color: var(--xn-primary);
    transform: translateY(-1px);
}
.info-block {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--xn-border-color);
}
.info-block-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--xn-color);
}
.info-block-header i {
    color: var(--xn-warning);
}
.expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    background: var(--xn-bg-color);
    border: none;
    border-top: 1px solid var(--xn-border-color);
    color: var(--xn-primary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}
.expand-btn:hover {
    background: var(--xn-secondary);
    color: var(--xn-primary);
}
.expand-icon {
    transition: transform 0.3s ease;
}
.expand-btn[aria-expanded='true'] .expand-icon {
    transform: rotate(180deg);
}
@media (max-width: 768px) {
    .content-header-section {
        padding: 0.5rem 0;
    }
    .content-title {
        font-size: 1.1rem;
        line-height: 1.4;
        margin-bottom: 0.5rem;
    }
    .content-meta {
        gap: 0.5rem;
        font-size: 0.8rem;
    }
    .meta-item {
        font-size: 0.78rem;
        gap: 0.3rem;
    }
    .meta-item i {
        font-size: 0.75rem;
    }
    .meta-divider {
        width: 3px;
        height: 3px;
    }
}
@media (max-width: 640px) {
    .content-title {
        font-size: 1rem;
    }
    .creator-section {
        flex-wrap: wrap;
        padding: 0.875rem;
        gap: 0.75rem;
        border-radius: 8px;
    }
    .creator-avatar {
        width: 44px;
        height: 44px;
    }
    .creator-avatar img {
        width: 44px;
        height: 44px;
    }
    .creator-info {
        flex: 1 1 calc(100% - 60px);
        min-width: 0;
    }
    .creator-name {
        font-size: 0.9rem;
    }
    .creator-stats {
        font-size: 0.75rem;
        gap: 0.4rem;
    }
    .creator-actions {
        width: 100%;
        margin-top: 0.5rem;
    }
    .btn-subscribe {
        width: 100%;
        justify-content: center;
    }
    .btn-edit {
        width: 100%;
        justify-content: center;
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }
    .description-card {
        border-radius: 8px;
    }
    .description-header {
        padding: 0.75rem 0.875rem 0;
    }
    .description-body {
        padding: 0.75rem 0.875rem;
    }
    .description-preview {
        font-size: 0.85rem;
        line-height: 1.5;
    }
    .category-chip {
        font-size: 0.75rem;
        padding: 0.35rem 0.7rem;
    }
    .tags-cloud {
        gap: 0.35rem;
    }
    .tag-chip {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
    }
    .info-block-header {
        font-size: 0.85rem;
    }
    .expand-btn {
        padding: 0.65rem;
        font-size: 0.8rem;
    }
}
@media (max-width: 400px) {
    .content-title {
        font-size: 0.95rem;
    }
    .content-meta {
        gap: 0.4rem;
    }
    .meta-item {
        font-size: 0.72rem;
    }
    .creator-section {
        padding: 0.75rem;
    }
    .creator-avatar,
    .creator-avatar img {
        width: 40px;
        height: 40px;
    }
    .creator-name {
        font-size: 0.85rem;
    }
    .creator-stats {
        font-size: 0.7rem;
    }
    .btn-edit {
        padding: 0.6rem 0.75rem;
        font-size: 0.8rem;
    }
    .description-header {
        padding: 0.6rem 0.75rem 0;
    }
    .description-body {
        padding: 0.6rem 0.75rem;
    }
    .description-preview {
        font-size: 0.8rem;
    }
    .category-chip {
        font-size: 0.7rem;
        padding: 0.3rem 0.6rem;
    }
    .tag-chip {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }
}
@media (max-width: 640px) and (orientation: landscape) {
    .creator-section {
        flex-wrap: nowrap;
    }
    .creator-actions {
        width: auto;
        margin-top: 0;
    }
    .btn-edit,
    .btn-subscribe {
        width: auto;
    }
}
.xn-offcanvas-modern {
    background: var(--xn-offcanvas-bg);
    backdrop-filter: blur(60px) saturate(200%);
    -webkit-backdrop-filter: blur(60px) saturate(200%);
    border-left: 1px solid var(--xn-glass-border);
    box-shadow: var(--xn-shadow-xl);
    width: 360px !important;
    max-width: 100vw;
}
.xn-offcanvas-header-modern {
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(180deg, rgba(192, 0, 0, 0.06) 0, transparent 100%);
    border-bottom: 1px solid var(--xn-glass-border);
    position: relative;
}
.xn-offcanvas-header-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(192, 0, 0, 0.4), transparent);
}
.xn-offcanvas-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.xn-brand-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(192, 0, 0, 0.15), rgba(192, 0, 0, 0.05));
    border: 1px solid rgba(192, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.xn-brand-logo img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.xn-brand-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.xn-brand-text {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--xn-color);
    letter-spacing: 0.5px;
}
.xn-brand-sub {
    font-size: 0.65rem;
    color: var(--xn-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.xn-close-modern {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--xn-transition-smooth);
    position: relative;
    overflow: hidden;
}
.xn-close-ring {
    position: absolute;
    inset: 4px;
    border-radius: 10px;
    border: 2px solid transparent;
    transition: all var(--xn-transition-smooth);
}
.xn-close-modern:hover .xn-close-ring {
    border-color: rgba(192, 0, 0, 0.4);
}
.xn-close-modern:hover {
    background: rgba(192, 0, 0, 0.1);
    border-color: rgba(192, 0, 0, 0.2);
    transform: scale(1.05);
}
.xn-close-modern:active {
    transform: scale(0.92);
}
.xn-close-icon {
    position: relative;
    z-index: 1;
    color: var(--xn-text-muted);
    font-size: 1rem;
    transition: all var(--xn-transition-smooth);
}
.xn-close-modern:hover .xn-close-icon {
    color: #ef4444;
    transform: rotate(90deg);
}
.xn-offcanvas-body-modern {
    padding: 0;
    height: calc(100% - 78px);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(192, 0, 0, 0.3) transparent;
    display: flex;
    flex-direction: column;
}
.xn-offcanvas-body-modern::-webkit-scrollbar {
    width: 3px;
}
.xn-offcanvas-body-modern::-webkit-scrollbar-track {
    background: 0 0;
}
.xn-offcanvas-body-modern::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--xn-accent), #f44);
    border-radius: 10px;
}
.xn-hero-profile {
    position: relative;
    margin: 16px 16px 0;
    padding: 20px;
    border-radius: 20px;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
}
.xn-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.xn-hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(192, 0, 0, 0.12) 0, transparent 50%);
}
.xn-hero-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 2px 2px, var(--xn-glass-border) 1px, transparent 0);
    background-size: 20px 20px;
}
.xn-hero-glow {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(192, 0, 0, 0.15) 0, transparent 60%);
    animation: xn-glow-drift 8s ease-in-out infinite;
}
@keyframes xn-glow-drift {
    0%,
    100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(-20%, 20%);
    }
}
.xn-avatar-toggle {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
}
.xn-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.xn-profile-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
.xn-hero-avatar {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.xn-avatar-ring {
    position: absolute;
    inset: -3px;
    border-radius: var(--xn-radius-full);
    padding: 2px;
}
.xn-avatar-ring-inner {
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 14, 0.98);
    border-radius: var(--xn-radius-full);
}
.xn-avatar-image {
    position: absolute;
    inset: 4px;
    border-radius: var(--xn-radius-full);
    overflow: hidden;
    background: var(--xn-element-bg);
}
.xn-avatar-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.xn-avatar-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    background: #22c55e;
    border: 3px solid rgba(10, 10, 14, 0.98);
    border-radius: var(--xn-radius-full);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
    z-index: 2;
}
.xn-avatar-verified {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    background: rgba(10, 10, 14, 0.9);
    border-radius: var(--xn-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.xn-avatar-verified i {
    font-size: 0.7rem;
    color: #3b82f6;
}
.xn-profile-details {
    flex: 1;
    min-width: 0;
}
.xn-hero-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--xn-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}
.xn-hero-name:hover {
    color: var(--xn-accent);
}
.xn-name-arrow {
    font-size: 0.75rem;
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: all var(--xn-transition-base);
}
.xn-hero-name:hover .xn-name-arrow {
    opacity: 0.7;
    transform: translate(0, 0);
}
.xn-hero-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    font-size: 0.75rem;
}
.xn-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--xn-text-muted);
}
.xn-meta-item i {
    font-size: 0.8rem;
    color: var(--xn-text-muted);
}
.xn-meta-value {
    font-weight: 700;
    color: var(--xn-accent);
}
.xn-meta-divider {
    width: 3px;
    height: 3px;
    background: var(--xn-glass-border);
    border-radius: var(--xn-radius-full);
}
.xn-meta-online {
    color: #22c55e;
}
.xn-online-dot {
    width: 6px;
    height: 6px;
    background: #22c55e;
    border-radius: var(--xn-radius-full);
    animation: xn-online-pulse 2s ease-in-out infinite;
}
@keyframes xn-online-pulse {
    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
    }
    50% {
        opacity: 0.7;
        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);
    }
}
.xn-quick-actions-row {
    display: flex;
    gap: 8px;
}
.xn-action-chip {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--xn-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    position: relative;
    transition: all var(--xn-transition-base);
}
.xn-action-chip:hover {
    background: rgba(192, 0, 0, 0.1);
    border-color: rgba(192, 0, 0, 0.2);
    color: var(--xn-color);
    transform: translateY(-2px);
}
.xn-action-chip i {
    font-size: 0.9rem;
}
.xn-chip-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.65rem;
    font-weight: 700;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-radius: 100px;
    color: var(--xn-color);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}
.xn-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 12px 16px;
}
.xn-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px 12px;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 14px;
    text-decoration: none;
    color: var(--xn-text-muted);
    transition: all var(--xn-transition-smooth);
    position: relative;
    overflow: hidden;
}
.xn-quick-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--xn-accent), #f44);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.xn-quick-item:hover::before {
    opacity: 0.08;
}
.xn-quick-item:hover {
    color: var(--xn-color);
    border-color: var(--xn-glass-border);
    transform: translateY(-3px);
    box-shadow: var(--xn-shadow-md);
}
.xn-quick-item.xn-quick-primary {
    background: linear-gradient(135deg, rgba(192, 0, 0, 0.12), rgba(192, 0, 0, 0.06));
    border-color: rgba(192, 0, 0, 0.2);
}
.xn-quick-item.xn-quick-primary .xn-quick-icon-wrap {
    background: linear-gradient(135deg, var(--xn-accent), #f44);
    color: var(--xn-color);
    box-shadow: 0 4px 12px rgba(192, 0, 0, 0.35);
}
.xn-quick-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--xn-element-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    position: relative;
    z-index: 1;
    transition: all var(--xn-transition-smooth);
}
.xn-quick-item:hover .xn-quick-icon-wrap {
    background: rgba(192, 0, 0, 0.15);
    color: var(--xn-accent);
}
.xn-quick-item.xn-quick-primary:hover .xn-quick-icon-wrap {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(192, 0, 0, 0.5);
}
.xn-quick-pulse {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: var(--xn-glass-border);
    animation: xn-quick-pulse 2s ease-in-out infinite;
}
@keyframes xn-quick-pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.3;
    }
}
.xn-quick-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-align: center;
    position: relative;
    z-index: 1;
    line-height: 1.3;
    color: var(--xn-text-muted);
    word-break: break-word;
    hyphens: auto;
}
.xn-section-modern {
    margin: 0 16px 12px;
    padding: 14px;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 18px;
}
.xn-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--xn-glass-border);
}
.xn-section-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(192, 0, 0, 0.15), rgba(192, 0, 0, 0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--xn-accent);
    font-size: 0.8rem;
}
.xn-section-title {
    flex: 1;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--xn-text-muted);
}
.xn-section-link {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--xn-accent);
    text-decoration: none;
    transition: all var(--xn-transition-base);
}
.xn-section-link:hover {
    color: #f66;
}
.xn-section-link i {
    font-size: 0.65rem;
    transition: transform 0.2s ease;
}
.xn-section-link:hover i {
    transform: translateX(3px);
}
.xn-content-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.xn-content-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 12px;
    text-decoration: none;
    transition: all var(--xn-transition-base);
}
.xn-content-item:hover {
    background: var(--xn-element-bg);
    border-color: var(--xn-glass-border);
    transform: translateX(4px);
}
.xn-content-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: all var(--xn-transition-base);
}
.xn-icon-feeds {
    background: rgba(239, 122, 68, 0.1);
    color: #ef8844;
}
.xn-icon-videos {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}
.xn-icon-photos {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}
.xn-icon-shorts {
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
}
.xn-icon-gifs {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}
.xn-icon-blogs {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}
.xn-content-item:hover .xn-content-icon {
    transform: scale(1.1);
}
.xn-content-name {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--xn-color);
}
.xn-content-arrow {
    font-size: 0.7rem;
    color: var(--xn-text-muted);
    opacity: 0;
    transform: translateX(-5px);
    transition: all var(--xn-transition-base);
    flex-shrink: 0;
}
.xn-content-item:hover .xn-content-arrow {
    opacity: 1;
    transform: translateX(0);
}
.xn-account-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}
.xn-account-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 14px;
    text-decoration: none;
    color: var(--xn-text-muted);
    transition: all var(--xn-transition-base);
}
.xn-account-card:hover {
    background: var(--xn-element-bg);
    border-color: var(--xn-glass-border);
    color: var(--xn-color);
    transform: translateY(-2px);
}
.xn-account-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--xn-element-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all var(--xn-transition-base);
}
.xn-account-card:hover .xn-account-icon {
    background: rgba(192, 0, 0, 0.12);
    color: var(--xn-accent);
}
.xn-account-card span {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--xn-color);
}
.xn-logout-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 14px;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.12);
    border-radius: 12px;
    color: rgba(239, 68, 68, 0.85);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--xn-transition-base);
}
.xn-logout-modern:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.25);
    color: #ef4444;
}
.xn-logout-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--xn-transition-base);
}
.xn-logout-modern:hover .xn-logout-icon {
    background: rgba(239, 68, 68, 0.2);
    transform: rotate(-10deg);
}
.xn-logout-arrow {
    margin-left: auto;
    opacity: 0;
    transform: translateX(-5px);
    transition: all var(--xn-transition-base);
}
.xn-logout-modern:hover .xn-logout-arrow {
    opacity: 0.7;
    transform: translateX(0);
}
.xn-welcome-modern {
    margin: 16px 16px;
    padding: 20px 16px;
    background: var(--xn-hero-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 22px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.xn-welcome-visual {
    margin-bottom: 14px;
    position: relative;
}
.xn-welcome-particles {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.xn-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--xn-accent);
    border-radius: var(--xn-radius-full);
    opacity: 0.4;
    animation: xn-particle-float 4s ease-in-out infinite;
}
.xn-particle:first-child {
    top: 10%;
    left: 20%;
    animation-delay: 0s;
}
.xn-particle:nth-child(2) {
    top: 30%;
    right: 15%;
    animation-delay: 1s;
}
.xn-particle:nth-child(3) {
    bottom: 20%;
    left: 25%;
    animation-delay: 2s;
}
.xn-particle:nth-child(4) {
    bottom: 30%;
    right: 20%;
    animation-delay: 3s;
}
@keyframes xn-particle-float {
    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.4;
    }
    50% {
        transform: translateY(-15px) scale(1.2);
        opacity: 0.8;
    }
}
.xn-welcome-orb {
    width: 70px;
    height: 70px;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.xn-orb-ring {
    position: absolute;
    border-radius: var(--xn-radius-full);
    border: 1px solid rgba(192, 0, 0, 0.25);
    animation: xn-orb-pulse 3s ease-in-out infinite;
}
.xn-orb-ring-1 {
    inset: 0;
    animation-delay: 0s;
}
.xn-orb-ring-2 {
    inset: -8px;
    animation-delay: 0.4s;
}
.xn-orb-ring-3 {
    inset: -16px;
    animation-delay: 0.8s;
}
@keyframes xn-orb-pulse {
    0%,
    100% {
        opacity: 0.2;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.08);
    }
}
.xn-orb-center {
    width: 46px;
    height: 46px;
    border-radius: var(--xn-radius-full);
    background: linear-gradient(135deg, var(--xn-accent), #f44);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(192, 0, 0, 0.45);
    animation: xn-orb-glow 3s ease-in-out infinite;
}
@keyframes xn-orb-glow {
    0%,
    100% {
        box-shadow: 0 0 30px rgba(192, 0, 0, 0.45);
    }
    50% {
        box-shadow: 0 0 45px rgba(192, 0, 0, 0.6);
    }
}
.xn-orb-center i {
    font-size: 1.2rem;
    color: var(--xn-color);
}
.xn-welcome-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--xn-color);
    margin-bottom: 6px;
}
.xn-welcome-desc {
    font-size: 0.75rem;
    color: var(--xn-text-muted);
    line-height: 1.5;
    margin-bottom: 14px;
    padding: 0 8px;
}
.xn-features-mini {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 14px;
    padding: 10px 8px;
    background: var(--xn-element-bg);
    border-radius: 12px;
}
.xn-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--xn-text-muted);
    font-size: 0.6rem;
    min-width: 45px;
    text-align: center;
}
.xn-feature-item i {
    font-size: 0.95rem;
    color: var(--xn-text-muted);
    display: block;
}
.xn-auth-modern {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.xn-btn-signup {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--xn-accent), #e62222);
    border-radius: 12px;
    text-decoration: none;
    color: var(--xn-color);
    font-weight: 600;
    font-size: 0.85rem;
    overflow: hidden;
    transition: all var(--xn-transition-smooth);
    white-space: nowrap;
}
.xn-btn-signup:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(192, 0, 0, 0.45);
    color: var(--xn-color);
}
.xn-btn-content {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
    white-space: nowrap;
}
.xn-btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    animation: xn-shine 2.5s ease-in-out infinite;
}
@keyframes xn-shine {
    0% {
        left: -100%;
    }
    100%,
    40% {
        left: 100%;
    }
}
.xn-btn-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-border-color);
    border-radius: 12px;
    text-decoration: none;
    color: var(--xn-color-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    transition: all var(--xn-transition-smooth);
}
.xn-btn-login:hover {
    background: var(--xn-element-hover-bg);
    border-color: var(--xn-accent);
    color: var(--xn-color);
    transform: translateY(-2px);
}
.xn-welcome-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 0.65rem;
    color: var(--xn-text-muted);
}
.xn-welcome-footer i {
    color: #22c55e;
    font-size: 0.75rem;
}
.xn-prefs-modern {
    margin: 0 16px 12px;
    padding: 14px;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 18px;
}
.xn-pref-modern {
    margin-bottom: 6px;
}
.xn-pref-modern:last-child {
    margin-bottom: 0;
}
.xn-pref-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    margin: 0;
}
.xn-pref-item {
    position: relative;
}
.xn-pref-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 12px;
    color: var(--xn-text-muted);
    cursor: pointer;
    transition: all var(--xn-transition-base);
    font-size: 0.85rem;
    font-weight: 500;
}
.xn-pref-trigger:hover {
    background: var(--xn-element-hover-bg);
    color: var(--xn-color);
}
.xn-pref-trigger[aria-expanded='true'] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
    background: var(--xn-element-hover-bg);
}
.xn-pref-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--xn-element-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: all var(--xn-transition-base);
}
.xn-pref-trigger:hover .xn-pref-icon {
    background: rgba(192, 0, 0, 0.12);
    color: var(--xn-accent);
}
.xn-pref-label {
    flex: 1;
    text-align: left;
}
.xn-pref-chevron {
    font-size: 0.7rem;
    opacity: 0.5;
    transition: all var(--xn-transition-smooth);
}
.xn-pref-trigger[aria-expanded='true'] .xn-pref-chevron {
    transform: rotate(180deg);
    opacity: 1;
}
.xn-pref-content {
    flex: 1;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.xn-pref-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--xn-color);
    line-height: 1.3;
}
.xn-pref-desc {
    font-size: 0.72rem;
    color: var(--xn-text-muted);
    font-weight: 400;
    line-height: 1.3;
}
.xn-pref-icon-lang {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(37, 99, 235, 0.08)) !important;
    color: #60a5fa !important;
}
.xn-pref-icon-theme {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(147, 51, 234, 0.08)) !important;
    color: #c084fc !important;
}
.xn-pref-icon-content {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(22, 163, 74, 0.08)) !important;
    color: #4ade80 !important;
}
.xn-pref-trigger:hover .xn-pref-icon-lang {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(37, 99, 235, 0.12)) !important;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.15);
}
.xn-pref-trigger:hover .xn-pref-icon-theme {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(147, 51, 234, 0.12)) !important;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.15);
}
.xn-pref-trigger:hover .xn-pref-icon-content {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(22, 163, 74, 0.12)) !important;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.15);
}
.xn-pref-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--xn-glass-border), transparent);
    margin: 8px 0;
}
.xn-pref-arrow {
    font-size: 0.7rem;
    opacity: 0.5;
    transition: all var(--xn-transition-smooth);
    margin-left: auto;
}
.xn-pref-trigger[aria-expanded='true'] .xn-pref-arrow {
    transform: rotate(180deg);
    opacity: 1;
}
.xn-pref-collapse {
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-top: none;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}
.xn-pref-dropdown {
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-top: none;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}
.xn-pref-options {
    padding: 6px;
    max-height: 180px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--xn-scrollbar-color) transparent;
}
.xn-pref-options::-webkit-scrollbar {
    width: 3px;
}
.xn-pref-options::-webkit-scrollbar-thumb {
    background: var(--xn-scrollbar-color);
    border-radius: 10px;
}
.xn-pref-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--xn-text-muted);
    font-size: 0.78rem;
    transition: all var(--xn-transition-base);
}
.xn-pref-option:hover {
    background: var(--xn-element-hover-bg);
    color: var(--xn-color);
    transform: translateX(2px);
}
.xn-pref-option.active {
    background: rgba(192, 0, 0, 0.1);
    color: var(--xn-accent);
}
.xn-pref-option-label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}
.xn-pref-check {
    color: var(--xn-accent);
    font-size: 1rem;
    display: flex;
    align-items: center;
    animation: checkPop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes checkPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
.xn-option-text {
    display: flex;
    align-items: center;
    gap: 8px;
}
.xn-option-check {
    color: var(--xn-accent);
    font-size: 0.9rem;
}
.xn-prefs-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
}
.xn-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.xn-section-header .xn-section-label {
    margin-bottom: 0;
}
.xn-pref-card {
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.xn-pref-card:hover {
    border-color: var(--xn-glass-border);
    background: var(--xn-element-bg);
}
.xn-pref-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}
.xn-pref-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.xn-pref-card-icon.xn-pref-icon-lang {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.1));
    color: #60a5fa;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}
.xn-pref-card-icon.xn-pref-icon-theme {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(147, 51, 234, 0.1));
    color: #c084fc;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.1);
}
.xn-pref-card-icon.xn-pref-icon-content {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(22, 163, 74, 0.1));
    color: #4ade80;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.1);
}
.xn-pref-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.xn-pref-card-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--xn-color);
    line-height: 1.3;
}
.xn-pref-card-current {
    font-size: 0.72rem;
    color: var(--xn-accent);
    font-weight: 500;
    opacity: 0.9;
}
.xn-pref-card-toggle {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    color: var(--xn-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    flex-shrink: 0;
}
.xn-pref-card-toggle:hover {
    background: var(--xn-element-bg);
    color: var(--xn-color);
}
.xn-pref-card-toggle i {
    font-size: 0.75rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.xn-pref-card-toggle[aria-expanded='true'] i {
    transform: rotate(180deg);
}
.xn-pref-card-toggle[aria-expanded='true'] {
    background: rgba(192, 0, 0, 0.1);
    border-color: rgba(192, 0, 0, 0.2);
    color: var(--xn-accent);
}
.xn-pref-card-body {
    background: var(--xn-panel-bg);
    border-top: 1px solid var(--xn-glass-border);
    padding: 12px;
}
.xn-pref-options-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.xn-pref-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 20px;
    color: var(--xn-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}
.xn-pref-chip:hover {
    background: var(--xn-element-bg);
    border-color: var(--xn-glass-border);
    color: var(--xn-color);
    transform: translateY(-1px);
}
.xn-pref-chip.active {
    background: linear-gradient(135deg, rgba(192, 0, 0, 0.2), rgba(192, 0, 0, 0.1));
    border-color: rgba(192, 0, 0, 0.3);
    color: #fff;
    box-shadow: 0 2px 8px rgba(192, 0, 0, 0.15);
}
.xn-chip-text {
    line-height: 1;
}
.xn-chip-check {
    font-size: 0.85rem;
    color: var(--xn-accent);
}
.xn-theme-switcher {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.xn-theme-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 10px;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--xn-text-muted);
    transition: all 0.25s ease;
    position: relative;
}
.xn-theme-option:hover {
    background: var(--xn-element-bg);
    border-color: var(--xn-glass-border);
    transform: translateY(-2px);
}
.xn-theme-option.active {
    background: linear-gradient(135deg, rgba(192, 0, 0, 0.12), rgba(192, 0, 0, 0.06));
    border-color: rgba(192, 0, 0, 0.25);
    color: #fff;
}
.xn-theme-preview {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}
.xn-theme-preview.xn-theme-dark {
    background: linear-gradient(135deg, #1a1a2e 0, #16213e 100%);
    color: #60a5fa;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.xn-theme-preview.xn-theme-light {
    background: linear-gradient(135deg, #f8fafc 0, #e2e8f0 100%);
    color: #f59e0b;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.xn-theme-preview.xn-theme-auto {
    background: linear-gradient(135deg, #1a1a2e 50%, #f8fafc 50%);
    color: #a78bfa;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.xn-theme-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.xn-theme-active-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--xn-accent);
    font-size: 0.85rem;
}
.xn-content-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.xn-content-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 10px;
    text-decoration: none;
    color: var(--xn-text-muted);
    transition: all 0.2s ease;
}
.xn-content-option:hover {
    background: var(--xn-element-bg);
    border-color: var(--xn-glass-border);
    color: var(--xn-color);
    transform: translateX(3px);
}
.xn-content-option.active {
    background: linear-gradient(135deg, rgba(192, 0, 0, 0.12), rgba(192, 0, 0, 0.06));
    border-color: rgba(192, 0, 0, 0.2);
    color: #fff;
}
.xn-content-icon {
    font-size: 1.1rem;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.xn-content-label {
    flex: 1;
    font-size: 0.8rem;
    font-weight: 500;
}
.xn-content-check {
    color: var(--xn-accent);
    font-size: 0.9rem;
    animation: checkPop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.xn-prefs-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 10px;
    color: var(--xn-color);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.xn-prefs-trigger:hover {
    background: var(--xn-element-hover-bg);
    border-color: var(--xn-border-color);
}
.xn-prefs-trigger[aria-expanded='true'] {
    border-radius: 10px 10px 0 0;
    border-bottom-color: transparent;
    background: var(--xn-element-hover-bg);
}
.xn-prefs-trigger-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.xn-prefs-trigger-left i {
    font-size: 0.95rem;
    opacity: 0.7;
}
.xn-prefs-trigger-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.xn-prefs-summary {
    display: flex;
    gap: 4px;
}
.xn-pref-badge {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
}
.xn-pref-badge-lang {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}
.xn-pref-badge-theme {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
}
.xn-pref-badge-content {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}
.xn-prefs-arrow {
    font-size: 0.7rem;
    opacity: 0.5;
    transition: transform 0.25s ease;
}
.xn-prefs-trigger[aria-expanded='true'] .xn-prefs-arrow {
    transform: rotate(180deg);
    opacity: 1;
}
.xn-section-preferences .xn-prefs-grid {
    padding: 8px;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.xn-pref-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--xn-element-bg);
    border-radius: 8px;
    text-decoration: none;
    color: var(--xn-text-muted);
    transition: all 0.2s ease;
}
.xn-pref-row:hover {
    background: var(--xn-element-hover-bg);
    color: var(--xn-color);
}
.xn-pref-row[aria-expanded='true'] {
    background: var(--xn-element-hover-bg);
    border-radius: 8px 8px 0 0;
}
.xn-pref-row-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.xn-pref-row-icon.xn-pref-icon-lang {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.1));
    color: #60a5fa;
}
.xn-pref-row-icon.xn-pref-icon-theme {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(147, 51, 234, 0.1));
    color: #c084fc;
}
.xn-pref-row-icon.xn-pref-icon-content {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(22, 163, 74, 0.1));
    color: #4ade80;
}
.xn-pref-row-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.xn-pref-row-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--xn-color);
}
.xn-pref-row-value {
    font-size: 0.68rem;
    color: var(--xn-accent);
    font-weight: 500;
}
.xn-pref-row-arrow {
    font-size: 0.65rem;
    opacity: 0.4;
    transition: transform 0.2s ease;
}
.xn-pref-row[aria-expanded='true'] .xn-pref-row-arrow {
    transform: rotate(90deg);
    opacity: 0.8;
}
.xn-pref-expand {
    background: var(--xn-element-bg);
    border-radius: 0 0 8px 8px;
    padding: 8px;
    margin-bottom: 4px;
}
.xn-pref-options-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.xn-pref-options-inline .xn-pref-chip {
    padding: 6px 10px;
    font-size: 0.7rem;
    border-radius: 14px;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    color: var(--xn-text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
}
.xn-pref-options-inline .xn-pref-chip:hover {
    background: var(--xn-element-hover-bg);
    color: var(--xn-color);
}
.xn-pref-options-inline .xn-pref-chip.active {
    background: rgba(192, 0, 0, 0.15);
    border-color: rgba(192, 0, 0, 0.25);
    color: var(--xn-color);
}
.xn-pref-options-inline .xn-pref-chip i {
    font-size: 0.7rem;
    color: var(--xn-accent);
}
.xn-theme-row {
    display: flex;
    gap: 6px;
}
.xn-theme-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--xn-text-muted);
    font-size: 0.7rem;
    font-weight: 500;
    transition: all 0.2s ease;
}
.xn-theme-btn i {
    font-size: 0.85rem;
}
.xn-theme-btn:hover {
    background: var(--xn-element-hover-bg);
    color: var(--xn-color);
}
.xn-theme-btn.active {
    background: rgba(192, 0, 0, 0.15);
    border-color: rgba(192, 0, 0, 0.25);
    color: var(--xn-color);
}
.xn-offcanvas-footer {
    margin-top: auto;
    padding: 16px 20px;
    background: var(--xn-element-bg);
    border-top: 1px solid var(--xn-glass-border);
}
.xn-footer-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    margin-bottom: 10px;
}
.xn-footer-link {
    font-size: 0.7rem;
    color: var(--xn-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
}
.xn-footer-link:hover {
    color: var(--xn-accent);
}
.xn-footer-dot {
    width: 3px;
    height: 3px;
    background: var(--xn-handle-bg);
    border-radius: var(--xn-radius-full);
    flex-shrink: 0;
}
.xn-footer-copyright {
    text-align: center;
    font-size: 0.65rem;
    color: var(--xn-text-muted);
}
@media (max-width: 400px) {
    .xn-offcanvas-modern {
        width: 100% !important;
    }
    .xn-quick-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .xn-account-grid {
        grid-template-columns: 1fr;
    }
    .xn-features-mini {
        gap: 10px;
        padding: 10px 6px;
    }
    .xn-welcome-modern {
        margin: 12px;
        padding: 16px 12px;
    }
    .xn-welcome-orb {
        width: 60px;
        height: 60px;
    }
    .xn-orb-center {
        width: 40px;
        height: 40px;
    }
    .xn-orb-center i {
        font-size: 1rem;
    }
    .xn-orb-ring-2 {
        inset: -6px;
    }
    .xn-orb-ring-3 {
        inset: -12px;
    }
    .xn-welcome-title {
        font-size: 1rem;
    }
    .xn-welcome-desc {
        font-size: 0.7rem;
        margin-bottom: 12px;
    }
    .xn-btn-login,
    .xn-btn-signup {
        padding: 10px 16px;
        font-size: 0.8rem;
    }
    .xn-prefs-modern {
        margin: 0 12px 12px;
        padding: 12px;
    }
    .xn-pref-trigger {
        padding: 10px 12px;
        font-size: 0.8rem;
    }
    .xn-pref-icon {
        width: 26px;
        height: 26px;
        font-size: 0.85rem;
    }
}
.btn-telegram {
    background-color: #08c;
    color: #fff;
    border-color: #08c;
}
.btn-telegram:focus,
.btn-telegram:hover {
    background-color: #069;
    border-color: #069;
    color: #fff;
}
.btn-whatsapp {
    background-color: #25d366;
    color: #fff;
    border-color: #25d366;
}
.btn-whatsapp:focus,
.btn-whatsapp:hover {
    background-color: #1da851;
    border-color: #1da851;
    color: #fff;
}
.btn-twitter {
    background-color: #000;
    color: #fff;
    border-color: #000;
}
.btn-twitter:focus,
.btn-twitter:hover {
    background-color: #333;
    border-color: #333;
    color: #fff;
}
.dropdown-menu button.dropdown-item {
    background: 0 0;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}
.dropdown-menu button.dropdown-item:focus,
.dropdown-menu button.dropdown-item:hover {
    background-color: var(--xn-element-bg);
}
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:hover {
    background-color: var(--xn-element-hover-bg);
}
.xn-user-btn {
    position: relative;
    padding: 0.35rem !important;
    transition: transform 0.15s ease;
}
.xn-user-btn:hover {
    transform: scale(1.05);
}
.xn-dropdown-avatar {
    position: relative;
    width: 45px;
    height: 45px;
    border-radius: var(--xn-radius-full);
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}
.xn-dropdown-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--xn-radius-full);
    border: 2px solid transparent;
    background:
        linear-gradient(var(--xn-bg), var(--xn-bg)) padding-box,
        linear-gradient(135deg, var(--xn-primary), #ff6b6b) border-box;
}
.xn-avatar-status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: #22c55e;
    border: 2px solid var(--xn-bg);
    border-radius: var(--xn-radius-full);
}
#userDropdownBtn.dropdown-toggle::after {
    display: none;
}
.xn-user-dropdown {
    padding: 0;
    overflow-y: auto;
    background: var(--xn-bg);
    -webkit-overflow-scrolling: touch;
}
.xn-dropdown-header {
    padding: 0;
}
.xn-dropdown-profile {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: all var(--xn-transition-base);
    position: relative;
}
.xn-dropdown-profile:hover {
    background: var(--xn-element-bg);
}
.xn-dropdown-profile:hover .xn-profile-arrow {
    transform: translateX(4px);
    opacity: 1;
}
.xn-dropdown-avatar-lg {
    position: relative;
    border-radius: var(--xn-radius-full);
    flex-shrink: 0;
}
.xn-dropdown-avatar-lg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--xn-radius-full);
}
.xn-dropdown-avatar-lg .xn-avatar-ring {
    position: absolute;
    inset: -3px;
    border-radius: var(--xn-radius-full);
    border: 2px solid var(--xn-primary);
    opacity: 0.5;
}
.xn-dropdown-user-info {
    flex: 1;
    min-width: 0;
}
.xn-dropdown-username {
    display: block;
    font-weight: 700;
    color: var(--xn-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}
.xn-dropdown-meta {
    display: flex;
    align-items: center;
}
.xn-meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--xn-color-secondary);
}
.xn-meta-badge i {
    font-size: 0.7rem;
}
.xn-meta-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #22c55e;
}
.xn-status-dot {
    width: 6px;
    height: 6px;
    background: #22c55e;
    border-radius: var(--xn-radius-full);
    animation: statusPulse 2s infinite;
}
@keyframes statusPulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}
.xn-profile-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--xn-radius-full);
    background: var(--xn-element-bg);
    color: var(--xn-color-secondary);
    transition: all var(--xn-transition-base);
    opacity: 0.7;
    width: 28px;
    height: 28px;
}
.xn-dropdown-section {
    border-top: 1px solid var(--xn-glass-border);
}
.xn-dropdown-section:first-of-type {
    border-top: none;
}
.xn-section-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.25rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--xn-color-secondary);
    opacity: 0.8;
}
.xn-section-label i {
    font-size: 0.7rem;
    opacity: 0.6;
    color: var(--xn-primary);
}
.xn-quick-actions-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.xn-quick-action-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 0.5rem;
    border-radius: var(--xn-radius-lg);
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.xn-quick-action-btn.xn-action-upload {
    background: linear-gradient(135deg, var(--xn-primary), #ff4040);
    color: #fff;
    box-shadow: 0 4px 16px rgba(var(--xn-primary-rgb), 0.3);
}
.xn-quick-action-btn.xn-action-upload::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.5s ease;
}
.xn-quick-action-btn.xn-action-upload:hover::before {
    left: 100%;
}
.xn-quick-action-btn.xn-action-upload:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 32px rgba(var(--xn-primary-rgb), 0.5);
    color: #fff;
}
.xn-quick-action-btn.xn-action-upload .xn-quick-icon {
    animation: upload-pulse 2.5s ease-in-out infinite;
}
@keyframes upload-pulse {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2px);
    }
}
.xn-quick-action-btn.xn-action-messages,
.xn-quick-action-btn.xn-action-requests {
    background: var(--xn-element-bg);
    color: var(--xn-color);
    border: 1px solid transparent;
}
.xn-quick-action-btn.xn-action-messages:hover,
.xn-quick-action-btn.xn-action-requests:hover {
    background: var(--xn-element-hover-bg);
    border-color: var(--xn-glass-border);
    color: var(--xn-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.xn-quick-action-btn.xn-action-messages:hover .xn-quick-icon,
.xn-quick-action-btn.xn-action-requests:hover .xn-quick-icon {
    color: var(--xn-primary);
    transform: scale(1.1);
}
.xn-quick-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all var(--xn-transition-base);
}
.xn-notification-dot {
    position: absolute;
    top: -2px;
    right: -6px;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #ff6b6b, #ef4444);
    border-radius: 50%;
    border: 2px solid var(--xn-panel-bg-solid);
    animation: pulse-dot 2s infinite ease-in-out;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}
@keyframes pulse-dot {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 0 12px rgba(239, 68, 68, 0.7);
    }
}
.xn-quick-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    opacity: 0.9;
}
.xn-quick-action-btn:hover .xn-quick-label {
    opacity: 1;
}
.xn-quick-badge {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    min-width: 18px;
    height: 18px;
    padding: 0 0.35rem;
    font-size: 0.65rem;
    font-weight: 700;
    background: #ef4444;
    color: #fff;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.xn-dropdown-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}
.xn-action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 0.5rem;
    border-radius: var(--xn-radius-base);
    text-decoration: none;
    color: var(--xn-color-secondary);
    transition: all var(--xn-transition-fast);
}
.xn-action-item:hover {
    background: var(--xn-element-bg);
    color: var(--xn-color);
}
.xn-action-item:hover .xn-action-icon {
    transform: scale(1.15) rotate(-3deg);
}
.xn-action-item:hover .xn-action-text {
    color: var(--xn-color);
}
.xn-action-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--xn-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.xn-icon-liked {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(96, 165, 250, 0.08));
    color: #60a5fa;
}
.xn-icon-favorites {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(236, 72, 153, 0.08));
    color: #ec4899;
}
.xn-icon-subs {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.08));
    color: #fbbf24;
}
.xn-icon-watchlater {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.08));
    color: #22c55e;
}
.xn-action-text {
    font-size: 0.68rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    opacity: 0.85;
    transition: opacity var(--xn-transition-fast);
}
.xn-action-item:hover .xn-action-text {
    opacity: 1;
}
.xn-content-grid {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.xn-content-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--xn-radius-lg);
    text-decoration: none;
    color: var(--xn-color);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.xn-content-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--xn-primary);
    border-radius: 0 2px 2px 0;
    transition: height 0.2s ease;
}
.xn-content-item:hover::before {
    height: 60%;
}
.xn-content-item:hover {
    background: var(--xn-element-bg);
    padding-left: 1rem;
}
.xn-content-item:hover .xn-content-icon {
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.xn-content-item:hover .xn-content-arrow {
    opacity: 1;
    transform: translateX(4px);
    color: var(--xn-primary);
}
.xn-content-item:hover .xn-content-label {
    color: var(--xn-primary);
}
.xn-content-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--xn-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}
.xn-icon-videos {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1));
    color: #ef4444;
}
.xn-icon-photos {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
    color: #3b82f6;
}
.xn-icon-shorts {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(168, 85, 247, 0.1));
    color: #a855f7;
}
.xn-icon-gifs {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
    color: #22c55e;
}
.xn-icon-blogs {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.1));
    color: #fbbf24;
}
.xn-icon-playlist {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.2), rgba(20, 184, 166, 0.1));
    color: #14b8a6;
}
.xn-content-info {
    flex: 1;
    min-width: 0;
}
.xn-content-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--xn-color);
    transition: color var(--xn-transition-fast);
}
.xn-content-arrow {
    font-size: 0.75rem;
    color: var(--xn-color-secondary);
    opacity: 0;
    transition: all var(--xn-transition-fast);
}
.xn-section-account {
    padding: 0.65rem 0.75rem !important;
    background: linear-gradient(180deg, var(--xn-element-bg), transparent);
    border-top: 1px solid var(--xn-glass-border);
    border-radius: 0;
    margin-top: 0;
}
.xn-account-actions {
    display: flex;
    gap: 0.5rem;
}
.xn-account-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-radius: var(--xn-radius-lg);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--xn-element-hover-bg);
    color: var(--xn-color-secondary);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}
.xn-account-item:hover {
    background: var(--xn-bg);
    color: var(--xn-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: var(--xn-glass-border);
}
.xn-account-item:hover .xn-account-icon {
    transform: scale(1.15);
}
.xn-account-item.xn-item-logout {
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.xn-account-item.xn-item-logout:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}
.xn-account-item.xn-item-logout:hover .xn-account-icon {
    transform: translateX(2px);
}
.xn-account-icon {
    font-size: 0.9rem;
    transition: transform var(--xn-transition-fast);
}
.xn-account-label {
    line-height: 1;
}
.xn-dropdown-quick-actions {
    padding: 0;
}
.xn-dropdown-action {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--xn-element-bg);
    text-decoration: none;
    color: var(--xn-color);
    font-weight: 500;
    transition: all var(--xn-transition-base);
    position: relative;
}
.xn-dropdown-action:hover {
    background: var(--xn-element-hover-bg);
    color: var(--xn-primary);
}
.xn-dropdown-action i {
    opacity: 0.8;
}
.xn-dropdown-action:hover i {
    opacity: 1;
}
.xn-dropdown-action.xn-action-primary {
    background: linear-gradient(135deg, var(--xn-primary), #ff6b6b);
    color: #fff;
}
.xn-dropdown-action.xn-action-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(var(--xn-primary-rgb), 0.4);
    color: #fff;
}
.xn-dropdown-action.xn-action-primary i {
    opacity: 1;
}
.xn-action-badge {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    min-width: 18px;
    height: 18px;
    padding: 0 0.4rem;
    font-size: 0.65rem;
    font-weight: 700;
    background: #ef4444;
    color: #fff;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.xn-dropdown-grid {
    display: grid;
}
.xn-grid-item {
    display: flex;
    text-decoration: none;
    color: var(--xn-color);
    transition: all var(--xn-transition-base);
}
.xn-grid-item:hover {
    background: var(--xn-element-hover-bg);
}
.xn-grid-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--xn-transition-base);
}
.xn-grid-item:hover .xn-grid-icon {
    transform: scale(1.1);
}
.xn-icon-videos {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}
.xn-icon-photos {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}
.xn-icon-shorts {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}
.xn-icon-gifs {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}
.xn-icon-favorites {
    background: rgba(236, 72, 153, 0.15);
    color: #ec4899;
}
.xn-icon-history {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}
.xn-grid-label {
    font-weight: 500;
    color: var(--xn-color-secondary);
    transition: color 0.2s ease;
}
.xn-grid-item:hover .xn-grid-label {
    color: var(--xn-color);
}
.xn-section-actions {
    background: var(--xn-element-bg);
}
.xn-action-item {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--xn-color);
    font-weight: 500;
    transition: all var(--xn-transition-fast);
}
.xn-action-item:hover {
    background: var(--xn-element-bg);
}
.xn-action-item:hover .xn-action-icon {
    transform: scale(1.1);
}
.xn-action-item > i {
    margin-left: auto;
    color: var(--xn-color-secondary);
    opacity: 0;
    transition: opacity 0.15s ease;
}
.xn-action-item:hover > i {
    opacity: 1;
}
.xn-action-icon {
    background: var(--xn-element-hover-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--xn-transition-base);
}
.xn-action-logout {
    color: #ef4444;
}
.xn-action-logout .xn-action-icon {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}
.xn-action-logout:hover {
    background: rgba(239, 68, 68, 0.1);
}
.xn-dropdown-guest {
    text-align: center;
}
.xn-guest-visual {
    margin-bottom: 1.25rem;
}
.xn-guest-orb {
    position: relative;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--xn-primary), #ff6b6b);
    border-radius: var(--xn-radius-full);
    color: #fff;
}
.xn-guest-orb .xn-orb-ring {
    position: absolute;
    inset: -8px;
    border: 2px solid var(--xn-primary);
    border-radius: var(--xn-radius-full);
    opacity: 0.3;
    animation: orbRing 3s infinite;
}
.xn-guest-orb .xn-orb-ring:nth-child(2) {
    inset: -16px;
    animation-delay: 0.5s;
    opacity: 0.2;
}
@keyframes orbRing {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.5;
    }
}
.xn-dropdown-guest-title {
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--xn-color);
}
.xn-dropdown-guest-desc {
    color: var(--xn-color-secondary);
    margin-bottom: 1rem;
    line-height: 1.5;
}
.xn-guest-features {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--xn-color-secondary);
}
.xn-guest-features span {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.xn-guest-features i {
    color: var(--xn-primary);
}
.xn-dropdown-auth-btns {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.xn-btn-signup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--xn-primary);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: all var(--xn-transition-base);
}
.xn-btn-signup:hover {
    box-shadow: 0 10px 30px rgba(var(--xn-primary-rgb), 0.4);
    color: #fff;
}
.xn-btn-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--xn-element-bg);
    color: var(--xn-color);
    text-decoration: none;
    font-weight: 500;
    transition: all var(--xn-transition-base);
    border: 1px solid var(--xn-border-color);
}
.xn-btn-login:hover {
    background: var(--xn-element-hover-bg);
    color: var(--xn-color);
}
.dropdown-menu.xn-user-dropdown {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    padding: 0;
    border: none;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--xn-bg);
    position: fixed !important;
    transform: none !important;
    margin: 0 !important;
    animation: mobileSlideUp 0.3s ease-out;
    z-index: 1055;
}
@keyframes mobileSlideUp {
    from {
        opacity: 0;
        transform: translateY(100%) !important;
    }
    to {
        opacity: 1;
        transform: translateY(0) !important;
    }
}
.xn-user-dropdown::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    margin: 12px auto 8px;
}
.dropdown.show::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: -1;
    animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.xn-dropdown-header {
    padding: 0;
    background: linear-gradient(180deg, rgba(var(--xn-primary-rgb), 0.15), transparent);
}
.xn-dropdown-profile {
    padding: 1rem 1.25rem 1.25rem;
    gap: 1rem;
}
.xn-dropdown-avatar-lg {
    width: 60px;
    height: 60px;
}
.xn-dropdown-username {
    font-size: 1.15rem;
}
.xn-dropdown-section {
    padding: 1rem 1rem;
}
.xn-dropdown-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
.xn-dropdown-action {
    padding: 1rem 0.5rem;
    border-radius: 14px;
    min-height: 80px;
}
.xn-dropdown-action i {
    font-size: 1.5rem;
}
.xn-dropdown-action span {
    font-size: 0.8rem;
}
.xn-dropdown-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
.xn-grid-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 14px;
}
.xn-grid-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 1.25rem;
}
.xn-grid-label {
    font-size: 0.85rem;
    text-align: left;
}
.xn-pref-trigger {
    padding: 0.875rem 1rem;
    min-height: 56px;
}
.xn-pref-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1.1rem;
}
.xn-pref-text {
    font-size: 0.95rem;
}
.xn-pref-options {
    padding: 0.75rem;
}
.xn-pref-option {
    padding: 0.75rem 1rem;
    min-height: 48px;
    font-size: 0.95rem;
    border-radius: 10px;
}
.xn-action-item {
    padding: 1rem;
    min-height: 56px;
    border-radius: 14px;
    font-size: 0.95rem;
}
.xn-action-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 1.15rem;
}
.xn-dropdown-guest {
    padding: 2rem 1.5rem 1.5rem;
}
.xn-guest-orb {
    width: 80px;
    height: 80px;
    font-size: 2rem;
}
.xn-dropdown-guest-title {
    font-size: 1.35rem;
}
.xn-dropdown-guest-desc {
    font-size: 0.95rem;
}
.xn-guest-features {
    gap: 1.25rem;
    font-size: 0.85rem;
    flex-wrap: wrap;
    justify-content: center;
}
.xn-btn-signup {
    padding: 1rem 1.5rem;
    font-size: 1rem;
    border-radius: 14px;
}
.xn-btn-login {
    padding: 0.875rem 1.5rem;
    font-size: 0.95rem;
    border-radius: 14px;
}
.xn-section-label {
    font-size: 0.75rem;
    padding: 0 0.5rem 0.75rem;
}
@media (min-width: 992px) {
    .dropdown-menu.xn-user-dropdown {
        min-width: 360px;
        max-width: 380px;
        width: auto;
        position: absolute !important;
        inset: 100% 0 auto auto !important;
        border-radius: 16px;
        box-shadow:
            0 20px 60px rgba(0, 0, 0, 0.4),
            0 0 0 1px rgba(255, 255, 255, 0.05) inset;
        margin-top: 0.5rem !important;
        animation: dropdownSlideIn 0.2s ease-out;
        max-height: 80vh;
    }
    @keyframes dropdownSlideIn {
        from {
            opacity: 0;
            transform: translateY(-10px) scale(0.98);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    .dropdown-menu.xn-user-dropdown::before {
        display: none;
    }
    .dropdown.show::after {
        display: none;
    }
    .xn-dropdown-profile {
        padding: 1.25rem 1rem;
        gap: 0.875rem;
    }
    .xn-dropdown-avatar-lg {
        width: 52px;
        height: 52px;
    }
    .xn-dropdown-username {
        font-size: 1.05rem;
    }
    .xn-dropdown-section {
        padding: 0.75rem;
    }
    .xn-dropdown-quick-actions {
        gap: 0.5rem;
    }
    .xn-dropdown-action {
        padding: 0.75rem 0.5rem;
        border-radius: 12px;
        min-height: auto;
    }
    .xn-dropdown-action i {
        font-size: 1.25rem;
    }
    .xn-dropdown-action span {
        font-size: 0.75rem;
    }
    .xn-dropdown-grid {
        gap: 0.5rem;
    }
    .xn-grid-item {
        padding: 0.875rem 0.5rem;
        gap: 0.4rem;
        border-radius: 12px;
    }
    .xn-grid-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 1.1rem;
    }
    .xn-grid-label {
        font-size: 0.7rem;
    }
    .xn-pref-trigger {
        padding: 0.65rem 0.75rem;
        min-height: auto;
    }
    .xn-pref-icon {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        font-size: 0.9rem;
    }
    .xn-pref-text {
        font-size: 0.875rem;
    }
    .xn-pref-options {
        padding: 0.5rem;
    }
    .xn-pref-option {
        padding: 0.5rem 0.75rem;
        min-height: auto;
        font-size: 0.85rem;
        border-radius: 6px;
    }
    .xn-action-item {
        padding: 0.75rem;
        min-height: auto;
        border-radius: 10px;
        font-size: 0.9rem;
    }
    .xn-action-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        font-size: 1rem;
    }
    .xn-dropdown-guest {
        padding: 2rem 1.5rem;
    }
    .xn-guest-orb {
        width: 70px;
        height: 70px;
        font-size: 1.75rem;
    }
    .xn-dropdown-guest-title {
        font-size: 1.2rem;
    }
    .xn-dropdown-guest-desc {
        font-size: 0.875rem;
    }
    .xn-guest-features {
        gap: 1rem;
        font-size: 0.75rem;
    }
    .xn-btn-signup {
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
        border-radius: 12px;
    }
    .xn-btn-login {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
        border-radius: 12px;
    }
    .xn-section-label {
        font-size: 0.7rem;
        padding: 0 0.5rem 0.5rem;
    }
    .xn-quick-actions-row {
        gap: 0.4rem;
        margin-bottom: 0.6rem;
    }
    .xn-quick-action-btn {
        padding: 0.7rem 0.4rem;
        border-radius: 10px;
    }
    .xn-quick-icon {
        font-size: 1.1rem;
    }
    .xn-quick-label {
        font-size: 0.7rem;
    }
    .xn-quick-badge {
        min-width: 16px;
        height: 16px;
        font-size: 0.6rem;
    }
    .xn-dropdown-actions-grid {
        gap: 0.35rem;
    }
    .xn-action-item {
        padding: 0.6rem 0.4rem;
        flex-direction: column;
    }
    .xn-action-icon {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
    .xn-action-text {
        font-size: 0.65rem;
    }
    .xn-content-grid {
        gap: 0.15rem;
    }
    .xn-content-item {
        padding: 0.5rem 0.6rem;
        gap: 0.6rem;
    }
    .xn-content-icon {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
    }
    .xn-content-label {
        font-size: 0.8rem;
    }
    .xn-content-arrow {
        font-size: 0.7rem;
    }
    .xn-section-account {
        padding: 0.6rem 0.75rem !important;
        margin-top: 0.35rem;
    }
    .xn-account-actions {
        gap: 0.4rem;
    }
    .xn-account-item {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }
    .xn-account-icon {
        font-size: 0.8rem;
    }
}
@media (min-width: 1200px) {
    .dropdown-menu.xn-user-dropdown {
        min-width: 380px;
        max-width: 400px;
    }
}
@media (hover: none) and (pointer: coarse) {
    .xn-action-item:hover,
    .xn-dropdown-action:hover,
    .xn-grid-item:hover,
    .xn-pref-option:hover,
    .xn-pref-trigger:hover {
        transform: none;
    }
    .xn-dropdown-action:active {
        transform: scale(0.97);
        opacity: 0.8;
    }
    .xn-grid-item:active {
        transform: scale(0.97);
        opacity: 0.8;
    }
    .xn-action-item:active,
    .xn-pref-option:active,
    .xn-pref-trigger:active {
        opacity: 0.7;
    }
    .xn-btn-login:active,
    .xn-btn-signup:active {
        transform: scale(0.98);
    }
    .xn-pref-trigger {
        padding: 14px 16px;
        min-height: 54px;
    }
    .xn-pref-option {
        padding: 12px 14px;
        min-height: 48px;
    }
    .xn-pref-icon {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }
    .xn-pref-title {
        font-size: 0.9rem;
    }
    .xn-pref-desc {
        font-size: 0.75rem;
    }
    .xn-quick-action-btn:active {
        transform: scale(0.97);
        opacity: 0.85;
    }
    .xn-quick-action-btn:hover {
        transform: none;
    }
    .xn-account-item:active,
    .xn-action-item:active,
    .xn-content-item:active {
        transform: scale(0.97);
        opacity: 0.8;
    }
}
@media (prefers-reduced-motion: reduce) {
    .xn-account-item,
    .xn-action-item,
    .xn-btn-login,
    .xn-btn-signup,
    .xn-content-item,
    .xn-dropdown-action,
    .xn-grid-icon,
    .xn-grid-item,
    .xn-pref-arrow,
    .xn-quick-action-btn,
    .xn-user-dropdown {
        animation: none !important;
        transition: opacity 0.15s ease !important;
    }
    .xn-avatar-ring,
    .xn-notification-dot,
    .xn-orb-ring,
    .xn-status-dot {
        animation: none !important;
    }
}
.xn-user-dropdown::-webkit-scrollbar {
    width: 6px;
}
.xn-user-dropdown::-webkit-scrollbar-track {
    background: 0 0;
}
.xn-user-dropdown::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.3);
    border-radius: 3px;
}
.xn-user-dropdown::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.5);
}
@media (max-width: 767px) and (orientation: landscape) {
    .xn-user-dropdown {
        max-height: 100vh;
        border-radius: 0;
    }
    .xn-user-dropdown::before {
        display: none;
    }
    .xn-dropdown-guest {
        padding: 1.5rem 1rem;
    }
    .xn-guest-orb {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    .xn-dropdown-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .xn-grid-item {
        flex-direction: column;
        padding: 0.75rem 0.5rem;
    }
    .xn-pref-trigger {
        padding: 10px 12px;
        gap: 10px;
    }
    .xn-pref-icon {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }
    .xn-pref-title {
        font-size: 0.8rem;
    }
    .xn-pref-desc {
        display: none;
    }
    .xn-section-preferences {
        padding: 12px 16px !important;
    }
}
@media (max-width: 576px) {
    .xn-section-preferences {
        padding: 16px !important;
        margin: 0 !important;
        background: 0 0 !important;
        border: none !important;
    }
    .xn-pref-list {
        gap: 10px;
    }
    .xn-pref-divider {
        margin: 10px 0;
    }
    .xn-pref-trigger {
        padding: 14px;
        gap: 12px;
        border-radius: 14px;
        font-size: 0.9rem;
    }
    .xn-pref-icon {
        width: 38px;
        height: 38px;
        font-size: 1.05rem;
        border-radius: 10px;
    }
    .xn-pref-content {
        gap: 3px;
    }
    .xn-pref-title {
        font-size: 0.9rem;
        font-weight: 600;
    }
    .xn-pref-desc {
        font-size: 0.75rem;
        line-height: 1.4;
    }
    .xn-pref-arrow {
        font-size: 0.75rem;
    }
    .xn-pref-collapse {
        border-radius: 0 0 14px 14px;
    }
    .xn-pref-options {
        padding: 8px;
        max-height: 220px;
    }
    .xn-pref-option {
        padding: 12px 14px;
        border-radius: 10px;
        font-size: 0.85rem;
        min-height: 50px;
    }
    .xn-pref-option-label {
        gap: 8px;
        font-weight: 500;
    }
    .xn-pref-check {
        font-size: 1.1rem;
    }
    .xn-section-label {
        padding: 0 0 12px;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 600;
        opacity: 0.6;
    }
}
.profile-hero {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 20px;
    margin-top: 1rem;
    background: var(--xn-glass-bg);
    border: 1px solid var(--xn-border-color);
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.2);
}
.profile-hero__banner {
    position: relative;
    height: 180px;
    overflow: hidden;
}
.profile-hero__banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.8) saturate(1.15);
    transition:
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.6s ease;
}
.profile-hero:hover .profile-hero__banner-img {
    transform: scale(1.03);
    filter: brightness(0.85) saturate(1.25);
}
.profile-hero__banner-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.6) 80%, rgba(0, 0, 0, 0.88) 100%);
    pointer-events: none;
}
.profile-hero__banner-noise {
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
    pointer-events: none;
    mix-blend-mode: overlay;
}
.pornstar-pager {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 64px;
    font-size: 1.25rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
    opacity: 0;
    transition:
        opacity 0.3s ease,
        background 0.25s ease,
        transform 0.25s ease;
}
.profile-hero:hover .pornstar-pager {
    opacity: 1;
}
.pornstar-pager--prev {
    left: 0;
    border-radius: 0 10px 10px 0;
}
.pornstar-pager--next {
    right: 0;
    border-radius: 10px 0 0 10px;
}
.pornstar-pager:hover {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}
.pornstar-pager:active {
    transform: translateY(-50%) scale(0.92);
}
.profile-hero__top-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 14px 16px;
    z-index: 5;
}
.profile-hero__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 8px;
    background: rgba(16, 185, 129, 0.15);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: var(--xn-radius-base, 100px);
    font-size: 11px;
    font-weight: 700;
    color: #34d399;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid rgba(16, 185, 129, 0.22);
}
.profile-hero__status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow:
        0 0 8px #34d399,
        0 0 20px rgba(16, 185, 129, 0.25);
    animation: heroPulse 2s ease-in-out infinite;
}
@keyframes heroPulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.45;
        transform: scale(0.8);
    }
}
.profile-hero__role-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.profile-hero__role-badge--admin {
    background: linear-gradient(135deg, var(--xn-accent), #ff4040);
    color: #fff;
    box-shadow: 0 4px 18px var(--xn-accent-glow);
}
.profile-hero__role-badge--admin i {
    font-size: 13px;
}
.profile-hero__menu {
    margin-left: auto;
}
.profile-hero__menu-trigger {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
}
.profile-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px 18px;
    margin-top: -46px;
    position: relative;
    gap: 14px;
}
.profile-hero__avatar-wrap {
    flex-shrink: 0;
    z-index: 2;
}
.profile-hero__avatar-ring {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    padding: 3px;
    background: var(--xn-bg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}
.profile-hero__avatar-ring--online {
    background: conic-gradient(#34d399, #059669, #34d399);
    animation: ringSpin 4s linear infinite;
}
@keyframes ringSpin {
    to {
        --ring-angle: 360deg;
    }
}
@keyframes ringRotate {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 200% 200%;
    }
}
.profile-hero__avatar-ring--online {
    background: linear-gradient(135deg, #34d399, #059669, #34d399, #059669);
    background-size: 300% 300%;
    animation: ringRotate 3s linear infinite;
}
.profile-hero__avatar-ring:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}
.profile-hero__avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: var(--xn-element-bg);
}
.profile-hero__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.profile-hero__avatar > .bg-black {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 100% !important;
    color: var(--xn-text-muted);
    background: var(--xn-element-bg) !important;
    border: none !important;
}
.profile-hero__avatar > .bg-black > div {
    font-size: 2rem;
}
.profile-hero__avatar-ring:hover .profile-hero__avatar img {
    transform: scale(1.1);
}
.profile-hero__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.profile-hero__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.profile-hero__username {
    font-size: 20px;
    font-weight: 800;
    color: var(--xn-color);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}
.profile-hero__badges {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.profile-hero__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    font-size: 12px;
    transition: transform 0.2s ease;
}
.profile-hero__badge:hover {
    transform: scale(1.15) rotate(5deg);
}
.profile-hero__badge--male {
    background: rgba(59, 130, 246, 0.1);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.2);
}
.profile-hero__badge--female {
    background: rgba(236, 72, 153, 0.1);
    color: #f472b6;
    border: 1px solid rgba(236, 72, 153, 0.2);
}
.profile-hero__badge--premium {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.08));
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.25);
    animation: premiumShine 3s ease-in-out infinite;
}
@keyframes premiumShine {
    0%,
    100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.3);
    }
}
.profile-hero__engagement {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--xn-bg-color);
    border: 1px solid var(--xn-border-color);
    border-radius: 10px;
    overflow: hidden;
}
.profile-hero__vote {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--xn-text-muted);
    background: 0 0;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-variant-numeric: tabular-nums;
    position: relative;
}
.profile-hero__vote i {
    font-size: 13px;
    transition: transform 0.2s ease;
}
.profile-hero__vote:hover i {
    transform: scale(1.2);
}
.profile-hero__vote--up + .profile-hero__vote--down::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--xn-border-color);
}
.profile-hero__vote--up.active,
.profile-hero__vote--up:hover {
    color: #f472b6;
    background: rgba(244, 114, 182, 0.08);
}
.profile-hero__vote--down.active,
.profile-hero__vote--down:hover {
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.06);
}
.profile-hero__vote:active {
    transform: scale(0.94);
}
.profile-hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.profile-hero__social-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.profile-hero__subscribe {
    display: flex;
}
.profile-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 50rem;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}
.profile-hero__btn i {
    font-size: 15px;
    transition: transform 0.2s ease;
}
.profile-hero__btn:hover i {
    transform: scale(1.1);
}
.profile-hero__btn:active {
    transform: scale(0.95);
}
.profile-hero__btn--icon {
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--xn-bg-color);
    color: var(--xn-color);
    border: 1px solid var(--xn-border-color);
}
.profile-hero__btn--icon:hover {
    color: var(--xn-accent);
    border-color: rgba(192, 0, 0, 0.3);
    box-shadow: 0 4px 14px rgba(192, 0, 0, 0.1);
    transform: translateY(-2px);
}
.profile-hero__btn--cta {
    background: linear-gradient(135deg, var(--xn-accent) 0, #e62020 100%);
    color: #fff;
    box-shadow: 0 4px 16px var(--xn-accent-glow);
    padding: 10px 20px;
    letter-spacing: 0.02em;
}
.profile-hero__btn--cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px var(--xn-accent-glow);
    filter: brightness(1.1);
    color: #fff;
}
.profile-hero__btn--cta:active {
    transform: translateY(0) scale(0.97);
}
.profile-hero__btn:focus-visible,
.profile-hero__menu-trigger:focus-visible {
    outline: 2px solid var(--xn-accent);
    outline-offset: 2px;
}
@media (min-width: 576px) {
    .profile-hero {
        border-radius: 24px;
    }
    .profile-hero__banner {
        height: 200px;
    }
    .profile-hero__content {
        flex-direction: row;
        align-items: center;
        padding: 0 24px 20px;
        margin-top: -80px;
        gap: 16px;
    }
    .profile-hero__avatar-ring {
        width: 115px;
        height: 115px;
    }
    .profile-hero__info {
        align-items: flex-start;
        min-width: 0;
        gap: 4px;
    }
    .profile-hero__meta {
        justify-content: flex-start;
    }
    .profile-hero__username {
        font-size: 24px;
        max-width: 320px;
    }
    .profile-hero__actions {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 8px;
    }
}
@media (min-width: 768px) {
    .profile-hero__banner {
        height: 220px;
    }
    .profile-hero__content {
        padding: 0 28px 22px;
        margin-top: -58px;
        gap: 20px;
    }
    .profile-hero__avatar-ring {
        width: 120px;
        height: 120px;
    }
    .profile-hero__username {
        font-size: 26px;
        max-width: 380px;
    }
    .profile-hero__menu-trigger {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    .profile-hero__btn--icon {
        width: 42px;
        height: 42px;
    }
    .profile-hero__vote {
        padding: 7px 16px;
        font-size: 13px;
    }
}
@media (min-width: 992px) {
    .profile-hero__banner {
        height: 240px;
    }
    .profile-hero__content {
        margin-top: -80px;
        padding: 0 32px 24px;
    }
    .profile-hero__avatar-ring {
        width: 150px;
        height: 150px;
    }
    .profile-hero__username {
        font-size: 28px;
        max-width: none;
    }
}
@media (max-width: 575px) {
    .profile-hero--user {
        border-radius: 14px;
        margin-top: 8px;
        margin-bottom: 12px;
        background: var(--xn-bg);
    }
    .profile-hero--user .profile-hero__banner {
        height: 156px;
    }
    .profile-hero--user .profile-hero__banner-fade {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 10%, rgba(0, 0, 0, 0.28) 55%, var(--xn-bg) 100%);
    }
    .profile-hero--user .profile-hero__top-bar {
        padding: 10px;
    }
    .profile-hero--user .profile-hero__menu-trigger {
        width: 36px;
        height: 36px;
        border-radius: 50%;
    }
    .profile-hero--user .profile-hero__content {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: 'avatar' 'info' 'actions';
        justify-items: center;
        align-items: start;
        gap: 10px;
        padding: 0 12px 14px;
        margin-top: -80px;
    }
    .profile-hero--user .profile-hero__avatar-wrap {
        grid-area: avatar;
    }
    .profile-hero--user .profile-hero__avatar-ring {
        padding: 3px;
        border: 3px solid var(--xn-bg);
    }
    .profile-hero--user .profile-hero__info {
        grid-area: info;
        align-items: center;
        min-width: 0;
        padding-top: 0;
        gap: 8px;
    }
    .profile-hero--user .profile-hero__meta {
        justify-content: center;
        gap: 5px;
        flex-wrap: nowrap;
    }
    .profile-hero--user .profile-hero__username {
        font-size: 18px;
        max-width: none;
        min-width: 0;
    }
    .profile-hero--user .profile-hero__engagement {
        align-self: center;
        border-radius: 9px;
    }
    .profile-hero--user .profile-hero__vote {
        min-height: 32px;
        padding: 6px 12px;
    }
    .profile-hero--user .profile-hero__actions {
        grid-area: actions;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: stretch;
        gap: 8px;
        width: 100%;
    }
    .profile-hero--user .profile-hero__social-group {
        gap: 8px;
    }
    .profile-hero--user .profile-hero__btn--icon {
        width: 42px;
        height: 42px;
        border-radius: 10px;
    }
    .profile-hero--user .profile-hero__subscribe {
        min-width: 0;
    }
    .profile-hero--user .profile-hero__subscribe .profile-hero__btn--cta {
        min-height: 42px;
        padding: 9px 12px;
        border-radius: 10px;
    }
    .user-nav--profile {
        padding: 4px;
        border-radius: 14px;
        margin-bottom: 16px;
    }
    .user-nav--profile .user-nav-scroll {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 3px;
        overflow: visible;
        padding: 0;
    }
    .user-nav--profile .nav-pill {
        min-width: 0;
        min-height: 52px;
        padding: 7px 2px;
        border-radius: 10px;
        gap: 3px;
        flex-direction: column;
    }
    .user-nav--profile .nav-pill span:not(.nav-chevron) {
        display: block;
        max-width: 100%;
        overflow: hidden;
        font-size: 9px;
        line-height: 1.1;
        text-overflow: ellipsis;
    }
    .user-nav--profile .nav-pill i {
        font-size: 17px;
    }
    .user-nav--profile .nav-pill .nav-chevron {
        display: none;
    }
    .user-nav--profile .user-nav-wrapper::after,
    .user-nav--profile .user-nav-wrapper::before {
        display: none;
    }
    .user-nav--profile .nav-panel {
        margin-top: 5px;
        border-radius: 11px;
    }
    .user-nav--profile .nav-panel-body {
        padding: 10px;
    }
    .user-nav--profile .nav-mega-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }
    .user-nav--profile .nav-mega-item {
        min-height: 88px;
        padding: 9px 5px;
    }
}
@media (max-width: 380px) {
    .profile-hero--user .profile-hero__banner {
        height: 142px;
    }
    .profile-hero--user .profile-hero__content {
        gap: 9px;
        padding: 0 10px 12px;
        margin-top: -80px;
    }
    .profile-hero--user .profile-hero__avatar-ring {
        width: 150px;
        height: 150px;
    }
    .profile-hero--user .profile-hero__info {
        padding-top: 0;
    }
    .profile-hero--user .profile-hero__username {
        font-size: 16px;
    }
    .profile-hero--user .profile-hero__btn--icon {
        width: 38px;
        height: 38px;
    }
    .profile-hero--user .profile-hero__subscribe .profile-hero__btn--cta {
        min-height: 38px;
        font-size: 11px;
    }
    .user-nav--profile .nav-pill {
        min-height: 48px;
    }
    .user-nav--profile .nav-pill span:not(.nav-chevron) {
        font-size: 8px;
    }
}
@media (max-width: 575px) {
    .profile-hero {
        border-radius: 16px;
        margin-bottom: 14px;
        margin-top: 0.5rem;
    }
    .profile-hero__banner {
        height: 130px;
    }
    .pornstar-pager {
        width: 32px;
        height: 48px;
        font-size: 1rem;
        opacity: 1;
    }
    .profile-hero__banner-fade {
        background: linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, 0.5) 65%, rgba(0, 0, 0, 0.92) 100%);
    }
    .profile-hero:hover .profile-hero__banner-img {
        transform: none;
        filter: brightness(0.8) saturate(1.15);
    }
    .profile-hero__top-bar {
        padding: 10px 12px;
    }
    .profile-hero__status {
        padding: 3px 10px 3px 7px;
        font-size: 10px;
        gap: 5px;
    }
    .profile-hero__status-dot {
        width: 6px;
        height: 6px;
    }
    .profile-hero__role-badge {
        padding: 4px 10px;
        font-size: 9px;
        border-radius: 6px;
        gap: 4px;
    }
    .profile-hero__role-badge--admin i {
        font-size: 11px;
    }
    .profile-hero__menu-trigger {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        font-size: 14px;
    }
    .profile-hero__content {
        padding: 0 14px 14px;
        margin-top: -38px;
        gap: 12px;
    }
    .profile-hero__avatar-ring {
        padding: 2.5px;
    }
    .profile-hero__avatar-ring:hover {
        transform: none;
    }
    .profile-hero__username {
        font-size: 18px;
        max-width: 200px;
    }
    .profile-hero__badges {
        gap: 3px;
    }
    .profile-hero__badge {
        width: 19px;
        height: 19px;
        font-size: 11px;
        border-radius: 6px;
    }
    .profile-hero__badge:hover {
        transform: none;
    }
    .profile-hero__engagement {
        border-radius: 8px;
    }
    .profile-hero__vote {
        padding: 5px 11px;
        font-size: 11px;
        gap: 4px;
    }
    .profile-hero__vote i {
        font-size: 12px;
    }
    .profile-hero__vote:hover i {
        transform: none;
    }
    .profile-hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .profile-hero__social-group {
        justify-content: center;
    }
    .profile-hero__subscribe {
        justify-content: stretch;
    }
    .profile-hero__subscribe .profile-hero__btn--cta {
        width: 100%;
        justify-content: center;
        padding: 10px 16px;
    }
    .profile-hero__btn--icon {
        width: 36px;
        height: 36px;
        border-radius: 9px;
    }
    .profile-hero__btn i {
        font-size: 14px;
    }
    .profile-hero__btn:hover i {
        transform: none;
    }
    .profile-hero__btn--cta {
        padding: 9px 18px;
        font-size: 12px;
        border-radius: 9px;
    }
    .profile-hero .dropdown-menu {
        border-radius: 12px;
        min-width: 170px;
        padding: 4px;
    }
    .profile-hero .dropdown-item {
        padding: 9px 12px;
        font-size: 12px;
        gap: 8px;
        border-radius: 8px;
    }
    .profile-hero .dropdown-item i {
        font-size: 14px;
        width: 18px;
    }
    .profile-hero .dropdown-item:hover {
        transform: none;
    }
}
@media (max-width: 380px) {
    .profile-hero {
        border-radius: 12px;
        margin-bottom: 10px;
    }
    .profile-hero__banner {
        height: 100px;
    }
    .profile-hero__top-bar {
        padding: 8px;
    }
    .profile-hero__status {
        padding: 2px 8px 2px 5px;
        font-size: 9px;
        gap: 4px;
    }
    .profile-hero__status-dot {
        width: 5px;
        height: 5px;
    }
    .profile-hero__role-badge {
        padding: 3px 8px;
        font-size: 8px;
    }
    .profile-hero__menu-trigger {
        width: 28px;
        height: 28px;
        border-radius: 7px;
        font-size: 12px;
    }
    .profile-hero__content {
        padding: 0 10px 10px;
        margin-top: -30px;
        gap: 10px;
    }
    .profile-hero__avatar-ring {
        padding: 2px;
    }
    .profile-hero__username {
        font-size: 15px;
        max-width: 160px;
    }
    .profile-hero__badge {
        width: 16px;
        height: 16px;
        font-size: 9px;
        border-radius: 5px;
    }
    .profile-hero__vote {
        padding: 4px 9px;
        font-size: 10px;
    }
    .profile-hero__vote i {
        font-size: 11px;
    }
    .profile-hero__btn--icon {
        width: 30px;
        height: 30px;
        border-radius: 7px;
    }
    .profile-hero__btn--icon i {
        font-size: 12px;
    }
    .profile-hero__btn--cta {
        padding: 7px 14px;
        font-size: 10px;
        border-radius: 7px;
    }
    .profile-hero__btn--cta i {
        font-size: 11px;
    }
    .profile-hero .dropdown-menu {
        border-radius: 10px;
        min-width: 155px;
        padding: 3px;
    }
    .profile-hero .dropdown-item {
        padding: 7px 10px;
        font-size: 11px;
        gap: 7px;
        border-radius: 7px;
    }
    .profile-hero .dropdown-item i {
        font-size: 13px;
        width: 16px;
    }
}
.pm {
    background: var(--xn-glass-bg);
    border-radius: var(--xn-radius-xl);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--xn-glass-border);
    box-shadow:
        0 4px 24px var(--xn-glass-shadow),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    overflow: hidden;
    position: relative;
}
.pm::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--xn-glass-border), transparent);
    pointer-events: none;
}
.pm__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 18px;
    border: none;
    background: 0 0;
    color: var(--xn-color);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--xn-transition-fast);
}
.pm__toggle:hover {
    background: var(--xn-element-bg);
}
.pm__toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pm__toggle-label i {
    font-size: 18px;
    color: var(--xn-accent);
}
.pm__toggle-chevron {
    font-size: 12px;
    color: var(--xn-text-muted);
    transition: transform var(--xn-transition-smooth);
}
.pm__toggle[aria-expanded='true'] .pm__toggle-chevron {
    transform: rotate(180deg);
}
.pm__list {
    list-style: none;
    margin: 0;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pm__divider {
    height: 1px;
    margin: 4px 12px;
    background: var(--xn-border-color);
    opacity: 0.5;
}
.pm__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--xn-radius-lg);
    color: var(--xn-color-secondary);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    transition: all var(--xn-transition-smooth);
    position: relative;
    overflow: hidden;
}
.pm__link::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: 0 0;
    transition: all var(--xn-transition-smooth);
    z-index: 0;
}
.pm__link > * {
    position: relative;
    z-index: 1;
}
.pm__link:hover {
    color: var(--xn-text-hover);
}
.pm__link:hover::before {
    background: var(--xn-element-hover-bg);
}
.pm__link:active {
    transform: scale(0.98);
}
.pm__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--xn-radius-base);
    background: var(--xn-element-bg);
    flex-shrink: 0;
    transition: all var(--xn-transition-smooth);
}
.pm__icon i {
    font-size: 16px;
    transition: transform var(--xn-transition-smooth);
}
.pm__link:hover .pm__icon {
    background: var(--xn-element-hover-bg);
}
.pm__link:hover .pm__icon i {
    transform: scale(1.1);
}
.pm__link--active {
    color: #fff;
}
.pm__link--active::before {
    background: linear-gradient(135deg, var(--xn-accent) 0, #e62020 100%);
    box-shadow:
        0 4px 20px var(--xn-accent-glow),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}
.pm__link--active .pm__icon {
    background: rgba(255, 255, 255, 0.15);
}
.pm__link--active .pm__icon i {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
}
.pm__link--active:hover {
    color: #fff;
}
.pm__link--active:hover::before {
    background: linear-gradient(135deg, var(--xn-accent) 0, #e62020 100%);
    filter: brightness(1.08);
}
.pm__link--danger {
    color: var(--xn-text-muted);
}
.pm__link--danger .pm__icon {
    background: rgba(220, 53, 69, 0.1);
}
.pm__link--danger .pm__icon i {
    color: #dc3545;
}
.pm__link--danger:hover {
    color: #dc3545;
}
.pm__link--danger:hover::before {
    background: rgba(220, 53, 69, 0.08);
}
.pm__link--danger.pm__link--active::before {
    background: linear-gradient(135deg, #dc3545 0, #c82333 100%);
    box-shadow: 0 4px 20px rgba(220, 53, 69, 0.3);
}
.pm__link--danger.pm__link--active .pm__icon {
    background: rgba(255, 255, 255, 0.15);
}
.pm__link--danger.pm__link--active .pm__icon i {
    color: #fff;
}
.pm__link--danger.pm__link--active {
    color: #fff;
}
.pm__link--back {
    color: var(--xn-text-muted);
}
.pm__link--back .pm__icon {
    background: 0 0;
}
.pm__link--back:hover {
    color: var(--xn-accent);
}
.pm__link--back:hover .pm__icon i {
    transform: translateX(-3px);
}
@media (min-width: 1200px) {
    .pm__toggle {
        display: none;
    }
    .pm__collapse {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }
    .pm__list {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 2px;
        padding: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .pm__list::-webkit-scrollbar {
        display: none;
    }
    .pm__item {
        flex-shrink: 0;
    }
    .pm__item--back {
        margin-left: auto;
    }
    .pm__link {
        white-space: nowrap;
        padding: 10px 14px;
        gap: 10px;
    }
    .pm__icon {
        width: 28px;
        height: 28px;
    }
    .pm__icon i {
        font-size: 14px;
    }
    .pm__text {
        font-size: 13px;
    }
    .pm__divider {
        width: 1px;
        height: 24px;
        margin: auto 4px;
        align-self: center;
    }
}
@media (max-width: 1199.98px) {
    .pm__collapse {
        border-top: 1px solid var(--xn-border-color);
    }
    .pm__collapse.collapsing {
        transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .pm__list {
        padding: 8px;
    }
    .pm__link {
        padding: 12px 14px;
    }
    .pm__divider {
        margin: 4px 14px;
    }
}
.user-nav {
    background: var(--xn-glass-bg);
    border-radius: 20px;
    padding: 6px;
    margin-bottom: 24px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--xn-glass-border);
    box-shadow:
        0 4px 24px var(--xn-glass-shadow),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    position: relative;
    overflow: hidden;
}
.user-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--xn-glass-border), transparent);
}
.user-nav-scroll {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}
.user-nav-scroll::-webkit-scrollbar {
    display: none;
}
.nav-pill {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 14px;
    background: 0 0;
    color: var(--xn-text-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    border: none;
    flex-shrink: 0;
    scroll-snap-align: start;
    overflow: hidden;
    cursor: pointer;
    outline: 0;
}
.nav-pill::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: 0 0;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
}
.nav-pill > * {
    position: relative;
    z-index: 1;
}
.nav-pill:hover {
    color: var(--xn-text-hover);
}
.nav-pill:hover::before {
    background: var(--xn-element-bg);
}
.nav-pill:active {
    transform: scale(0.96);
}
.nav-pill.active {
    color: #fff;
}
.nav-pill.active::before {
    background: linear-gradient(135deg, var(--xn-accent) 0, #e62020 100%);
    box-shadow:
        0 4px 20px var(--xn-accent-glow),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}
.nav-pill i {
    font-size: 20px;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-pill:hover i {
    transform: scale(1.1);
}
.nav-pill.active i {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
}
.nav-ripple {
    position: absolute;
    border-radius: var(--xn-radius-full);
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: ripple-effect 0.6s ease-out forwards;
    pointer-events: none;
    z-index: 0;
}
@keyframes ripple-effect {
    to {
        transform: scale(4);
        opacity: 0;
    }
}
.nav-expand-trigger {
    cursor: pointer;
}
.nav-expand-trigger .nav-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-expand-trigger .nav-chevron i {
    font-size: 12px;
}
.nav-expand-trigger[aria-expanded='true'] .nav-chevron {
    transform: rotate(180deg);
}
.nav-panel {
    background: linear-gradient(180deg, var(--xn-glass-bg) 0, var(--xn-bg) 100%);
    border-radius: 18px;
    padding: 0;
    margin-top: 8px;
    border: 1px solid var(--xn-border-color);
    box-shadow:
        0 25px 80px var(--xn-glass-shadow),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    overflow: hidden;
}
.nav-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--xn-border-color);
}
.nav-panel-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--xn-color);
    display: flex;
    align-items: center;
    gap: 8px;
}
.nav-panel-title i {
    font-size: 16px;
    color: var(--xn-accent);
}
.nav-panel-close {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--xn-element-bg);
    border: none;
    color: var(--xn-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--xn-transition-base);
}
.nav-panel-close:hover {
    background: rgba(192, 0, 0, 0.2);
    color: var(--xn-accent);
}
.nav-panel-body {
    padding: 16px;
}
.nav-mega-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (min-width: 480px) {
    .nav-mega-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 576px) {
    .nav-mega-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (min-width: 768px) {
    .nav-mega-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 992px) {
    .nav-mega-grid {
        grid-template-columns: repeat(7, 1fr);
        gap: 12px;
    }
}
.nav-mega-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 12px;
    border-radius: 16px;
    background: var(--xn-element-bg);
    color: var(--xn-text-muted);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    border: 1px solid transparent;
    overflow: hidden;
}
.nav-mega-item:hover {
    background: var(--xn-element-bg);
    color: var(--xn-text-hover);
    border-color: var(--xn-border-color);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px var(--xn-glass-shadow);
}
.nav-mega-item:active {
    transform: translateY(-2px) scale(0.98);
}
.nav-mega-item.active {
    background: linear-gradient(135deg, rgba(192, 0, 0, 0.15) 0, rgba(192, 0, 0, 0.08) 100%);
    color: var(--xn-accent);
    border-color: rgba(192, 0, 0, 0.3);
    box-shadow: 0 0 30px var(--xn-accent-glow);
}
.nav-mega-item .nav-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--xn-element-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    border: 1px solid var(--xn-glass-border);
}
.nav-mega-item:hover .nav-icon-wrapper {
    background: linear-gradient(135deg, rgba(192, 0, 0, 0.2) 0, rgba(192, 0, 0, 0.1) 100%);
    border-color: rgba(192, 0, 0, 0.3);
    transform: scale(1.08);
}
.nav-mega-item.active .nav-icon-wrapper {
    background: linear-gradient(135deg, var(--xn-accent) 0, #e62020 100%);
    box-shadow: 0 4px 20px var(--xn-accent-glow);
    border-color: transparent;
}
.nav-mega-item i {
    font-size: 22px;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-mega-item.active i {
    color: #fff;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
}
.nav-mega-section {
    margin-bottom: 20px;
}
.nav-mega-section:last-child {
    margin-bottom: 0;
}
.nav-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--xn-text-muted);
    margin-bottom: 14px;
    padding: 0 4px;
}
.nav-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--xn-border-color), transparent);
}
@media (max-width: 575px) {
    .user-nav {
        border-radius: 12px;
        padding: 3px;
        margin-bottom: 12px;
    }
    .nav-pill {
        padding: 8px 12px;
        border-radius: 10px;
        gap: 6px;
    }
    .nav-pill span:not(.nav-chevron) {
        display: none;
    }
    .nav-pill i {
        font-size: 18px;
    }
    .nav-pill .nav-chevron {
        width: 14px;
        height: 14px;
        margin-left: 2px;
    }
    .nav-pill .nav-chevron i {
        font-size: 10px;
    }
    .nav-panel {
        border-radius: 12px;
        margin-top: 4px;
    }
    .nav-panel-header {
        padding: 10px 12px 8px;
    }
    .nav-panel-title {
        font-size: 11px;
        letter-spacing: 1px;
    }
    .nav-panel-title i {
        font-size: 14px;
    }
    .nav-panel-close {
        width: 26px;
        height: 26px;
        border-radius: 8px;
    }
    .nav-panel-close i {
        font-size: 12px;
    }
    .nav-panel-body {
        padding: 10px;
    }
    .nav-mega-grid {
        gap: 6px;
    }
    .nav-mega-item {
        padding: 10px 6px;
        border-radius: 10px;
        gap: 6px;
    }
    .nav-mega-item .nav-icon-wrapper {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }
    .nav-mega-item i {
        font-size: 16px;
    }
    .nav-mega-item span {
        font-size: 10px;
        line-height: 1.2;
    }
    .nav-mega-section {
        margin-bottom: 12px;
    }
    .nav-section-title {
        font-size: 9px;
        margin-bottom: 8px;
        letter-spacing: 1px;
    }
}
@media (max-width: 380px) {
    .nav-pill {
        padding: 7px 10px;
    }
    .nav-pill i {
        font-size: 16px;
    }
    .nav-mega-item {
        padding: 8px 4px;
    }
    .nav-mega-item .nav-icon-wrapper {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }
    .nav-mega-item i {
        font-size: 14px;
    }
    .nav-mega-item span {
        font-size: 9px;
    }
}
@media (min-width: 1200px) {
    .nav-pill {
        padding: 14px 24px;
    }
    .nav-mega-item {
        padding: 20px 14px;
    }
    .nav-mega-item .nav-icon-wrapper {
        width: 52px;
        height: 52px;
    }
}
.user-nav-wrapper {
    position: relative;
}
.user-nav-wrapper::after,
.user-nav-wrapper::before {
    content: '';
    position: absolute;
    top: 4px;
    bottom: 4px;
    width: 50px;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.user-nav-wrapper::before {
    left: 0;
    border-radius: 14px 0 0 14px;
    background: linear-gradient(90deg, var(--xn-glass-bg) 20%, transparent 100%);
}
.user-nav-wrapper::after {
    right: 0;
    border-radius: 0 14px 14px 0;
    background: linear-gradient(-90deg, var(--xn-glass-bg) 20%, transparent 100%);
}
.user-nav-wrapper.scroll-left::before,
.user-nav-wrapper.scroll-right::after {
    opacity: 1;
}
@keyframes nav-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}
.nav-mega-item.loading {
    background: linear-gradient(90deg, var(--xn-element-bg) 25%, rgba(255, 255, 255, 0.08) 50%, var(--xn-element-bg) 75%);
    background-size: 200% 100%;
    animation: nav-shimmer 1.5s infinite;
}
.nav-mega-item:focus-visible,
.nav-pill:focus-visible {
    outline: 2px solid var(--xn-accent);
    outline-offset: 2px;
}
.nav-mega-item {
    opacity: 0;
    animation: item-fade-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.collapse.show .nav-mega-item:first-child {
    animation-delay: 20ms;
}
.collapse.show .nav-mega-item:nth-child(2) {
    animation-delay: 40ms;
}
.collapse.show .nav-mega-item:nth-child(3) {
    animation-delay: 60ms;
}
.collapse.show .nav-mega-item:nth-child(4) {
    animation-delay: 80ms;
}
.collapse.show .nav-mega-item:nth-child(5) {
    animation-delay: 0.1s;
}
.collapse.show .nav-mega-item:nth-child(6) {
    animation-delay: 0.12s;
}
.collapse.show .nav-mega-item:nth-child(7) {
    animation-delay: 0.14s;
}
@keyframes item-fade-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@media (max-width: 575px) {
    .nav-pill[data-tooltip] {
        position: relative;
    }
    .nav-pill[data-tooltip]:active::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        padding: 6px 12px;
        background: var(--xn-bg);
        color: var(--xn-color);
        font-size: 12px;
        font-weight: 500;
        border-radius: 8px;
        white-space: nowrap;
        box-shadow: 0 4px 20px var(--xn-glass-shadow);
        margin-bottom: 8px;
        z-index: 100;
        border: 1px solid var(--xn-border-color);
    }
}
.user-info-card {
    border-radius: 16px;
    border: 1px solid var(--xn-glass-border);
}
.user-info-header {
    background: var(--xn-hero-bg);
    border-bottom: 1px solid var(--xn-glass-border);
}
.icon-wrap {
    width: 32px;
    height: 32px;
    background: rgba(220, 53, 69, 0.15);
}
.detail-row .icon-wrap {
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: rgba(220, 53, 69, 0.1);
}
.small-label {
    font-size: 0.65rem;
    letter-spacing: 0.5px;
}
.small-heading {
    font-size: 0.7rem;
    letter-spacing: 1px;
}
.info-pill {
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    backdrop-filter: blur(4px);
    transition: all var(--xn-transition-base);
    color: var(--xn-color);
}
.info-pill:hover {
    background: var(--xn-element-hover-bg);
    transform: translateY(-1px);
}
.stat-card {
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    transition: all var(--xn-transition-base);
}
.stat-card:hover {
    background: rgba(220, 53, 69, 0.08);
    border-color: rgba(220, 53, 69, 0.2);
    transform: translateY(-2px);
}
.social-btn {
    width: 44px;
    height: 44px;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    transition: all var(--xn-transition-base);
}
.social-btn:hover {
    background: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.4);
    transform: scale(1.08);
    color: #dc3545 !important;
}
.detail-row {
    background: var(--xn-element-bg);
    border-left: 3px solid transparent;
    transition: all var(--xn-transition-base);
}
.detail-row:hover {
    background: var(--xn-element-bg);
    border-left-color: #dc3545;
}
.about-box {
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
}
.show-more-btn {
    border: 1px solid var(--xn-glass-border);
    background: var(--xn-element-bg);
    transition: all var(--xn-transition-base);
}
.show-more-btn:hover {
    background: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.4);
    color: #fff !important;
}
.show-more-btn[aria-expanded='true'] .bi-chevron-down {
    transform: rotate(180deg);
}
.show-more-btn .bi-chevron-down {
    transition: transform 0.3s ease;
}
.activity-stat {
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
}
.activity-stat:hover {
    background: rgba(220, 53, 69, 0.06);
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.wall-card {
    border-radius: 16px;
    border: 1px solid var(--xn-glass-border);
    overflow: hidden;
    box-shadow: var(--xn-shadow-md);
}
.wall-tabs {
    background: var(--xn-hero-bg);
    border-bottom: 1px solid var(--xn-glass-border);
    padding: 0 0.5rem;
}
.wall-tabs .nav-link {
    color: var(--xn-text-muted);
    border: none;
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    position: relative;
    transition: all var(--xn-transition-smooth);
    border-radius: 0;
    letter-spacing: 0.3px;
}
.wall-tabs .nav-link:hover {
    color: var(--xn-color);
    background: var(--xn-element-bg);
}
.wall-tabs .nav-link.active {
    color: #fff;
    background: 0 0;
}
.wall-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 3px;
    background: linear-gradient(90deg, #dc3545, #ff6b7a);
    border-radius: 3px 3px 0 0;
    box-shadow: 0 0 12px rgba(220, 53, 69, 0.5);
}
.wall-tabs .nav-link i {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}
.wall-tabs .nav-link:hover i {
    transform: scale(1.1);
}
.empty-state {
    padding: 3.5rem 2rem;
    text-align: center;
}
.empty-state-icon {
    width: 72px;
    height: 72px;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: var(--xn-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}
.empty-state-icon i {
    font-size: 1.75rem;
    opacity: 0.5;
}
.empty-state p:first-of-type {
    font-size: 1rem;
    color: var(--xn-text-muted);
}
.empty-state p:last-of-type {
    font-size: 0.85rem;
    color: var(--xn-text-muted);
}
.load-more-btn {
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    color: var(--xn-text-muted);
    transition: all var(--xn-transition-smooth);
    font-weight: 500;
}
.load-more-btn:hover {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.12) 0, rgba(220, 53, 69, 0.06) 100%);
    border-color: rgba(220, 53, 69, 0.35);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.load-more-btn i {
    transition: transform 0.3s ease;
}
.load-more-btn:hover i {
    transform: translateY(3px);
}
.media-tabs {
    gap: 0.5rem;
}
.media-tabs .nav-link {
    padding: 0.55rem 1rem;
    font-size: 0.8rem;
    border-radius: 20px !important;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border) !important;
    color: var(--xn-text-muted);
    transition: all var(--xn-transition-base);
    font-weight: 500;
}
.media-tabs .nav-link:hover {
    background: var(--xn-element-bg);
    color: var(--xn-color);
}
.media-tabs .nav-link.active {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.18) 0, rgba(220, 53, 69, 0.1) 100%);
    border-color: rgba(220, 53, 69, 0.35) !important;
    color: #dc3545;
    box-shadow: 0 2px 10px rgba(220, 53, 69, 0.15);
}
.login-prompt {
    background: var(--xn-element-bg);
    border: 1px dashed var(--xn-glass-border);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    transition: all var(--xn-transition-base);
}
.login-prompt:hover {
    border-color: rgba(220, 53, 69, 0.3);
    background: var(--xn-hero-bg);
}
.login-prompt .btn {
    transition: all var(--xn-transition-base);
}
.login-prompt .btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}
.dropdown-menu-dark {
    background: var(--xn-dropdown-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 10px;
    box-shadow: var(--xn-shadow-xl);
    backdrop-filter: blur(10px);
}
.dropdown-menu-dark .dropdown-item {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    color: var(--xn-text-muted);
    transition: all var(--xn-transition-base);
}
.dropdown-menu-dark .dropdown-item:hover {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
}
@media (max-width: 576px) {
    .wall-tabs .nav-link {
        padding: 0.875rem 1rem;
    }
    .empty-state {
        padding: 2.5rem 1.5rem;
    }
}
.people-hub {
    border-radius: 16px;
    border: 1px solid var(--xn-glass-border);
    overflow: hidden;
    box-shadow: var(--xn-shadow-md);
    background: var(--xn-element-bg);
}
.people-hub-tabs {
    display: flex;
    border-bottom: 1px solid var(--xn-glass-border);
    background: var(--xn-hero-bg);
    padding: 0;
    gap: 0;
}
.people-hub-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.85rem 0.5rem 0.7rem;
    background: 0 0;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--xn-text-muted);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}
.people-hub-tab i {
    font-size: 1.05rem;
    transition: transform 0.25s ease;
}
.people-hub-tab span {
    line-height: 1.1;
}
.people-hub-tab.active,
.people-hub-tab:hover {
    color: #dc3545;
    border-bottom-color: #dc3545;
}
.people-hub-tab.active i {
    transform: scale(1.15);
}
.people-hub-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 25%;
    width: 50%;
    height: 2px;
    background: #dc3545;
    border-radius: 2px 2px 0 0;
    filter: blur(4px);
    opacity: 0.6;
}
.people-hub-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 17px;
    padding: 0 5px;
    background: rgba(220, 53, 69, 0.12);
    color: #dc3545;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 10px;
    line-height: 1;
}
.people-hub-tab.active .people-hub-count {
    background: #dc3545;
    color: #fff;
}
.people-hub-list {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    max-height: 380px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(220, 53, 69, 0.25) transparent;
}
.people-hub-list::-webkit-scrollbar {
    width: 4px;
}
.people-hub-list::-webkit-scrollbar-track {
    background: 0 0;
}
.people-hub-list::-webkit-scrollbar-thumb {
    background: rgba(220, 53, 69, 0.25);
    border-radius: 4px;
}
.people-hub-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    transition: all 0.2s ease;
    position: relative;
}
.people-hub-item:hover {
    background: rgba(220, 53, 69, 0.06);
}
.people-hub-item + .people-hub-item {
    border-top: 1px solid var(--xn-glass-border);
}
.people-hub-item:hover,
.people-hub-item:hover + .people-hub-item {
    border-color: transparent;
}
.people-hub-avatar {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}
.people-hub-avatar .avatar,
.people-hub-avatar .user-avatar-img,
.people-hub-avatar .user-noavatar-img,
.people-hub-avatar img {
    width: 44px;
    height: 44px;
    border-radius: var(--xn-radius-full);
    object-fit: cover;
    border: 2px solid var(--xn-glass-border);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.people-hub-avatar .user-noavatar-img {
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--xn-hero-bg);
    color: var(--xn-color);
}
.people-hub-ring {
    position: absolute;
    inset: -3px;
    border-radius: var(--xn-radius-full);
    border: 2px solid transparent;
    transition: all 0.3s ease;
    pointer-events: none;
}
.people-hub-item:hover .people-hub-ring {
    border-color: rgba(220, 53, 69, 0.4);
    animation: people-hub-pulse 1.5s ease-in-out infinite;
}
.people-hub-item:hover .people-hub-avatar .avatar,
.people-hub-item:hover .people-hub-avatar .user-avatar-img,
.people-hub-item:hover .people-hub-avatar .user-noavatar-img,
.people-hub-item:hover .people-hub-avatar img {
    border-color: rgba(220, 53, 69, 0.5);
    transform: scale(1.08);
}
@keyframes people-hub-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}
.people-hub-info {
    flex: 1;
    min-width: 0;
}
.people-hub-name {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--xn-color);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transition: color 0.2s ease;
}
.people-hub-item:hover .people-hub-name {
    color: #dc3545;
}
.people-hub-arrow {
    font-size: 0.7rem;
    color: var(--xn-text-muted);
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.25s ease;
}
.people-hub-item:hover .people-hub-arrow {
    opacity: 1;
    transform: translateX(0);
}
.people-hub-viewall {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--xn-glass-border);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--xn-text-muted);
    text-decoration: none;
    transition: all 0.25s ease;
    background: rgba(220, 53, 69, 0.03);
}
.people-hub-viewall:hover {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.08);
}
.people-hub-viewall i {
    font-size: 0.85rem;
    transition: transform 0.25s ease;
}
.people-hub-viewall:hover i {
    transform: translateX(4px);
}
.people-card {
    border-radius: 16px;
    border: 1px solid var(--xn-glass-border);
    overflow: hidden;
    box-shadow: var(--xn-shadow-md);
    margin-bottom: 1rem;
}
.people-card-header {
    background: var(--xn-hero-bg);
    border-bottom: 1px solid var(--xn-glass-border);
    padding: 0.875rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.people-card-header .title-wrap {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.people-card-header .icon-wrap {
    width: 32px;
    height: 32px;
    background: rgba(220, 53, 69, 0.15);
    border-radius: var(--xn-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}
.people-card-header .icon-wrap i {
    color: #dc3545;
    font-size: 0.9rem;
}
.people-card-header h6 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
}
.people-card-header .view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--xn-text-muted);
    text-decoration: none;
    transition: all var(--xn-transition-base);
    font-weight: 500;
}
.people-card-header .view-all:hover {
    background: rgba(220, 53, 69, 0.12);
    border-color: rgba(220, 53, 69, 0.35);
    color: #dc3545;
    transform: translateX(2px);
}
.people-card-header .view-all i {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}
.people-card-header .view-all:hover i {
    transform: translateX(3px);
}
.people-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 1rem;
}
.person-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0.5rem;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 12px;
    transition: all var(--xn-transition-base);
    text-decoration: none;
}
.person-item:hover {
    background: var(--xn-element-bg);
    border-color: rgba(220, 53, 69, 0.2);
    transform: translateY(-2px);
    box-shadow: var(--xn-shadow-md);
}
.person-item .avatar-wrap {
    position: relative;
    margin-bottom: 0.5rem;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}
.person-item .avatar-wrap .avatar,
.person-item .avatar-wrap .user-avatar-img,
.person-item .avatar-wrap .user-noavatar-img,
.person-item .avatar-wrap img {
    width: 52px;
    height: 52px;
    border-radius: var(--xn-radius-full);
    object-fit: cover;
    border: 2px solid var(--xn-glass-border);
    transition: all var(--xn-transition-base);
}
.person-item .avatar-wrap .user-noavatar-img {
    font-size: 0.9rem;
    font-weight: 600;
    background: var(--xn-hero-bg);
    color: var(--xn-color);
}
.person-item:hover .avatar-wrap .avatar,
.person-item:hover .avatar-wrap .user-avatar-img,
.person-item:hover .avatar-wrap .user-noavatar-img,
.person-item:hover .avatar-wrap img {
    border-color: rgba(220, 53, 69, 0.5);
    transform: scale(1.05);
}
.person-item .avatar-wrap::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: #198754;
    border: 2px solid #1a1a1a;
    border-radius: var(--xn-radius-full);
    display: none;
}
.person-item.online .avatar-wrap::after {
    display: block;
}
.person-item .username {
    font-size: 0.75rem;
    color: var(--xn-text-muted);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.person-item:hover .username {
    color: var(--xn-color);
}
.people-empty {
    padding: 2rem 1rem;
    text-align: center;
}
.people-empty i {
    font-size: 2rem;
    color: var(--xn-text-muted);
    margin-bottom: 0.5rem;
}
.people-empty p {
    font-size: 0.8rem;
    color: var(--xn-text-muted);
    margin: 0;
}
.ad-holder-modern {
    border-radius: 16px;
    border: 1px solid var(--xn-glass-border);
    background: var(--xn-element-bg);
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 250px;
}
@media (max-width: 576px) {
    .people-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.375rem;
        padding: 0.75rem;
    }
    .person-item {
        padding: 0.625rem 0.375rem;
        border-radius: 10px;
    }
    .person-item .avatar-wrap {
        width: 46px;
        height: 46px;
    }
    .person-item .avatar-wrap .avatar,
    .person-item .avatar-wrap .user-avatar-img,
    .person-item .avatar-wrap .user-noavatar-img,
    .person-item .avatar-wrap img {
        width: 46px;
        height: 46px;
    }
    .person-item .avatar-wrap .user-noavatar-img {
        font-size: 0.8rem;
    }
    .person-item .username {
        font-size: 0.7rem;
    }
    .people-card-header {
        padding: 0.75rem;
    }
    .people-card-header h6 {
        font-size: 0.85rem;
    }
}
.xn-cat-hero {
    position: relative;
    padding: 40px 32px 24px;
    margin-bottom: 28px;
    background: var(--xn-hero-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 24px;
    overflow: hidden;
}
.xn-cat-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.xn-gradient-orb {
    position: absolute;
    border-radius: var(--xn-radius-full);
    filter: blur(80px);
    opacity: 0.5;
}
.xn-orb-1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(192, 0, 0, 0.4) 0, transparent 70%);
    top: -100px;
    left: -50px;
    animation: xn-orb-pulse 8s ease-in-out infinite;
}
.xn-orb-2 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255, 60, 60, 0.25) 0, transparent 70%);
    bottom: -80px;
    right: -60px;
    animation: xn-orb-pulse 8s ease-in-out infinite reverse;
}
@keyframes xn-orb-pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.6;
    }
}
.xn-grid-pattern {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black, transparent);
}
.xn-cat-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.xn-cat-hero-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.xn-cat-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--xn-primary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.xn-label-dot {
    width: 8px;
    height: 8px;
    background: var(--xn-primary);
    border-radius: var(--xn-radius-full);
    animation: xn-dot-pulse 2s ease-in-out infinite;
}
@keyframes xn-dot-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}
.xn-cat-hero h1 {
    font-size: 3rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.1;
    letter-spacing: -1px;
}
.xn-title-line {
    color: var(--xn-color);
}
.xn-cat-desc {
    font-size: 1rem;
    color: var(--xn-text-muted);
    margin: 0;
    max-width: 320px;
    line-height: 1.6;
}
.xn-cat-hero-right {
    display: flex;
    justify-content: flex-end;
}
.xn-cat-selector {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 360px;
}
.xn-cat-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 14px;
    text-decoration: none;
    transition: all var(--xn-transition-smooth);
    cursor: pointer;
}
.xn-cat-option:hover {
    background: var(--xn-element-bg);
    border-color: var(--xn-glass-border);
    transform: translateX(4px);
}
.xn-cat-option.active {
    background: linear-gradient(135deg, rgba(192, 0, 0, 0.15) 0, rgba(192, 0, 0, 0.05) 100%);
    border-color: rgba(192, 0, 0, 0.4);
    box-shadow: 0 4px 20px rgba(192, 0, 0, 0.15);
}
.xn-cat-option-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--xn-element-bg);
    border-radius: 12px;
    font-size: 1.2rem;
    color: var(--xn-text-muted);
    transition: all var(--xn-transition-smooth);
}
.xn-cat-option.active .xn-cat-option-icon,
.xn-cat-option:hover .xn-cat-option-icon {
    background: var(--xn-primary);
    color: #fff;
}
.xn-cat-option-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.xn-cat-option-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    transition: color 0.3s ease;
}
.xn-cat-option.active .xn-cat-option-title {
    color: var(--xn-primary);
}
.xn-cat-option-desc {
    font-size: 0.75rem;
    color: var(--xn-text-muted);
}
.xn-cat-option-arrow {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--xn-text-muted);
    transition: all var(--xn-transition-smooth);
}
.xn-cat-option.active .xn-cat-option-arrow,
.xn-cat-option:hover .xn-cat-option-arrow {
    color: var(--xn-primary);
    transform: translateX(4px);
}
.xn-cat-stats-bar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--xn-glass-border);
}
.xn-cat-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--xn-text-muted);
    font-size: 0.85rem;
}
.xn-cat-stat i {
    font-size: 1rem;
    color: var(--xn-text-muted);
}
.xn-stat-num {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--xn-color);
}
.xn-stat-text {
    font-weight: 500;
}
.xn-cat-stat-divider {
    width: 1px;
    height: 20px;
    background: var(--xn-glass-border);
}
.xn-stat-active {
    padding: 8px 16px;
    background: rgba(192, 0, 0, 0.1);
    border-radius: 50px;
}
.xn-stat-active i {
    color: var(--xn-primary);
}
.xn-stat-active .xn-stat-text {
    color: var(--xn-primary);
    font-weight: 600;
}
.xn-categories-grid {
    margin-bottom: 48px;
}
.xn-grid-animate .xn-grid-item {
    animation: xn-fadeInUp 0.5s ease forwards;
    animation-delay: calc(var(--item-index, 0) * 0.03s);
    opacity: 0;
}
@keyframes xn-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.xn-category-card {
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--xn-card-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    transition: all var(--xn-transition-slow);
    height: 100%;
}
.xn-category-card:hover {
    transform: translateY(-10px);
    border-color: rgba(192, 0, 0, 0.5);
    box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(192, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.xn-category-image {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0a0a0a, #1a1a1a);
}
.xn-category-video .xn-category-image {
    aspect-ratio: 16/9;
}
.xn-category-album .xn-category-image {
    aspect-ratio: 1/1;
}
.xn-category-short .xn-category-image {
    aspect-ratio: 9/16;
}
.xn-category-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.4s ease;
}
.xn-category-card:hover .xn-category-image img {
    transform: scale(1.15);
    filter: brightness(0.6);
}
.xn-category-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.xn-category-card:hover .xn-category-overlay {
    opacity: 1;
}
.xn-play-btn {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(192, 0, 0, 0.9);
    border-radius: var(--xn-radius-full);
    font-size: 28px;
    color: #fff;
    transform: scale(0.6);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 8px 24px rgba(192, 0, 0, 0.5);
}
.xn-category-card:hover .xn-play-btn {
    transform: scale(1);
}
.xn-album-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    font-size: 24px;
    color: #fff;
    transform: scale(0.6) rotate(-10deg);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.xn-category-card:hover .xn-album-icon {
    transform: scale(1) rotate(0);
}
.xn-short-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ff6b00, #ff0050);
    border-radius: var(--xn-radius-full);
    font-size: 24px;
    color: #fff;
    transform: scale(0.6);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 8px 24px rgba(255, 0, 80, 0.4);
}
.xn-category-card:hover .xn-short-icon {
    transform: scale(1);
}
.xn-category-info {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
}
.xn-short-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.9));
    padding: 20px 12px 12px;
}
.xn-category-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.3s ease;
    letter-spacing: -0.2px;
}
.xn-category-card:hover .xn-category-name {
    color: var(--xn-primary);
}
.xn-category-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.xn-stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--xn-element-hover-bg);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--xn-color);
    transition: all var(--xn-transition-smooth);
}
.xn-stat-badge i {
    font-size: 0.85rem;
    color: var(--xn-primary);
}
.xn-stat-compact {
    padding: 4px 10px;
    font-size: 0.75rem;
    background: rgba(0, 0, 0, 0.5);
}
.xn-category-card:hover .xn-stat-badge {
    background: rgba(192, 0, 0, 0.15);
}
.xn-arrow-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--xn-element-hover-bg);
    border-radius: var(--xn-radius-full);
    color: var(--xn-text-muted);
    transition: all var(--xn-transition-smooth);
}
.xn-category-card:hover .xn-arrow-btn {
    background: var(--xn-primary);
    color: #fff;
    transform: translateX(4px);
}
@media (max-width: 991px) {
    .xn-cat-hero {
        padding: 32px 24px 20px;
    }
    .xn-cat-hero-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .xn-cat-hero-left {
        text-align: center;
        align-items: center;
    }
    .xn-cat-desc {
        max-width: 100%;
    }
    .xn-cat-hero h1 {
        font-size: 2.5rem;
    }
    .xn-cat-hero-right {
        justify-content: center;
    }
    .xn-cat-selector {
        flex-direction: row;
        max-width: 100%;
        gap: 8px;
    }
    .xn-cat-option {
        flex: 1;
        flex-direction: column;
        text-align: center;
        padding: 16px 12px;
        gap: 10px;
    }
    .xn-cat-option-content {
        align-items: center;
    }
    .xn-cat-option-desc {
        display: none;
    }
    .xn-cat-option-arrow {
        display: none;
    }
}
@media (max-width: 768px) {
    .xn-cat-hero {
        padding: 28px 16px 18px;
        border-radius: 20px;
        margin-bottom: 20px;
    }
    .xn-gradient-orb {
        filter: blur(60px);
    }
    .xn-orb-1 {
        width: 200px;
        height: 200px;
        top: -80px;
        left: -40px;
    }
    .xn-orb-2 {
        width: 180px;
        height: 180px;
    }
    .xn-grid-pattern {
        background-size: 30px 30px;
    }
    .xn-cat-hero-inner {
        gap: 24px;
    }
    .xn-cat-label {
        font-size: 0.7rem;
        letter-spacing: 1px;
    }
    .xn-label-dot {
        width: 6px;
        height: 6px;
    }
    .xn-cat-hero h1 {
        font-size: 2rem;
    }
    .xn-cat-desc {
        font-size: 0.9rem;
    }
    .xn-cat-option {
        padding: 14px 10px;
        gap: 8px;
    }
    .xn-cat-option-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
        border-radius: 10px;
    }
    .xn-cat-option-title {
        font-size: 0.85rem;
    }
    .xn-cat-stats-bar {
        gap: 16px;
        margin-top: 20px;
        padding-top: 18px;
    }
    .xn-cat-stat {
        font-size: 0.8rem;
        gap: 8px;
    }
    .xn-stat-num {
        font-size: 1rem;
    }
    .xn-stat-active {
        padding: 6px 12px;
    }
    .xn-category-card {
        border-radius: 14px;
    }
    .xn-category-info {
        padding: 12px;
        gap: 8px;
    }
    .xn-category-name {
        font-size: 0.85rem;
    }
    .xn-stat-badge {
        padding: 5px 10px;
        font-size: 0.72rem;
        gap: 5px;
    }
    .xn-stat-badge i {
        font-size: 0.75rem;
    }
    .xn-arrow-btn {
        width: 26px;
        height: 26px;
        font-size: 0.75rem;
    }
    .xn-play-btn {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
    .xn-album-icon {
        width: 44px;
        height: 44px;
        font-size: 20px;
        border-radius: 12px;
    }
    .xn-short-icon {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }
    .xn-grid-animate .xn-grid-item {
        animation-delay: calc(var(--item-index, 0) * 0.02s);
    }
    .xn-short-info {
        padding: 16px 10px 10px;
    }
    .xn-category-short .xn-category-name {
        font-size: 0.8rem;
    }
    .xn-stat-compact {
        padding: 3px 8px;
        font-size: 0.7rem;
    }
}
@media (max-width: 576px) {
    .xn-cat-hero {
        padding: 24px 14px 16px;
        border-radius: 16px;
        margin-bottom: 16px;
    }
    .xn-gradient-orb {
        filter: blur(50px);
        opacity: 0.3;
    }
    .xn-orb-1 {
        width: 150px;
        height: 150px;
    }
    .xn-orb-2 {
        display: none;
    }
    .xn-grid-pattern {
        display: none;
    }
    .xn-cat-hero-inner {
        gap: 20px;
    }
    .xn-cat-label {
        font-size: 0.65rem;
        gap: 8px;
    }
    .xn-cat-hero h1 {
        font-size: 1.6rem;
    }
    .xn-cat-desc {
        font-size: 0.85rem;
        display: none;
    }
    .xn-cat-selector {
        gap: 6px;
    }
    .xn-cat-option {
        padding: 12px 8px;
        gap: 6px;
        border-radius: 12px;
    }
    .xn-cat-option-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
        border-radius: 8px;
    }
    .xn-cat-option-title {
        font-size: 0.75rem;
    }
    .xn-cat-stats-bar {
        gap: 12px;
        margin-top: 16px;
        padding-top: 14px;
        flex-wrap: wrap;
    }
    .xn-cat-stat {
        font-size: 0.75rem;
        gap: 6px;
    }
    .xn-stat-num {
        font-size: 0.9rem;
    }
    .xn-cat-stat-divider {
        height: 16px;
    }
    .xn-stat-active {
        padding: 5px 10px;
    }
    .xn-categories-grid .row {
        --xn-gutter-x: 0.5rem;
        --xn-gutter-y: 0.5rem;
    }
    .xn-category-card {
        border-radius: 12px;
    }
    .xn-category-info {
        padding: 10px;
        gap: 6px;
    }
    .xn-category-name {
        font-size: 0.78rem;
        margin-bottom: 2px;
    }
    .xn-stat-badge {
        padding: 4px 8px;
        font-size: 0.68rem;
        gap: 4px;
    }
    .xn-stat-badge i {
        font-size: 0.7rem;
    }
    .xn-arrow-btn {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }
    .xn-play-btn {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    .xn-album-icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
        border-radius: 10px;
    }
    .xn-short-icon {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    .xn-short-info {
        padding: 12px 8px 8px;
    }
    .xn-category-short .xn-category-name {
        font-size: 0.72rem;
    }
    .xn-stat-compact {
        padding: 2px 6px;
        font-size: 0.65rem;
    }
    .xn-category-card:hover {
        transform: none;
    }
    .xn-category-card:active {
        transform: scale(0.98);
    }
    .xn-category-card:hover .xn-category-overlay {
        opacity: 0;
    }
    .xn-category-card:hover .xn-category-image img {
        transform: none;
        filter: none;
    }
    .xn-category-card:hover .xn-category-name {
        color: #fff;
    }
    .xn-category-overlay {
        opacity: 1;
        background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.7) 100%);
    }
    .xn-album-icon,
    .xn-play-btn,
    .xn-short-icon {
        transform: scale(0.85);
    }
    .xn-arrow-btn {
        display: none;
    }
}
@media (max-width: 380px) {
    .xn-cat-hero {
        padding: 20px 10px 14px;
        border-radius: 14px;
    }
    .xn-cat-label {
        display: none;
    }
    .xn-cat-hero h1 {
        font-size: 1.4rem;
    }
    .xn-cat-selector {
        gap: 4px;
    }
    .xn-cat-option {
        padding: 10px 6px;
        border-radius: 10px;
    }
    .xn-cat-option-icon {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
        border-radius: 8px;
    }
    .xn-cat-option-title {
        font-size: 0.68rem;
    }
    .xn-cat-stats-bar {
        gap: 10px;
        margin-top: 14px;
        padding-top: 12px;
    }
    .xn-cat-stat {
        font-size: 0.7rem;
        gap: 5px;
    }
    .xn-stat-num {
        font-size: 0.85rem;
    }
    .xn-stat-text {
        display: none;
    }
    .xn-stat-active .xn-stat-text {
        display: inline;
    }
    .xn-category-info {
        padding: 8px;
    }
    .xn-category-name {
        font-size: 0.72rem;
    }
    .xn-stat-badge {
        padding: 3px 6px;
        font-size: 0.62rem;
    }
    .xn-play-btn {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}
@media (hover: none) and (pointer: coarse) {
    .xn-cat-option:hover {
        transform: none;
        background: var(--xn-element-bg);
    }
    .xn-cat-option:active {
        background: var(--xn-element-hover-bg);
        transform: scale(0.98);
    }
    .xn-cat-option.active:active {
        transform: scale(0.98);
    }
    .xn-category-card:hover {
        transform: none;
        border-color: var(--xn-glass-border);
        box-shadow: none;
    }
    .xn-category-card:active {
        transform: scale(0.97);
        border-color: rgba(192, 0, 0, 0.4);
    }
    .xn-category-overlay {
        opacity: 1;
        background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.6) 100%);
    }
    .xn-album-icon,
    .xn-play-btn,
    .xn-short-icon {
        transform: scale(0.9);
    }
    .xn-category-card:hover .xn-category-image img {
        transform: none;
        filter: none;
    }
    .xn-cat-option {
        min-height: 60px;
    }
}
@media (max-height: 500px) and (orientation: landscape) {
    .xn-cat-hero {
        padding: 16px 20px 12px;
        margin-bottom: 12px;
    }
    .xn-cat-hero-inner {
        grid-template-columns: 1fr 1.5fr;
        gap: 20px;
    }
    .xn-cat-hero-left {
        text-align: left;
        align-items: flex-start;
    }
    .xn-cat-hero h1 {
        font-size: 1.5rem;
    }
    .xn-cat-desc {
        display: none;
    }
    .xn-cat-selector {
        flex-direction: row;
    }
    .xn-cat-option {
        flex-direction: column;
        padding: 10px 8px;
    }
    .xn-cat-option-desc {
        display: none;
    }
    .xn-cat-option-arrow {
        display: none;
    }
    .xn-cat-stats-bar {
        display: none;
    }
}
[data-bs-theme='light'] .xn-cat-hero {
    background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(192, 0, 0, 0.06), transparent), linear-gradient(180deg, rgba(0, 0, 0, 0.01) 0, transparent 100%);
    border-color: rgba(0, 0, 0, 0.06);
}
[data-bs-theme='light'] .xn-gradient-orb {
    opacity: 0.4;
}
[data-bs-theme='light'] .xn-cat-desc {
    color: #666;
}
[data-bs-theme='light'] .xn-cat-option {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}
[data-bs-theme='light'] .xn-cat-option:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
}
[data-bs-theme='light'] .xn-cat-option.active {
    background: linear-gradient(135deg, var(--xn-primary), #e60000);
    border-color: var(--xn-primary);
}
[data-bs-theme='light'] .xn-cat-option-title {
    color: #1a1a1a;
}
[data-bs-theme='light'] .xn-cat-option-desc {
    color: #666;
}
[data-bs-theme='light'] .xn-cat-option.active .xn-cat-option-desc,
[data-bs-theme='light'] .xn-cat-option.active .xn-cat-option-title {
    color: #fff;
}
[data-bs-theme='light'] .xn-cat-stats-bar {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.06);
}
[data-bs-theme='light'] .xn-stat-item {
    color: #666;
}
[data-bs-theme='light'] .xn-stat-value {
    color: #1a1a1a;
}
[data-bs-theme='light'] .xn-category-card {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
[data-bs-theme='light'] .xn-category-card:hover {
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(192, 0, 0, 0.2);
}
[data-bs-theme='light'] .xn-category-name {
    color: #1a1a1a;
}
[data-bs-theme='light'] .xn-stat-badge {
    background: rgba(0, 0, 0, 0.05);
    color: #4a4a4a;
}
[data-bs-theme='light'] .xn-arrow-btn {
    background: rgba(0, 0, 0, 0.05);
    color: #6a6a6a;
}
[data-bs-theme='light'] .xn-category-card:hover .xn-stat-badge {
    background: rgba(192, 0, 0, 0.08);
}
@media (hover: none) and (pointer: coarse) {
    [data-bs-theme='light'] .xn-category-card:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }
    [data-bs-theme='light'] .xn-category-card:active {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }
    [data-bs-theme='light'] .xn-cat-option:hover {
        background: rgba(0, 0, 0, 0.02);
    }
}
@media (prefers-reduced-motion: reduce) {
    .xn-gradient-orb {
        animation: none;
    }
    .xn-grid-animate .xn-grid-item {
        animation: none;
        opacity: 1;
    }
    .xn-album-icon,
    .xn-cat-option,
    .xn-category-card,
    .xn-play-btn,
    .xn-short-icon {
        transition: none;
    }
}
.user-card {
    background: linear-gradient(145deg, rgba(33, 37, 41, 0.9) 0, rgba(22, 25, 28, 0.95) 100%);
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
}
.user-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(220, 53, 69, 0.15);
}
.avatar-container {
    position: relative;
    display: inline-block;
}
.avatar-wrapper {
    width: 80px;
    height: 80px;
    border: 3px solid var(--xn-glass-border);
    position: relative;
    z-index: 2;
    transition: all var(--xn-transition-smooth);
}
.avatar-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.user-card:hover .avatar-wrapper {
    transform: scale(1.08);
}
.avatar-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    border-radius: var(--xn-radius-full);
    opacity: 0;
    z-index: 1;
    transition: all var(--xn-transition-slow);
    filter: blur(15px);
}
.user-card:hover .avatar-glow {
    opacity: 0.6;
}
.avatar-glow-success {
    background: radial-gradient(circle, #28a745 0, transparent 70%);
}
.avatar-glow-danger {
    background: radial-gradient(circle, #dc3545 0, transparent 70%);
}
.avatar-glow-primary {
    background: radial-gradient(circle, #0d6efd 0, transparent 70%);
}
.avatar-glow-warning {
    background: radial-gradient(circle, #ffc107 0, transparent 70%);
}
.avatar-glow-silver {
    background: radial-gradient(circle, silver 0, transparent 70%);
}
.avatar-glow-bronze {
    background: radial-gradient(circle, #cd7f32 0, transparent 70%);
}
.border-warning {
    border-color: #ffc107 !important;
}
.border-silver {
    border-color: silver !important;
}
.border-bronze {
    border-color: #cd7f32 !important;
}
.border-danger {
    border-color: rgba(220, 53, 69, 0.6) !important;
}
.border-primary {
    border-color: rgba(13, 110, 253, 0.6) !important;
}
.gender-badge,
.online-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 22px;
    height: 22px;
    border-radius: var(--xn-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #16191c;
    z-index: 3;
    font-size: 0.5rem;
    color: #fff;
}
.rank-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 10;
}
.rank-1 {
    background: linear-gradient(135deg, #ffc107 0, #ff9800 100%);
    color: #1a1a1a;
}
.rank-2 {
    background: linear-gradient(135deg, #e0e0e0 0, #9e9e9e 100%);
    color: #1a1a1a;
}
.rank-3 {
    background: linear-gradient(135deg, #cd7f32 0, #8b4513 100%);
    color: #fff;
}
.user-stats {
    margin-top: 8px;
}
.stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--xn-text-muted);
    padding: 3px 8px;
    background: var(--xn-element-bg);
    border-radius: 12px;
    transition: all var(--xn-transition-smooth);
}
.user-card:hover .stat-badge {
    color: var(--xn-color);
    background: var(--xn-element-bg);
}
.section-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.gender-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}
.gender-female {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
}
.gender-male {
    background: rgba(13, 110, 253, 0.15);
    color: #0d6efd;
}
.filter-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--xn-text-muted);
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    text-decoration: none;
    transition: all var(--xn-transition-smooth);
}
.filter-btn.active,
.filter-btn:hover {
    color: var(--xn-color);
    background: rgba(220, 53, 69, 0.2);
    border-color: rgba(220, 53, 69, 0.4);
}
.filter-female:hover {
    background: rgba(220, 53, 69, 0.2);
    border-color: rgba(220, 53, 69, 0.4);
}
.filter-male:hover {
    background: rgba(13, 110, 253, 0.2);
    border-color: rgba(13, 110, 253, 0.4);
}
.filter-couple:hover {
    background: rgba(255, 193, 7, 0.2);
    border-color: rgba(255, 193, 7, 0.4);
}
.live-indicator {
    width: 10px;
    height: 10px;
    background: #28a745;
    border-radius: var(--xn-radius-full);
    animation: pulse-live 2s infinite;
}
.pulse-badge {
    animation: pulse-badge 2s infinite;
}
@keyframes pulse-live {
    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 0 8px rgba(40, 167, 69, 0);
    }
}
@keyframes pulse-badge {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}
.status-text,
.user-label {
    display: inline-flex;
    align-items: center;
}
.user-scroll-wrapper {
    margin: 0 -0.75rem;
    padding: 0 0.75rem;
}
.user-scroll-container {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 8px 0;
}
.user-scroll-container::-webkit-scrollbar {
    display: none;
}
.user-scroll-item {
    flex: 0 0 auto;
    width: 100px;
    scroll-snap-align: start;
}
.user-scroll-item-lg {
    width: 110px;
}
.avatar-sm {
    width: 60px !important;
    height: 60px !important;
}
.gender-badge-sm,
.online-badge-sm {
    width: 18px;
    height: 18px;
    font-size: 0.4rem;
    border-width: 2px;
}
.rank-badge-sm {
    padding: 2px 6px;
    font-size: 0.6rem;
    top: 6px;
    left: 6px;
}
.stat-badge-sm {
    padding: 2px 6px;
    font-size: 0.65rem;
    gap: 2px;
}
@media (max-width: 767.98px) {
    h2 {
        font-size: 1.1rem;
    }
    h3 {
        font-size: 1rem;
    }
    .col-section {
        margin-bottom: 1.25rem;
    }
    .col-head {
        margin-bottom: 0.75rem;
    }
    .user-card {
        border-radius: 12px;
    }
    .user-card:hover {
        transform: none;
        box-shadow: none;
    }
    .user-card:active {
        transform: scale(0.98);
    }
    .rank-badge {
        padding: 2px 6px;
        font-size: 0.6rem;
    }
    .section-icon {
        display: none !important;
    }
    .w-100 {
        width: 100% !important;
    }
}
@media (max-width: 575.98px) {
    .user-scroll-item {
        width: 90px;
    }
    .user-scroll-item-lg {
        width: 100px;
    }
    .avatar-sm {
        width: 55px !important;
        height: 55px !important;
    }
    .badge {
        padding: 0.35rem 0.5rem;
        font-size: 0.7rem;
    }
}
@supports (padding: max(0px)) {
    .user-scroll-wrapper {
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
    }
}
@media (prefers-reduced-motion: reduce) {
    .avatar-wrapper,
    .live-indicator,
    .pulse-badge,
    .user-card {
        animation: none;
        transition: none;
    }
}
.xn-footer {
    background: var(--xn-footer-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    position: relative;
    overflow: hidden;
}
.xn-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(192, 0, 0, 0.5), rgba(255, 51, 51, 0.3), transparent);
}
@media (max-width: 991px) {
    .xn-footer {
        padding-bottom: 80px;
    }
}
.xn-footer-wave {
    padding: 48px 0 40px;
    position: relative;
    z-index: 1;
}
.xn-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
    gap: 40px;
    position: relative;
    z-index: 1;
}
@media (max-width: 1199px) {
    .xn-footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
    }
    .xn-footer-newsletter {
        grid-column: 1/-1;
        max-width: 400px;
    }
}
@media (max-width: 991px) {
    .xn-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    .xn-footer-brand {
        grid-column: 1/-1;
    }
    .xn-footer-newsletter {
        max-width: 100%;
    }
}
@media (max-width: 575px) {
    .xn-footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .xn-footer-stats {
        gap: 24px;
    }
}
.xn-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.xn-footer-logo {
    display: inline-block;
    transition: transform 0.3s ease;
}
.xn-footer-logo:hover {
    transform: scale(1.02);
}
.xn-footer-logo img {
    width: 140px;
    height: auto;
}
.xn-footer-tagline {
    color: var(--xn-text-muted);
    font-size: 0.75rem;
    font-style: italic;
    margin-top: -8px;
}
.xn-footer-brand p {
    color: var(--xn-text-muted);
    font-size: 0.875rem;
    line-height: 1.7;
    max-width: 280px;
    margin: 0;
}
.xn-footer-social {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}
.xn-footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 12px;
    color: var(--xn-text-muted);
    font-size: 1.1rem;
    transition: all var(--xn-transition-smooth);
    position: relative;
    overflow: hidden;
}
.xn-footer-social a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--xn-primary), #f33);
    border-radius: 11px;
    opacity: 0;
    transform: scale(0.5);
    transition: all var(--xn-transition-smooth);
}
.xn-footer-social a:hover {
    color: var(--xn-color);
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(192, 0, 0, 0.3);
}
.xn-footer-social a:hover::before {
    opacity: 1;
    transform: scale(1);
}
.xn-footer-social a i {
    position: relative;
    z-index: 1;
}
.xn-footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.xn-footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    color: var(--xn-text-muted);
    font-size: 0.65rem;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 6px;
    transition: all var(--xn-transition-smooth);
}
.xn-footer-badge i {
    font-size: 0.75rem;
}
.xn-footer-badge.xn-badge-age {
    background: rgba(192, 0, 0, 0.1);
    border-color: rgba(192, 0, 0, 0.2);
    color: #f55;
}
.xn-footer-badge.xn-badge-secure {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}
.xn-footer-column h5 {
    color: var(--xn-color);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 20px;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.xn-footer-column h5::before {
    content: '';
    width: 3px;
    height: 14px;
    background: linear-gradient(180deg, var(--xn-primary), #f33);
    border-radius: 3px;
}
.xn-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.xn-footer-links li a {
    color: var(--xn-text-muted);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: all var(--xn-transition-base);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
}
.xn-footer-links li a i {
    font-size: 0.9rem;
    width: 18px;
    opacity: 0.6;
    transition: all var(--xn-transition-base);
}
.xn-footer-links li a:hover {
    color: var(--xn-color);
    transform: translateX(4px);
}
.xn-footer-links li a:hover i {
    opacity: 1;
    color: var(--xn-primary);
}
.xn-footer-bottom {
    margin-top: 48px;
    padding: 24px 0;
    border-top: 1px solid var(--xn-element-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    position: relative;
    z-index: 1;
}
.xn-footer-copyright {
    color: var(--xn-text-muted);
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    gap: 6px;
}
.xn-footer-copyright a {
    color: var(--xn-text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}
.xn-footer-copyright a:hover {
    color: var(--xn-primary);
}
.xn-footer-copyright .xn-heart {
    color: var(--xn-primary);
    animation: heartbeat 1.5s ease-in-out infinite;
}
@keyframes heartbeat {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}
.xn-footer-legal {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.xn-footer-legal a {
    color: var(--xn-text-muted);
    font-size: 0.75rem;
    text-decoration: none;
    transition: all var(--xn-transition-smooth);
    position: relative;
}
.xn-footer-legal a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--xn-primary);
    transition: width 0.3s ease;
}
.xn-footer-legal a:hover {
    color: var(--xn-color);
}
.xn-footer-legal a:hover::after {
    width: 100%;
}
.xn-footer-legal .xn-rta-label {
    display: flex;
    align-items: center;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
.xn-footer-legal .xn-rta-label::after {
    display: none;
}
.xn-footer-legal .xn-rta-label:hover {
    opacity: 1;
}
.xn-footer-legal .xn-rta-label img {
    display: block;
}
.footer-link {
    transition:
        color 0.2s ease,
        padding-left 0.2s ease;
}
.footer-link:hover {
    padding-left: 4px;
}
.btn-back-to-top {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}
.btn-back-to-top:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}
.xn-footer .btn-outline-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    color: #fff;
}
@keyframes borderPulse {
    0%,
    100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}
@keyframes badgeFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}
.xn-footer-border {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--xn-accent-glow), rgba(192, 0, 0, 0.4), var(--xn-accent-glow), transparent);
    box-shadow: 0 0 10px var(--xn-accent-glow);
    animation: borderPulse 3s ease-in-out infinite;
    will-change: opacity;
}
.footer-brand-link {
    display: inline-block;
    transition: all var(--xn-transition-smooth);
    outline: 0;
}
.footer-brand-link:hover {
    transform: translateY(-2px);
}
.footer-brand-link:focus-visible {
    outline: 2px solid var(--xn-primary);
    outline-offset: 4px;
    border-radius: var(--xn-radius-sm);
}
.xn-footer-brand-logo {
    height: 45px;
    width: auto;
    transition: all var(--xn-transition-smooth);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}
.footer-brand-link:hover .xn-footer-brand-logo {
    filter: drop-shadow(0 4px 12px var(--xn-accent-glow)) brightness(1.1);
}
.xn-footer-description {
    max-width: 340px;
    font-size: 0.95rem;
    line-height: 1.7;
}
.xn-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
}
.xn-badge-18 {
    background: rgba(var(--xn-primary-rgb), 0.15);
    border-color: rgba(var(--xn-primary-rgb), 0.75);
    color: var(--xn-primary);
    box-shadow: 0 0 10px rgba(var(--xn-primary-rgb), 0.2);
}
.xn-badge-18:hover {
    box-shadow: 0 0 20px var(--xn-accent-glow);
    transform: translateY(-3px) scale(1.05);
    border-color: var(--xn-primary);
}
.xn-badge-ssl {
    background: rgba(var(--xn-success-rgb), 0.15);
    border-color: rgba(var(--xn-success-rgb), 0.75);
    color: var(--xn-success);
    box-shadow: 0 0 10px rgba(var(--xn-success-rgb), 0.2);
}
.xn-badge-ssl:hover {
    box-shadow: 0 0 20px rgba(var(--xn-success-rgb), 0.5);
    transform: translateY(-3px) scale(1.05);
    border-color: var(--xn-success);
}
.xn-badge-cdn {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.75);
    color: #3b82f6;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
}
.xn-badge-cdn:hover {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
    transform: translateY(-3px) scale(1.05);
    border-color: #3b82f6;
}
.xn-badge-rss {
    background: rgba(246, 165, 59, 0.15);
    border-color: rgba(246, 165, 59, 0.75);
    color: #f6a53b;
    box-shadow: 0 0 10px rgba(246, 165, 59, 0.2);
    cursor: pointer;
}
.xn-badge-rss:hover {
    box-shadow: 0 0 20px rgba(246, 165, 59, 0.5);
    transform: translateY(-3px) scale(1.05);
    border-color: #f6a53b;
}
.xn-badge i {
    font-size: 0.75rem;
}
.xn-section-header {
    letter-spacing: 0.15em;
    font-size: 0.75rem;
    position: relative;
    padding-bottom: 0.65rem;
}
.xn-section-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 45px;
    height: 2px;
    background: linear-gradient(90deg, var(--xn-primary), var(--xn-accent), transparent);
    box-shadow: 0 0 8px var(--xn-accent-glow);
}
.footer-link {
    font-size: 0.9rem;
    padding: 0.35rem 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.footer-link::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--xn-primary), transparent);
    transition: width 0.3s ease;
}
.footer-link:hover::before {
    width: 100%;
}
.footer-link:focus-visible,
.footer-link:hover {
    padding-left: 0.5rem;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    outline: 0;
}
.footer-link:hover i {
    color: var(--xn-primary) !important;
    transform: scale(1.15);
}
.footer-link i {
    font-size: 0.9rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.xn-pref-toggle {
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: var(--xn-radius-base);
    padding: 0.6rem 0.8rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--xn-color-secondary);
    font-size: 0.85rem;
    transition: all var(--xn-transition-smooth);
    cursor: pointer;
}
.xn-pref-toggle:focus-visible,
.xn-pref-toggle:hover {
    background: var(--xn-element-hover-bg);
    border-color: var(--xn-accent-glow);
    transform: translateX(3px);
    outline: 0;
}
.xn-pref-toggle:hover .xn-pref-arrow {
    color: var(--xn-primary);
}
.xn-pref-toggle span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.xn-pref-arrow {
    transition: all 0.3s ease;
    font-size: 0.75rem;
}
.xn-pref-toggle[aria-expanded='true'] .xn-pref-arrow {
    transform: rotate(180deg);
}
.xn-pref-content {
    margin-top: 0.5rem;
}
.xn-pref-content.collapsing {
    transition: height var(--xn-transition-smooth);
}
.xn-pref-list {
    list-style: none;
    padding: 0.5rem;
    margin: 0;
    background: var(--xn-glass-bg);
    border-radius: var(--xn-radius-base);
    border: 1px solid var(--xn-glass-border);
    max-height: 250px;
    overflow-y: auto;
}
.xn-pref-list::-webkit-scrollbar {
    width: 4px;
}
.xn-pref-list::-webkit-scrollbar-track {
    background: var(--xn-glass-shadow);
    border-radius: 4px;
}
.xn-pref-list::-webkit-scrollbar-thumb {
    background: var(--xn-accent-glow);
    border-radius: 4px;
}
.xn-pref-list::-webkit-scrollbar-thumb:hover {
    background: var(--xn-accent);
}
.xn-bottom-bar {
    background: linear-gradient(180deg, transparent 0, var(--xn-glass-shadow) 100%);
}
.xn-copyright {
    font-size: 0.9rem;
    line-height: 1.6;
}
.xn-copyright strong {
    font-weight: 600;
    letter-spacing: 0.3px;
}
.xn-copyright-separator {
    color: var(--xn-accent-glow);
    font-size: 0.7rem;
}
.xn-rta-link {
    opacity: 0.85;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.xn-rta-link:focus-visible,
.xn-rta-link:hover {
    opacity: 1;
    transform: scale(1.08) translateY(-2px);
    outline: 2px solid var(--xn-primary);
    outline-offset: 4px;
    border-radius: var(--xn-radius-sm);
}
.xn-rta-link:hover img {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.xn-rta-img {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.xn-age-bar {
    border-top-color: var(--xn-accent-glow);
}
.xn-age-text {
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 700px;
    color: var(--xn-color-secondary);
}
.xn-age-text strong {
    font-weight: 600;
    letter-spacing: 0.3px;
}
.xn-age-text span {
    letter-spacing: 0.2px;
}
.xn-cookie-banner {
    animation: cookieSlideUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) 1.5s both;
}
@keyframes cookieSlideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.xn-cookie-inner {
    position: relative;
    margin: 0 0.75rem calc(0.75rem + 60px);
    padding: 1rem 1.15rem;
    border-radius: 1rem;
    background: rgba(22, 22, 26, 0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.xn-cookie-close {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    background: 0 0;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.25rem;
    cursor: pointer;
    transition: color 0.2s;
}
.xn-cookie-close:hover {
    color: rgba(255, 255, 255, 0.85);
}
.xn-cookie-body {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}
.xn-cookie-icon-wrap {
    flex-shrink: 0;
    font-size: 1.35rem;
    line-height: 1;
    color: #fbbf24;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.35));
}
.xn-cookie-text {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.45;
    margin: 0;
}

.xn-cookie-link {
    color: #fbbf24;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.xn-cookie-link:hover {
    color: #fbbf24;
    text-decoration: underline;
}
.xn-cookie-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.xn-cookie-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.5rem;
    padding: 0.45rem 0;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.2s,
        transform 0.15s;
}
.xn-cookie-btn:active {
    transform: scale(0.97);
}
.xn-cookie-btn-reject {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.65);
}
.xn-cookie-btn-reject:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}
.xn-cookie-btn-accept {
    background: var(--xn-primary, #dc3545);
    color: #fff;
}
.xn-cookie-btn-accept:hover {
    background: color-mix(in srgb, var(--xn-primary, #dc3545) 85%, #fff);
}
@media (min-width: 576px) {
    .xn-cookie-inner {
        max-width: 340px;
        margin: 0 0 calc(1rem + 60px) 1rem;
    }
}
@media (min-width: 768px) {
    .xn-cookie-inner {
        max-width: 360px;
        margin: 0 0 calc(1.25rem + 60px) 1.25rem;
        padding: 1.15rem 1.35rem;
    }
    .xn-cookie-text {
        font-size: 0.82rem;
    }
}
@media (min-width: 992px) {
    .xn-cookie-inner {
        margin-bottom: 1.25rem;
    }
}
.xn-back-to-top {
    position: fixed;
    bottom: 5rem;
    right: 1rem;
    z-index: 1018;
    width: 54px;
    height: 54px;
    background: var(--xn-primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.9);
    transition: all 0.3s ease;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.2);
}
.xn-back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.xn-back-to-top:focus-visible,
.xn-back-to-top:hover {
    background: #ff1a1a;
    transform: translateY(-3px);
    box-shadow:
        0 6px 20px rgba(var(--xn-primary-rgb), 0.5),
        0 3px 8px rgba(0, 0, 0, 0.3);
    outline: 0;
}
.xn-back-to-top:active {
    transform: translateY(-1px);
    transition: all 0.1s ease;
}
.xn-back-to-top-icon {
    font-size: 1.25rem;
    font-weight: 700;
    position: relative;
    z-index: 2;
}
.xn-progress-ring {
    position: absolute;
    top: -5px;
    left: -2px;
    width: 60px;
    height: 60px;
    transform: rotate(-90deg);
    pointer-events: none;
    z-index: 1;
}
.xn-progress-ring-circle {
    fill: none;
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 176.7;
    stroke-dashoffset: 176.7;
    transition: stroke-dashoffset 0.1s linear;
}
.xn-back-to-top-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    transform: scale(0);
    animation: rippleEffect 0.4s ease-out;
    pointer-events: none;
}
@keyframes rippleEffect {
    to {
        transform: scale(1.8);
        opacity: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    *,
    ::after,
    ::before {
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0s !important;
        scroll-behavior: auto !important;
    }
    .xn-footer-border {
        animation: none !important;
    }
    .xn-cookie-banner {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
    .xn-back-to-top {
        transition: opacity 0s !important;
        transform: none !important;
    }
}
@media print {
    .xn-age-bar,
    .xn-cookie-banner,
    .xn-footer-border {
        display: none !important;
    }
    .xn-footer {
        background: #fff !important;
        color: #000 !important;
    }
    .footer-link,
    .xn-copyright {
        color: #000 !important;
    }
}
.sub-filter-section {
    padding: 0.5rem 0;
}
.sub-filter-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.sub-filter-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
}
.sub-filter-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sub-filter-title-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--xn-primary);
    border-radius: 8px;
    color: var(--xn-color-light);
    font-size: 0.8rem;
}
.sub-filter-title h1 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
}
.sub-filter-title h1 a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    -webkit-tap-highlight-color: transparent;
}
.sub-filter-title h1 a:active {
    opacity: 0.7;
}
.sub-filter-title h1 .bi-chevron-right {
    font-size: 0.65rem;
    color: var(--xn-primary);
}
.mobile-category-btn,
.mobile-filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 8px;
    color: var(--xn-color);
    font-size: 0.9rem;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s ease;
}
.mobile-filter-btn {
    gap: 0.25rem;
    width: auto;
    padding: 0 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
}
.mobile-filter-btn i {
    font-size: 0.7rem;
}
.mobile-category-btn:active,
.mobile-filter-btn:active {
    transform: scale(0.95);
    background: var(--xn-glass-border);
}
.mobile-category-btn.has-selection,
.mobile-filter-btn.has-selection {
    background: var(--xn-accent-glow);
    border-color: var(--xn-primary);
    color: var(--xn-primary);
}
.mobile-buttons-row {
    display: flex;
    gap: 0.375rem;
    align-items: center;
}
.sub-filter-pills {
    display: none;
    gap: 0.375rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0 -0.75rem;
    padding: 0.125rem 0.75rem;
}
.sub-filter-pills::-webkit-scrollbar {
    display: none;
}
.filter-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    height: 32px;
    padding: 0 0.75rem;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 16px;
    color: var(--xn-color-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s ease;
}
.filter-pill:active {
    transform: scale(0.97);
}
.filter-pill.active {
    background: var(--xn-primary);
    border-color: transparent;
    color: var(--xn-color-light);
    font-weight: 600;
}
.filter-pill i {
    font-size: 0.75rem;
}
.filter-pill .pill-text {
    display: inline;
}
.filter-menu {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    transform: none !important;
    max-height: 50vh;
    overflow-y: auto;
    border-radius: 1rem 1rem 0 0 !important;
    background: var(--xn-bg-color) !important;
    border: none !important;
    box-shadow: 0 -10px 40px var(--xn-glass-shadow) !important;
    padding: 0 !important;
    margin: 0 !important;
    animation: slideUp 0.2s ease-out;
}
.filter-menu-header {
    position: sticky;
    top: 0;
    background: var(--xn-bg-color);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--xn-glass-border);
    z-index: 1;
}
.filter-menu-header span {
    font-weight: 600;
    font-size: 0.875rem;
}
.filter-menu-list {
    padding: 0.5rem;
}
.filter-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--xn-color);
    background: 0 0;
    border: none;
    transition: all 0.15s ease;
    min-height: 44px;
}
.filter-menu .dropdown-item i {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
}
.filter-menu .dropdown-item:active {
    background: var(--xn-element-bg);
}
.filter-menu .dropdown-item.active {
    background: var(--xn-primary);
    color: var(--xn-color-light);
    font-weight: 600;
}
.category-menu {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    transform: none !important;
    max-height: 60vh;
    overflow-y: auto;
    border-radius: 1rem 1rem 0 0 !important;
    background: var(--xn-bg-color) !important;
    border: none !important;
    box-shadow: 0 -10px 40px var(--xn-glass-shadow) !important;
    padding: 0 !important;
    margin: 0 !important;
    animation: slideUp 0.2s ease-out;
}
@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
.category-menu-header {
    position: sticky;
    top: 0;
    background: var(--xn-bg-color);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--xn-glass-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1;
}
.category-menu-header span {
    font-weight: 600;
    font-size: 0.875rem;
}
.category-menu-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--xn-element-bg);
    border: none;
    border-radius: 50%;
    color: var(--xn-color);
    font-size: 0.875rem;
}
.category-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.375rem;
    padding: 0.75rem;
}
.category-menu .dropdown-item {
    border-radius: 8px;
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--xn-color);
    text-align: center;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    transition: all 0.15s ease;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.category-menu .dropdown-item:active {
    background: var(--xn-glass-border);
}
.category-menu .dropdown-item.active {
    background: var(--xn-primary);
    border-color: transparent;
    color: var(--xn-color-light);
    font-weight: 600;
}
@media (min-width: 420px) {
    .mobile-filter-btn {
        padding: 0 0.75rem;
        font-size: 0.8125rem;
    }
}
@media (min-width: 576px) {
    .sub-filter-section {
        padding: 0.75rem 0;
    }
    .sub-filter-header {
        gap: 0.625rem;
    }
    .sub-filter-title h1 {
        font-size: 1.125rem;
    }
    .sub-filter-title-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 0.9rem;
    }
    .filter-pill {
        height: 36px;
        padding: 0 0.875rem;
        font-size: 0.8125rem;
    }
    .filter-pill i {
        font-size: 0.8125rem;
    }
    .category-menu-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 768px) {
    .sub-filter-section {
        padding: 0.75rem 0;
    }
    .sub-filter-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }
    .sub-filter-title-row {
        flex-shrink: 0;
    }
    .mobile-buttons-row,
    .mobile-category-btn,
    .mobile-filter-btn {
        display: none !important;
    }
    .sub-filter-title h1 {
        font-size: 1.25rem;
    }
    .sub-filter-title-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 10px;
        font-size: 1rem;
    }
    .sub-filter-pills {
        display: flex;
        margin: 0;
        padding: 0;
        overflow-x: visible;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .filter-pill {
        height: 34px;
        padding: 0 0.875rem;
    }
    .filter-pill:hover {
        background: var(--xn-glass-border);
        border-color: var(--xn-border-color);
        color: var(--xn-text-hover);
    }
    .filter-pill.active:hover {
        background: var(--xn-primary);
        opacity: 0.9;
    }
    .category-menu,
    .filter-menu {
        position: absolute !important;
        bottom: auto !important;
        left: auto !important;
        right: 0 !important;
        top: 100% !important;
        width: 260px;
        max-height: 350px;
        border-radius: 12px !important;
        animation: fadeIn 0.15s ease-out;
    }
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .category-menu-header,
    .filter-menu-header {
        display: none;
    }
    .category-menu-grid {
        grid-template-columns: 1fr;
        padding: 0.375rem;
    }
    .category-menu .dropdown-item {
        text-align: left;
        justify-content: flex-start;
        min-height: 38px;
        padding: 0.625rem 0.875rem;
        font-size: 0.8125rem;
    }
    .desktop-category-btn {
        align-items: center;
        gap: 0.375rem;
        height: 34px;
        padding: 0 0.875rem;
        background: var(--xn-element-bg);
        border: 1px solid var(--xn-glass-border);
        border-radius: 17px;
        color: var(--xn-color-secondary);
        font-size: 0.8125rem;
        font-weight: 500;
        white-space: nowrap;
        transition: all 0.15s ease;
    }
    .desktop-category-btn:hover {
        background: var(--xn-glass-border);
        border-color: var(--xn-border-color);
        color: var(--xn-text-hover);
    }
    .desktop-category-btn.has-selection {
        background: var(--xn-accent-glow);
        border-color: var(--xn-primary);
        color: var(--xn-primary);
    }
}
@media (min-width: 1024px) {
    .sub-filter-title h1 {
        font-size: 1.375rem;
    }
    .sub-filter-title-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 1.1rem;
    }
    .filter-pill {
        height: 36px;
        padding: 0 1rem;
        font-size: 0.875rem;
    }
    .desktop-category-btn {
        height: 36px;
        padding: 0 1rem;
        font-size: 0.875rem;
    }
}
.filter-divider {
    display: none;
    width: 1px;
    height: 20px;
    background: var(--xn-glass-border);
    flex-shrink: 0;
    align-self: center;
    margin: 0 0.125rem;
}
.desktop-category-btn {
    display: none;
}
@media (min-width: 768px) {
    .filter-divider {
        display: block;
    }
    .desktop-category-btn {
        display: inline-flex;
    }
}
.login-page ::selection {
    background: var(--xn-accent);
    color: #fff;
}
.login-page ::-webkit-scrollbar {
    width: 6px;
}
.login-page ::-webkit-scrollbar-track {
    background: 0 0;
}
.login-page ::-webkit-scrollbar-thumb {
    background: var(--xn-glass-border);
    border-radius: 3px;
}
.login-page ::-webkit-scrollbar-thumb:hover {
    background: var(--xn-border-color);
}
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background:
        radial-gradient(circle at 20% 20%, var(--xn-accent-glow) 0, transparent 45%), radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.12) 0, transparent 45%), radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.08) 0, transparent 50%),
        linear-gradient(180deg, var(--xn-bg) 0, var(--xn-bg-color) 100%);
    position: relative;
    overflow: hidden;
}
.login-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridMove 25s linear infinite;
    opacity: 0.4;
    pointer-events: none;
    will-change: transform;
}
.login-page::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--xn-primary-rgb), 0.15), transparent 70%);
    top: 10%;
    right: -5%;
    animation: orbFloat 12s ease-in-out infinite alternate;
    pointer-events: none;
    filter: blur(40px);
}
@keyframes orbFloat {
    0% {
        transform: translate(0, 0) scale(1);
    }
    100% {
        transform: translate(-40px, 30px) scale(1.15);
    }
}
@keyframes gridMove {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(50px, 50px);
    }
}
.login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    background: var(--xn-glass-bg);
    backdrop-filter: blur(80px) saturate(200%);
    -webkit-backdrop-filter: blur(80px) saturate(200%);
    border: 1px solid var(--xn-glass-border);
    border-radius: var(--xn-radius-2xl);
    padding: 3.5rem 2.75rem;
    box-shadow:
        0 0 0 1px var(--xn-glass-border) inset,
        var(--xn-shadow-lg),
        0 0 120px rgba(var(--xn-primary-rgb), 0.2),
        0 8px 32px var(--xn-glass-shadow);
    animation: cardAppear 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.login-card:hover {
    border-color: var(--xn-border-color);
    box-shadow:
        0 0 0 1px var(--xn-glass-border) inset,
        var(--xn-shadow-lg),
        0 0 140px rgba(var(--xn-primary-rgb), 0.25),
        0 10px 40px var(--xn-glass-shadow);
}
.login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--xn-accent), rgba(var(--xn-primary-rgb), 0.6), transparent);
    border-radius: var(--xn-radius-2xl) var(--xn-radius-2xl) 0 0;
    opacity: 0.8;
    animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
    0%,
    100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}
@keyframes cardAppear {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}
.login-header {
    text-align: center;
    margin-bottom: 3rem;
}
.login-logo {
    width: 80px;
    height: 80px;
    background: linear-gradient(145deg, var(--xn-accent) 0, rgba(var(--xn-primary-rgb), 0.75) 100%);
    border-radius: var(--xn-radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    box-shadow:
        0 24px 48px var(--xn-accent-glow),
        0 0 0 1px var(--xn-glass-border) inset,
        var(--xn-shadow-base),
        0 0 60px rgba(var(--xn-primary-rgb), 0.4);
    animation: logoPulse 5s ease-in-out infinite;
    position: relative;
    transform-style: preserve-3d;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.login-logo:hover {
    transform: translateY(-6px) rotateY(8deg) rotateX(5deg) scale(1.05);
    box-shadow:
        0 30px 60px var(--xn-accent-glow),
        0 0 0 1px var(--xn-border-color) inset,
        var(--xn-shadow-lg),
        0 0 80px rgba(var(--xn-primary-rgb), 0.5);
}
.login-logo::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 27px;
    background: linear-gradient(145deg, var(--xn-accent), rgba(var(--xn-primary-rgb), 0.3));
    z-index: -1;
    opacity: 0;
    filter: blur(20px);
    transition: opacity 0.5s ease;
}
.login-logo:hover::before {
    opacity: 0.8;
}
.login-logo::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--xn-radius-2xl);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.login-logo:hover::after {
    opacity: 1;
}
@keyframes logoPulse {
    0%,
    100% {
        box-shadow:
            0 20px 40px var(--xn-accent-glow),
            0 0 0 1px var(--xn-glass-border) inset,
            var(--xn-shadow-sm);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 25px 50px var(--xn-accent-glow),
            0 0 0 1px var(--xn-border-color) inset,
            var(--xn-shadow-base);
        transform: scale(1.02);
    }
}
.login-logo i {
    font-size: 2rem;
    color: #fff;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
    animation: iconFloat 3s ease-in-out infinite;
    line-height: 1;
}
@keyframes iconFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}
.login-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--xn-color);
    margin-bottom: 0.75rem;
    letter-spacing: -0.04em;
    line-height: 1.2;
}
.login-subtitle {
    color: var(--xn-text-muted);
    font-size: 0.975rem;
    font-weight: 400;
    line-height: 1.5;
}
.input-group-modern {
    position: relative;
    margin-bottom: 1.75rem;
}
.input-group-modern .input-icon {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--xn-text-muted);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    font-size: 1.25rem;
    line-height: 1;
}
.input-group-modern .floating-label {
    position: absolute;
    left: 3.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--xn-text-muted);
    font-size: 1rem;
    font-weight: 500;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    background: 0 0;
    padding: 0 0.25rem;
}
.input-group-modern input {
    width: 100%;
    padding: 1.25rem 3rem 1.25rem 3.5rem;
    background: var(--xn-element-bg);
    border: 2px solid var(--xn-glass-border);
    border-radius: var(--xn-radius-xl);
    color: var(--xn-color);
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    outline: 0;
    position: relative;
}
.input-group-modern input::placeholder {
    color: transparent;
}
.input-group-modern input:hover {
    background: var(--xn-element-hover-bg);
    border-color: var(--xn-border-color);
}
.input-group-modern input:focus,
.input-group-modern input:not(:placeholder-shown) {
    background: var(--xn-element-hover-bg);
    border-color: var(--xn-accent);
    box-shadow:
        0 0 0 5px var(--xn-accent-glow),
        var(--xn-shadow-base),
        0 0 0 1px var(--xn-glass-border) inset;
    transform: translateY(-3px);
}
.input-group-modern input:focus ~ .floating-label,
.input-group-modern input:not(:placeholder-shown) ~ .floating-label {
    top: -2px;
    left: 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--xn-accent);
    background: linear-gradient(180deg, transparent 40%, var(--xn-glass-bg) 40%);
    padding: 0 0.5rem;
}
.input-group-modern input:focus ~ .input-icon {
    color: var(--xn-accent);
    transform: translateY(-50%) scale(1.15);
}
.input-group-modern.has-error input {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.05);
    animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.input-group-modern.has-error .input-icon {
    color: #ef4444;
    animation: iconShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.input-group-modern.has-error .floating-label {
    color: #ef4444;
}
@keyframes iconShake {
    0%,
    100% {
        transform: translateY(-50%) rotate(0);
    }
    25% {
        transform: translateY(-50%) rotate(-5deg);
    }
    75% {
        transform: translateY(-50%) rotate(5deg);
    }
}
@keyframes shake {
    0%,
    100% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-8px);
    }
    40% {
        transform: translateX(8px);
    }
    60% {
        transform: translateX(-6px);
    }
    80% {
        transform: translateX(6px);
    }
}
.password-toggle {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    background: 0 0;
    border: none;
    color: var(--xn-text-muted);
    cursor: pointer;
    padding: 0.625rem;
    border-radius: var(--xn-radius-base);
    transition: all 0.3s ease;
    z-index: 2;
}
.password-toggle:hover {
    color: var(--xn-accent);
    background: var(--xn-element-bg);
    transform: translateY(-50%) scale(1.1);
}
.password-toggle:active {
    transform: translateY(-50%) scale(0.95);
}
.password-toggle i {
    font-size: 1.25rem;
    line-height: 1;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.password-toggle:hover i {
    transform: rotate(5deg);
}
.remember-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.remember-me {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}
.remember-me:hover {
    transform: translateX(2px);
}
.remember-me input[type='checkbox'] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    background: var(--xn-element-bg);
    border: 2px solid var(--xn-glass-border);
    border-radius: var(--xn-radius-sm);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.remember-me input[type='checkbox']:hover {
    border-color: var(--xn-border-color);
    background: var(--xn-element-hover-bg);
}
.remember-me input[type='checkbox']:checked {
    background: var(--xn-accent);
    border-color: var(--xn-accent);
    box-shadow: 0 0 0 3px var(--xn-accent-glow);
}
.remember-me input[type='checkbox']:checked::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
    animation: checkPop 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes checkPop {
    0% {
        transform: rotate(45deg) scale(0);
        opacity: 0;
    }
    50% {
        transform: rotate(45deg) scale(1.2);
    }
    100% {
        transform: rotate(45deg) scale(1);
        opacity: 1;
    }
}
.remember-me input[type='checkbox']:focus {
    box-shadow: 0 0 0 4px var(--xn-accent-glow);
    outline: 0;
}
.remember-me span {
    color: var(--xn-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
}
.forgot-inline {
    color: var(--xn-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    padding-bottom: 2px;
}
.forgot-inline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1.5px;
    background: var(--xn-accent);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.forgot-inline:hover {
    color: var(--xn-accent);
}
.forgot-inline:hover::after {
    width: 100%;
}
.btn-login {
    position: relative;
    width: 100%;
    padding: 1.25rem 1.75rem;
    background: linear-gradient(145deg, var(--xn-accent) 0, rgba(var(--xn-primary-rgb), 0.85) 100%);
    border: none;
    border-radius: var(--xn-radius-xl);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    overflow: hidden;
    box-shadow:
        0 10px 30px var(--xn-accent-glow),
        0 0 0 1px var(--xn-glass-border) inset,
        var(--xn-shadow-sm);
}
.btn-login::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.btn-login::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition:
        width 0.6s ease,
        height 0.6s ease;
}
.btn-login:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow:
        0 20px 50px var(--xn-accent-glow),
        0 0 0 1px var(--xn-border-color) inset,
        var(--xn-shadow-lg),
        0 0 80px rgba(var(--xn-primary-rgb), 0.4);
    filter: brightness(1.2) saturate(1.1);
}
.btn-login:hover::before {
    opacity: 1;
}
.btn-login:active {
    transform: translateY(-2px) scale(0.99);
    box-shadow:
        0 8px 20px var(--xn-accent-glow),
        0 0 0 1px var(--xn-glass-border) inset;
}
.btn-login:active::after {
    width: 300px;
    height: 300px;
    opacity: 0;
    transition: 0s;
}
.btn-login:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    filter: none;
}
.btn-login .btn-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}
.btn-login .btn-loader {
    display: none;
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    position: relative;
    z-index: 1;
}
.btn-login.loading .btn-text {
    display: none;
}
.btn-login.loading .btn-loader {
    display: block;
    margin: 0 auto;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.divider {
    display: flex;
    align-items: center;
    margin: 2.5rem 0;
    gap: 1.25rem;
    position: relative;
}
.divider::after,
.divider::before {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--xn-glass-border), transparent);
    position: relative;
}
.divider::before {
    background: linear-gradient(90deg, transparent, var(--xn-glass-border));
}
.divider::after {
    background: linear-gradient(90deg, var(--xn-glass-border), transparent);
}
.divider span {
    color: var(--xn-text-muted);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    padding: 0 0.5rem;
    background: var(--xn-element-bg);
    border-radius: var(--xn-radius-base);
}
.google-btn-wrapper {
    background: var(--xn-element-bg);
    border: 2px solid var(--xn-glass-border);
    border-radius: var(--xn-radius-xl);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.35rem;
    position: relative;
}
.google-btn-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(66, 133, 244, 0.12), rgba(219, 68, 55, 0.08), rgba(244, 180, 0, 0.08));
    opacity: 0;
    transition: opacity 0.4s ease;
}
.google-btn-wrapper:hover {
    background: var(--xn-element-hover-bg);
    border-color: var(--xn-border-color);
    transform: translateY(-4px) scale(1.01);
    box-shadow:
        var(--xn-shadow-base),
        0 0 0 1px var(--xn-glass-border) inset,
        0 0 30px rgba(66, 133, 244, 0.15);
}
.google-btn-wrapper:hover::before {
    opacity: 1;
}
.google-btn-wrapper > div {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.signup-section {
    text-align: center;
    margin-top: 2.75rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--xn-glass-border);
    position: relative;
}
.signup-section::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--xn-accent), transparent);
    filter: blur(2px);
}
.signup-section::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: var(--xn-accent);
}
.signup-text {
    color: var(--xn-text-muted);
    font-size: 0.975rem;
    margin-bottom: 1.5rem;
    font-weight: 500;
}
.btn-signup {
    position: relative;
    width: 100%;
    padding: 1.25rem 1.75rem;
    background: var(--xn-element-bg);
    border: 2px solid var(--xn-glass-border);
    border-radius: var(--xn-radius-xl);
    color: var(--xn-color);
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    display: block;
    overflow: hidden;
}
.btn-signup:hover {
    border-color: var(--xn-accent);
    color: var(--xn-color);
    text-decoration: none;
    transform: translateY(-4px) scale(1.01);
    box-shadow:
        0 15px 40px var(--xn-accent-glow),
        0 0 0 1px var(--xn-glass-border) inset,
        var(--xn-shadow-base),
        0 0 60px rgba(var(--xn-primary-rgb), 0.3);
}
.btn-signup:hover::before {
    opacity: 1;
}
.btn-signup:hover::after {
    opacity: 1;
}
.login-links {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin-top: 2rem;
}
.login-links a {
    color: var(--xn-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    padding-bottom: 4px;
}
.login-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--xn-accent), transparent);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-50%);
    border-radius: 2px;
}
.login-links a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--xn-accent);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-50%);
    filter: blur(4px);
}
.login-links a:hover {
    color: var(--xn-accent);
    transform: translateY(-2px);
}
.login-links a:hover::after {
    width: 100%;
}
.login-links a:hover::before {
    width: 100%;
}
.error-message {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.03));
    border: 2px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--xn-radius-xl);
    padding: 1.125rem 1.5rem;
    margin-bottom: 1.75rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.error-message::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}
.error-message i {
    flex-shrink: 0;
    color: #ef4444;
    filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.4));
    font-size: 1.25rem;
    margin-top: 1px;
    line-height: 1;
}
.error-message span {
    color: var(--xn-color);
    font-size: 0.9rem;
    line-height: 1.5;
    font-weight: 500;
}
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (max-width: 768px) {
    .login-card {
        padding: 2.75rem 2rem;
    }
    .login-page::after {
        display: none;
    }
    .login-logo {
        width: 72px;
        height: 72px;
        margin-bottom: 1.75rem;
    }
    .login-logo i {
        font-size: 1.75rem;
    }
    .login-header {
        margin-bottom: 2.5rem;
    }
    .login-title {
        font-size: 1.75rem;
    }
    .login-card:hover {
        border-color: var(--xn-glass-border);
        box-shadow:
            0 0 0 1px var(--xn-glass-border) inset,
            var(--xn-shadow-lg),
            0 0 120px rgba(var(--xn-primary-rgb), 0.2),
            0 8px 32px var(--xn-glass-shadow);
    }
    #g-signup-modal .modal-content {
        border-radius: 16px;
    }
}
@media (max-width: 480px) {
    .login-page {
        padding: 0.75rem;
        padding-top: 2rem;
        padding-bottom: env(safe-area-inset-bottom, 1rem);
        align-items: flex-start;
    }
    .login-page::before {
        background-size: 30px 30px;
        opacity: 0.2;
    }
    .login-card {
        padding: 2rem 1.25rem;
        border-radius: 20px;
        max-width: 100%;
        box-shadow:
            0 0 0 1px var(--xn-glass-border) inset,
            var(--xn-shadow-base),
            0 4px 16px var(--xn-glass-shadow);
        backdrop-filter: blur(40px) saturate(150%);
        -webkit-backdrop-filter: blur(40px) saturate(150%);
    }
    .login-card::before {
        height: 2px;
    }
    .login-header {
        margin-bottom: 1.75rem;
    }
    .login-logo {
        width: 60px;
        height: 60px;
        border-radius: 16px;
        margin-bottom: 1.25rem;
        box-shadow:
            0 12px 24px var(--xn-accent-glow),
            0 0 0 1px var(--xn-glass-border) inset;
        animation: none;
    }
    .login-logo i {
        font-size: 1.5rem;
        animation: none;
    }
    .login-logo:hover {
        transform: none;
    }
    .login-title {
        font-size: 1.5rem;
        letter-spacing: -0.03em;
    }
    .login-subtitle {
        font-size: 0.85rem;
    }
    .input-group-modern {
        margin-bottom: 1.125rem;
    }
    .input-group-modern .input-icon {
        left: 1rem;
    }
    .input-group-modern .floating-label {
        left: 3rem;
        font-size: 0.925rem;
    }
    .input-group-modern input {
        padding: 1rem 2.75rem 1rem 3rem;
        font-size: 16px;
        border-width: 1.5px;
        border-radius: 14px;
    }
    .input-group-modern input:focus,
    .input-group-modern input:not(:placeholder-shown) {
        transform: none;
        box-shadow: 0 0 0 3px var(--xn-accent-glow);
    }
    .input-group-modern input:focus ~ .floating-label,
    .input-group-modern input:not(:placeholder-shown) ~ .floating-label {
        left: 1rem;
        font-size: 0.7rem;
    }
    .input-group-modern input:focus ~ .input-icon {
        transform: translateY(-50%);
    }
    .password-toggle {
        padding: 0.75rem;
        right: 0.75rem;
    }
    .remember-row {
        margin-bottom: 1.25rem;
        gap: 0.75rem;
    }
    .remember-me input[type='checkbox'] {
        width: 20px;
        height: 20px;
    }
    .remember-me input[type='checkbox']:checked::after {
        left: 6px;
        top: 2px;
    }
    .remember-me span {
        font-size: 0.85rem;
    }
    .forgot-inline {
        font-size: 0.85rem;
    }
    .btn-login {
        padding: 1rem 1.25rem;
        font-size: 0.925rem;
        letter-spacing: 0.08em;
        border-radius: 14px;
    }
    .btn-login:hover {
        transform: none;
        filter: brightness(1.1);
        box-shadow:
            0 10px 30px var(--xn-accent-glow),
            0 0 0 1px var(--xn-glass-border) inset;
    }
    .btn-login:active {
        transform: scale(0.98);
    }
    .btn-signup {
        padding: 1rem 1.25rem;
        font-size: 0.925rem;
        border-radius: 14px;
        border-width: 1.5px;
    }
    .btn-signup:hover {
        transform: none;
        box-shadow: var(--xn-shadow-base);
    }
    .btn-signup:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
    .divider {
        margin: 1.5rem 0;
        gap: 0.875rem;
    }
    .divider span {
        font-size: 0.75rem;
        letter-spacing: 0.12em;
    }
    .google-btn-wrapper {
        border-radius: 14px;
        border-width: 1.5px;
    }
    .google-btn-wrapper:hover {
        transform: none;
        box-shadow: var(--xn-shadow-sm);
    }
    .signup-section {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
    }
    .signup-text {
        font-size: 0.875rem;
        margin-bottom: 1rem;
    }
    .login-links {
        gap: 1.5rem;
        margin-top: 1.5rem;
    }
    .login-links a {
        font-size: 0.825rem;
        padding: 0.5rem 0;
    }
    .login-links a:hover {
        transform: none;
    }
    .error-message {
        padding: 0.875rem 1rem 0.875rem 1.25rem;
        margin-bottom: 1.25rem;
        border-radius: 14px;
        gap: 0.75rem;
    }
    .error-message span {
        font-size: 0.825rem;
    }
    #g-signup-modal .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    #g-signup-modal .modal-content {
        border-radius: 16px;
    }
    #g-signup-modal .modal-header {
        padding: 1rem 1.25rem;
    }
    #g-signup-modal .modal-title {
        font-size: 1.1rem;
    }
    #g-signup-modal .modal-body {
        padding: 1rem 1.25rem;
    }
    #g-signup-modal .modal-footer {
        padding: 0.875rem 1.25rem;
        flex-direction: column;
    }
    #g-signup-modal .form-control {
        font-size: 16px;
        padding: 0.7rem 0.875rem;
    }
    #g-signup-picture-img {
        width: 64px;
        height: 64px;
        border-width: 2px;
    }
    .btn-g-signup {
        width: 100%;
        padding: 0.875rem 1.25rem;
        font-size: 0.925rem;
    }
    .g-signup-agreement {
        font-size: 0.775rem;
    }
}
@media (max-width: 360px) {
    .login-page {
        padding: 0.5rem;
        padding-top: 1.25rem;
    }
    .login-card {
        padding: 1.75rem 1rem;
        border-radius: 16px;
    }
    .login-header {
        margin-bottom: 1.5rem;
    }
    .login-logo {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        margin-bottom: 1rem;
    }
    .login-logo i {
        font-size: 1.25rem;
    }
    .login-title {
        font-size: 1.35rem;
    }
    .login-subtitle {
        font-size: 0.8rem;
    }
    .input-group-modern input {
        padding: 0.875rem 2.5rem 0.875rem 2.75rem;
    }
    .input-group-modern .input-icon {
        left: 0.75rem;
        width: 18px;
        height: 18px;
    }
    .input-group-modern .floating-label {
        left: 2.75rem;
        font-size: 0.85rem;
    }
    .input-group-modern input:focus ~ .floating-label,
    .input-group-modern input:not(:placeholder-shown) ~ .floating-label {
        left: 0.75rem;
    }
    .password-toggle {
        right: 0.5rem;
    }
    .btn-login,
    .btn-signup {
        padding: 0.875rem 1rem;
        font-size: 0.85rem;
        letter-spacing: 0.06em;
    }
    .divider {
        margin: 1.25rem 0;
    }
    .signup-section {
        margin-top: 1.25rem;
        padding-top: 1.25rem;
    }
    .signup-text {
        font-size: 0.8rem;
    }
    .forgot-inline,
    .remember-me span {
        font-size: 0.8rem;
    }
    #g-signup-modal .modal-dialog {
        margin: 0.25rem;
    }
}
@media (max-height: 600px) and (orientation: landscape) {
    .login-page {
        align-items: flex-start;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        overflow-y: auto;
    }
    .login-card {
        padding: 1.5rem 1.75rem;
    }
    .login-header {
        margin-bottom: 1rem;
    }
    .login-logo {
        width: 48px;
        height: 48px;
        margin-bottom: 0.75rem;
        animation: none;
    }
    .login-logo i {
        font-size: 1.25rem;
        animation: none;
    }
    .login-title {
        font-size: 1.35rem;
        margin-bottom: 0.25rem;
    }
    .login-subtitle {
        font-size: 0.8rem;
    }
    .input-group-modern {
        margin-bottom: 0.75rem;
    }
    .input-group-modern input {
        padding: 0.75rem 2.5rem 0.75rem 2.75rem;
    }
    .remember-row {
        margin-bottom: 0.75rem;
    }
    .btn-login,
    .btn-signup {
        padding: 0.75rem 1rem;
    }
    .divider {
        margin: 1rem 0;
    }
    .signup-section {
        margin-top: 1rem;
        padding-top: 1rem;
    }
    .signup-text {
        margin-bottom: 0.75rem;
    }
    .login-links {
        margin-top: 1rem;
    }
}
@media (hover: none) and (pointer: coarse) {
    .login-card:hover {
        border-color: var(--xn-glass-border);
    }
    .login-logo:hover {
        transform: none;
    }
    .login-logo:hover::after,
    .login-logo:hover::before {
        opacity: 0;
    }
    .btn-login:hover {
        transform: none;
        filter: none;
    }
    .btn-signup:hover {
        transform: none;
    }
    .google-btn-wrapper:hover {
        transform: none;
    }
    .remember-me:hover {
        transform: none;
    }
    .login-links a:hover {
        transform: none;
    }
    .forgot-inline:hover::after {
        width: 0;
    }
    .btn-login:active {
        transform: scale(0.97);
        filter: brightness(0.95);
    }
    .btn-signup:active {
        transform: scale(0.97);
        opacity: 0.85;
    }
    .google-btn-wrapper:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
    .password-toggle:active {
        transform: translateY(-50%) scale(0.9);
        background: var(--xn-element-bg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .login-logo,
    .login-logo i {
        animation: none !important;
    }
    .login-card,
    .login-card::before {
        animation: none !important;
    }
    .login-page::after,
    .login-page::before {
        animation: none !important;
    }
    *,
    ::after,
    ::before {
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0s !important;
    }
}
.btn-login:focus-visible,
.btn-signup:focus-visible,
.forgot-inline:focus-visible,
.login-links a:focus-visible,
.password-toggle:focus-visible {
    outline: 2px solid var(--xn-accent);
    outline-offset: 2px;
}
.input-group-modern input:focus-visible {
    outline: 0;
}
.remember-me input[type='checkbox']:focus-visible {
    box-shadow: 0 0 0 4px var(--xn-accent-glow);
    outline: 2px solid var(--xn-accent);
    outline-offset: 2px;
}
.password-strength {
    height: 3px;
    border-radius: 3px;
    background: var(--xn-glass-border);
    margin-top: -1rem;
    margin-bottom: 1.75rem;
    overflow: hidden;
}
.password-strength-bar {
    height: 100%;
    border-radius: 3px;
    transition:
        width 0.4s ease,
        background 0.4s ease;
    width: 0;
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
#g-signup-modal .modal-content {
    background: var(--xn-bg-color);
    border: 1px solid var(--xn-glass-border);
    border-radius: 20px;
}
#g-signup-modal .modal-header {
    border-bottom: 1px solid var(--xn-glass-border);
}
#g-signup-modal .modal-title {
    color: var(--xn-color);
}
#g-signup-modal .modal-footer {
    border-top: 1px solid var(--xn-glass-border);
    gap: 0.5rem;
}
#g-signup-picture-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 3px solid var(--xn-accent);
}
#g-signup-picture-block label {
    color: var(--xn-text-muted);
    cursor: pointer;
}
#g-signup-picture-block .form-check-input {
    margin: 0;
}
#g-signup-modal .nav-pills {
    background: var(--xn-element-bg);
    border-radius: 10px;
    padding: 4px;
}
#g-signup-modal .nav-link {
    border-radius: 8px;
    color: var(--xn-text-muted);
    transition: all 0.3s ease;
    font-weight: 500;
}
#g-signup-modal .nav-link:hover {
    color: var(--xn-color);
}
#g-signup-modal .nav-link.active {
    background: var(--xn-accent);
    color: #fff;
}
#g-signup-modal .modal-body p {
    color: var(--xn-text-muted);
}
#g-signup-modal .form-label {
    color: var(--xn-text-muted);
}
#g-signup-modal .form-control {
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 10px;
    color: var(--xn-color);
    padding: 0.75rem 1rem;
}
#g-signup-modal .form-control:focus {
    border-color: var(--xn-accent);
    box-shadow: 0 0 0 3px var(--xn-accent-glow);
    outline: 0;
}
#g-signup-modal .form-control[readonly] {
    background: var(--xn-bg);
    border-color: var(--xn-border-color);
    color: var(--xn-text-muted);
}
#g-signup-email-label {
    color: var(--xn-accent);
}
.g-signup-agreement {
    background: var(--xn-element-bg);
    color: var(--xn-text-muted);
    font-size: 0.85rem;
}
.g-signup-agreement b {
    color: var(--xn-text-muted);
}
#g-signup-modal .modal-body a {
    color: var(--xn-accent);
}
.btn-g-signup {
    background: var(--xn-accent);
    border: none;
    border-radius: 10px;
    color: #fff;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-g-signup:hover {
    filter: brightness(1.15);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--xn-accent-glow);
    color: #fff;
}
.btn-g-signup:active {
    transform: translateY(0) scale(0.98);
}
.btn-g-signup:focus-visible {
    outline: 2px solid var(--xn-accent);
    outline-offset: 2px;
}
.signup-page ::selection {
    background: var(--xn-accent);
    color: #fff;
}
.signup-page ::-webkit-scrollbar {
    width: 6px;
}
.signup-page ::-webkit-scrollbar-track {
    background: 0 0;
}
.signup-page ::-webkit-scrollbar-thumb {
    background: var(--xn-glass-border);
    border-radius: 3px;
}
.signup-page ::-webkit-scrollbar-thumb:hover {
    background: var(--xn-border-color);
}
.signup-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(circle at 20% 20%, var(--xn-accent-glow) 0, transparent 45%), radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.12) 0, transparent 45%), radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.08) 0, transparent 50%),
        linear-gradient(180deg, var(--xn-bg) 0, var(--xn-bg-color) 100%);
    position: relative;
    overflow: hidden;
}
.signup-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridMove 25s linear infinite;
    opacity: 0.4;
    pointer-events: none;
    will-change: transform;
}
.signup-page::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--xn-primary-rgb), 0.15), transparent 70%);
    top: 10%;
    right: -5%;
    animation: orbFloat 12s ease-in-out infinite alternate;
    pointer-events: none;
    filter: blur(40px);
}
@keyframes orbFloat {
    0% {
        transform: translate(0, 0) scale(1);
    }
    100% {
        transform: translate(-40px, 30px) scale(1.15);
    }
}
@keyframes gridMove {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(50px, 50px);
    }
}
.signup-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    background: var(--xn-glass-bg);
    backdrop-filter: blur(80px) saturate(200%);
    -webkit-backdrop-filter: blur(80px) saturate(200%);
    border: 1px solid var(--xn-glass-border);
    border-radius: var(--xn-radius-2xl);
    padding: 3.5rem 2.75rem;
    box-shadow:
        0 0 0 1px var(--xn-glass-border) inset,
        var(--xn-shadow-lg),
        0 0 120px rgba(var(--xn-primary-rgb), 0.2),
        0 8px 32px var(--xn-glass-shadow);
    animation: cardAppear 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.signup-card:hover {
    border-color: var(--xn-border-color);
    box-shadow:
        0 0 0 1px var(--xn-glass-border) inset,
        var(--xn-shadow-lg),
        0 0 140px rgba(var(--xn-primary-rgb), 0.25),
        0 10px 40px var(--xn-glass-shadow);
}
.signup-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--xn-accent), rgba(var(--xn-primary-rgb), 0.6), transparent);
    border-radius: var(--xn-radius-2xl) var(--xn-radius-2xl) 0 0;
    opacity: 0.8;
    animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
    0%,
    100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}
@keyframes cardAppear {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}
.signup-header {
    text-align: center;
    margin-bottom: 3rem;
}
.signup-logo {
    width: 80px;
    height: 80px;
    background: linear-gradient(145deg, var(--xn-accent) 0, rgba(var(--xn-primary-rgb), 0.75) 100%);
    border-radius: var(--xn-radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    box-shadow:
        0 24px 48px var(--xn-accent-glow),
        0 0 0 1px var(--xn-glass-border) inset,
        var(--xn-shadow-base),
        0 0 60px rgba(var(--xn-primary-rgb), 0.4);
    animation: logoPulse 5s ease-in-out infinite;
    position: relative;
    transform-style: preserve-3d;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.signup-logo:hover {
    transform: translateY(-6px) rotateY(8deg) rotateX(5deg) scale(1.05);
    box-shadow:
        0 30px 60px var(--xn-accent-glow),
        0 0 0 1px var(--xn-border-color) inset,
        var(--xn-shadow-lg),
        0 0 80px rgba(var(--xn-primary-rgb), 0.5);
}
.signup-logo::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 27px;
    background: linear-gradient(145deg, var(--xn-accent), rgba(var(--xn-primary-rgb), 0.3));
    z-index: -1;
    opacity: 0;
    filter: blur(20px);
    transition: opacity 0.5s ease;
}
.signup-logo:hover::before {
    opacity: 0.8;
}
.signup-logo::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--xn-radius-2xl);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.signup-logo:hover::after {
    opacity: 1;
}
@keyframes logoPulse {
    0%,
    100% {
        box-shadow:
            0 20px 40px var(--xn-accent-glow),
            0 0 0 1px var(--xn-glass-border) inset,
            var(--xn-shadow-sm);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 25px 50px var(--xn-accent-glow),
            0 0 0 1px var(--xn-border-color) inset,
            var(--xn-shadow-base);
        transform: scale(1.02);
    }
}
.signup-logo i {
    font-size: 2rem;
    color: #fff;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
    animation: iconFloat 3s ease-in-out infinite;
    line-height: 1;
}
@keyframes iconFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}
.signup-header h1 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--xn-color);
    margin: 0 0 0.75rem;
    letter-spacing: -0.04em;
    line-height: 1.2;
}
.signup-header p {
    color: var(--xn-text-muted);
    font-size: 0.975rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}
.input-group-modern {
    position: relative;
    margin-bottom: 1.75rem;
}
.input-group-modern .input-icon {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--xn-text-muted);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    font-size: 1.25rem;
    line-height: 1;
}
.input-group-modern input {
    width: 100%;
    padding: 1.25rem 3rem 1.25rem 3.5rem;
    background: var(--xn-element-bg);
    border: 2px solid var(--xn-glass-border);
    border-radius: var(--xn-radius-xl);
    color: var(--xn-color);
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    outline: 0;
    position: relative;
}
.input-group-modern .floating-label {
    position: absolute;
    left: 3.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--xn-text-muted);
    font-size: 1rem;
    font-weight: 500;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    background: 0 0;
    padding: 0 0.25rem;
}
.input-group-modern input::placeholder {
    color: transparent;
}
.input-group-modern input:hover {
    background: var(--xn-element-hover-bg);
    border-color: var(--xn-border-color);
}
.input-group-modern input:focus,
.input-group-modern input:not(:placeholder-shown) {
    background: var(--xn-element-hover-bg);
    border-color: var(--xn-accent);
    box-shadow:
        0 0 0 5px var(--xn-accent-glow),
        var(--xn-shadow-base),
        0 0 0 1px var(--xn-glass-border) inset;
    transform: translateY(-3px);
}
.input-group-modern input:focus ~ .floating-label,
.input-group-modern input:not(:placeholder-shown) ~ .floating-label {
    top: -2px;
    left: 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--xn-accent);
    background: linear-gradient(180deg, transparent 40%, var(--xn-glass-bg) 40%);
    padding: 0 0.5rem;
}
.input-group-modern input:focus ~ .input-icon {
    color: var(--xn-accent);
    transform: translateY(-50%) scale(1.15);
}
.input-group-modern.has-error input {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.05);
    animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.input-group-modern.has-error .input-icon {
    color: #ef4444;
    animation: iconShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.input-group-modern.has-error .floating-label {
    color: #ef4444;
}
@keyframes iconShake {
    0%,
    100% {
        transform: translateY(-50%) rotate(0);
    }
    25% {
        transform: translateY(-50%) rotate(-5deg);
    }
    75% {
        transform: translateY(-50%) rotate(5deg);
    }
}
@keyframes shake {
    0%,
    100% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-8px);
    }
    40% {
        transform: translateX(8px);
    }
    60% {
        transform: translateX(-6px);
    }
    80% {
        transform: translateX(6px);
    }
}
.password-toggle {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    background: 0 0;
    border: none;
    color: var(--xn-text-muted);
    cursor: pointer;
    padding: 0.625rem;
    border-radius: var(--xn-radius-base);
    transition: all 0.3s ease;
    z-index: 2;
}
.password-toggle:hover {
    color: var(--xn-accent);
    background: var(--xn-element-bg);
    transform: translateY(-50%) scale(1.1);
}
.password-toggle:active {
    transform: translateY(-50%) scale(0.95);
}
.password-toggle i {
    font-size: 1.25rem;
    line-height: 1;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.password-toggle:hover i {
    transform: rotate(5deg);
}
.gender-selection {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.gender-option {
    flex: 1;
    position: relative;
}
.gender-option input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
}
.gender-option label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    background: var(--xn-element-bg);
    border: 2px solid var(--xn-glass-border);
    border-radius: var(--xn-radius-xl);
    color: var(--xn-text-muted);
    font-size: 0.975rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.gender-option label:hover {
    border-color: var(--xn-border-color);
    background: var(--xn-element-hover-bg);
    color: var(--xn-color);
    transform: translateY(-2px);
}
.gender-option input:checked + label {
    background: var(--xn-accent-glow);
    border-color: var(--xn-accent);
    color: var(--xn-color);
    box-shadow: 0 8px 20px var(--xn-accent-glow);
    transform: translateY(-2px);
}
.gender-option input:focus-visible + label {
    outline: 2px solid var(--xn-accent);
    outline-offset: 2px;
}
.gender-option label i {
    font-size: 1.125rem;
    line-height: 1;
}
.btn-signup-main {
    position: relative;
    width: 100%;
    padding: 1.25rem 1.75rem;
    background: linear-gradient(145deg, var(--xn-accent) 0, rgba(var(--xn-primary-rgb), 0.85) 100%);
    border: none;
    border-radius: var(--xn-radius-xl);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    overflow: hidden;
    box-shadow:
        0 10px 30px var(--xn-accent-glow),
        0 0 0 1px var(--xn-glass-border) inset,
        var(--xn-shadow-sm);
}
.btn-signup-main::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.btn-signup-main::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition:
        width 0.6s ease,
        height 0.6s ease;
}
.btn-signup-main:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow:
        0 20px 50px var(--xn-accent-glow),
        0 0 0 1px var(--xn-border-color) inset,
        var(--xn-shadow-lg),
        0 0 80px rgba(var(--xn-primary-rgb), 0.4);
    filter: brightness(1.2) saturate(1.1);
}
.btn-signup-main:hover::before {
    opacity: 1;
}
.btn-signup-main:active {
    transform: translateY(-2px) scale(0.99);
    box-shadow:
        0 8px 20px var(--xn-accent-glow),
        0 0 0 1px var(--xn-glass-border) inset;
}
.btn-signup-main:active::after {
    width: 300px;
    height: 300px;
    opacity: 0;
    transition: 0s;
}
.btn-signup-main:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    filter: none;
}
.btn-signup-main .btn-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}
.btn-signup-main.loading .btn-text {
    display: none;
}
.btn-signup-main .spinner {
    display: none;
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    position: relative;
    z-index: 1;
}
.btn-signup-main.loading .spinner {
    display: block;
    margin: 0 auto;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.divider {
    display: flex;
    align-items: center;
    margin: 2.5rem 0;
    gap: 1.25rem;
    position: relative;
}
.divider::after,
.divider::before {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--xn-glass-border), transparent);
    position: relative;
}
.divider::before {
    background: linear-gradient(90deg, transparent, var(--xn-glass-border));
}
.divider::after {
    background: linear-gradient(90deg, var(--xn-glass-border), transparent);
}
.divider span {
    color: var(--xn-text-muted);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    padding: 0 0.5rem;
    background: var(--xn-element-bg);
    border-radius: var(--xn-radius-base);
}
.google-btn-wrapper {
    background: var(--xn-element-bg);
    border: 2px solid var(--xn-glass-border);
    border-radius: var(--xn-radius-xl);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.35rem;
    position: relative;
}
.google-btn-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(66, 133, 244, 0.12), rgba(219, 68, 55, 0.08), rgba(244, 180, 0, 0.08));
    opacity: 0;
    transition: opacity 0.4s ease;
}
.google-btn-wrapper:hover {
    background: var(--xn-element-hover-bg);
    border-color: var(--xn-border-color);
    transform: translateY(-4px) scale(1.01);
    box-shadow:
        var(--xn-shadow-base),
        0 0 0 1px var(--xn-glass-border) inset,
        0 0 30px rgba(66, 133, 244, 0.15);
}
.google-btn-wrapper:hover::before {
    opacity: 1;
}
.google-btn-wrapper > div {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.login-section {
    text-align: center;
    margin-top: 2.75rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--xn-glass-border);
    position: relative;
}
.login-section::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--xn-accent), transparent);
    filter: blur(2px);
}
.login-section::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: var(--xn-accent);
}
.login-section p {
    color: var(--xn-text-muted);
    margin: 0 0 1.5rem;
    font-size: 0.975rem;
    font-weight: 500;
}
.btn-login {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    padding: 1.25rem 1.75rem;
    background: var(--xn-element-bg);
    border: 2px solid var(--xn-glass-border);
    border-radius: var(--xn-radius-xl);
    color: var(--xn-color);
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.btn-login:hover {
    border-color: var(--xn-accent);
    color: var(--xn-color);
    text-decoration: none;
    transform: translateY(-4px) scale(1.01);
    box-shadow:
        0 15px 40px var(--xn-accent-glow),
        0 0 0 1px var(--xn-glass-border) inset,
        var(--xn-shadow-base),
        0 0 60px rgba(var(--xn-primary-rgb), 0.3);
}
.btn-login::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--xn-accent-glow) 0, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: var(--xn-radius-xl);
}
.btn-login:hover::before {
    opacity: 1;
}
.btn-login::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--xn-radius-xl);
    padding: 2px;
    background: linear-gradient(135deg, var(--xn-accent), transparent);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.btn-login:hover::after {
    opacity: 1;
}
.btn-login i {
    font-size: 1.125rem;
    line-height: 1;
    position: relative;
    z-index: 1;
}
.btn-login span {
    position: relative;
    z-index: 1;
}
.footer-links {
    text-align: center;
    margin-top: 1.5rem;
}
.footer-links a {
    color: var(--xn-text-muted);
    font-size: 0.8rem;
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-links a:hover {
    color: var(--xn-text-hover);
}
.error-message {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.03));
    border: 2px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--xn-radius-xl);
    padding: 1.125rem 1.5rem;
    margin-bottom: 1.75rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.error-message::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}
.error-message i {
    flex-shrink: 0;
    color: #ef4444;
    filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.4));
    font-size: 1.25rem;
    margin-top: 1px;
    line-height: 1;
}
.error-message span {
    color: var(--xn-color);
    font-size: 0.9rem;
    line-height: 1.5;
    font-weight: 500;
}
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.btn-login:focus-visible,
.btn-signup-main:focus-visible,
.footer-links a:focus-visible,
.password-toggle:focus-visible {
    outline: 2px solid var(--xn-accent);
    outline-offset: 2px;
}
.input-group-modern input:focus-visible {
    outline: 0;
}
.gender-option input:focus-visible + label {
    outline: 2px solid var(--xn-accent);
    outline-offset: 2px;
}
.password-strength {
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
    display: none;
}
.password-strength.visible {
    display: block;
}
.strength-bar {
    height: 4px;
    background: var(--xn-glass-border);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 0.35rem;
}
.strength-fill {
    height: 100%;
    width: 0%;
    border-radius: 2px;
    transition: all 0.3s ease;
}
.strength-fill.weak {
    width: 33%;
    background: #ef4444;
}
.strength-fill.medium {
    width: 66%;
    background: #f59e0b;
}
.strength-fill.strong {
    width: 100%;
    background: #22c55e;
}
.strength-text {
    font-size: 0.75rem;
    color: var(--xn-text-muted);
    transition: color 0.3s ease;
}
.strength-text.weak {
    color: #ef4444;
}
.strength-text.medium {
    color: #f59e0b;
}
.strength-text.strong {
    color: #22c55e;
}
.input-group-modern.is-valid input {
    border-color: #22c55e;
}
.input-group-modern.is-valid .input-icon {
    color: #22c55e;
}
.input-tooltip {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--xn-text-muted);
    cursor: help;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.input-group-modern:focus-within .input-tooltip,
.input-group-modern:hover .input-tooltip {
    opacity: 1;
}
@media (max-width: 768px) {
    .signup-card {
        padding: 2.75rem 2rem;
    }
    .signup-page::after {
        display: none;
    }
    .signup-logo {
        width: 72px;
        height: 72px;
        margin-bottom: 1.75rem;
    }
    .signup-logo i {
        font-size: 1.75rem;
    }
    .signup-header {
        margin-bottom: 2.5rem;
    }
    .signup-header h1 {
        font-size: 1.75rem;
    }
    .signup-card:hover {
        border-color: var(--xn-glass-border);
        box-shadow:
            0 0 0 1px var(--xn-glass-border) inset,
            var(--xn-shadow-lg),
            0 0 120px rgba(var(--xn-primary-rgb), 0.2),
            0 8px 32px var(--xn-glass-shadow);
    }
    #g-signup-modal .modal-content {
        border-radius: 16px;
    }
}
@media (max-width: 480px) {
    .signup-page {
        padding: 0.75rem;
        padding-top: 2rem;
        padding-bottom: env(safe-area-inset-bottom, 1rem);
        align-items: flex-start;
    }
    .signup-page::before {
        background-size: 30px 30px;
        opacity: 0.2;
    }
    .signup-card {
        padding: 2rem 1.25rem;
        border-radius: 20px;
        max-width: 100%;
        box-shadow:
            0 0 0 1px var(--xn-glass-border) inset,
            var(--xn-shadow-base),
            0 4px 16px var(--xn-glass-shadow);
        backdrop-filter: blur(40px) saturate(150%);
        -webkit-backdrop-filter: blur(40px) saturate(150%);
    }
    .signup-card::before {
        height: 2px;
    }
    .signup-header {
        margin-bottom: 1.75rem;
    }
    .signup-logo {
        width: 60px;
        height: 60px;
        border-radius: 16px;
        margin-bottom: 1.25rem;
        box-shadow:
            0 12px 24px var(--xn-accent-glow),
            0 0 0 1px var(--xn-glass-border) inset;
        animation: none;
    }
    .signup-logo i {
        font-size: 1.5rem;
        animation: none;
    }
    .signup-logo:hover {
        transform: none;
    }
    .signup-header h1 {
        font-size: 1.5rem;
        letter-spacing: -0.03em;
    }
    .signup-header p {
        font-size: 0.85rem;
    }
    .input-group-modern {
        margin-bottom: 1.125rem;
    }
    .input-group-modern .input-icon {
        left: 1rem;
    }
    .input-group-modern .floating-label {
        left: 3rem;
        font-size: 0.925rem;
    }
    .input-group-modern input {
        padding: 1rem 2.75rem 1rem 3rem;
        font-size: 16px;
        border-width: 1.5px;
        border-radius: 14px;
    }
    .input-group-modern input:focus,
    .input-group-modern input:not(:placeholder-shown) {
        transform: none;
        box-shadow: 0 0 0 3px var(--xn-accent-glow);
    }
    .input-group-modern input:focus ~ .floating-label,
    .input-group-modern input:not(:placeholder-shown) ~ .floating-label {
        left: 1rem;
        font-size: 0.7rem;
    }
    .input-group-modern input:focus ~ .input-icon {
        transform: translateY(-50%);
    }
    .password-toggle {
        padding: 0.75rem;
        right: 0.75rem;
    }
    .gender-selection {
        flex-direction: column;
        gap: 0.75rem;
    }
    .gender-option label {
        border-radius: 14px;
        border-width: 1.5px;
    }
    .btn-signup-main {
        padding: 1rem 1.25rem;
        font-size: 0.925rem;
        letter-spacing: 0.08em;
        border-radius: 14px;
    }
    .btn-signup-main:hover {
        transform: none;
        filter: brightness(1.1);
        box-shadow:
            0 10px 30px var(--xn-accent-glow),
            0 0 0 1px var(--xn-glass-border) inset;
    }
    .btn-signup-main:active {
        transform: scale(0.98);
    }
    .btn-login {
        padding: 1rem 1.25rem;
        font-size: 0.925rem;
        border-radius: 14px;
        border-width: 1.5px;
    }
    .btn-login:hover {
        transform: none;
        box-shadow: var(--xn-shadow-base);
    }
    .btn-login:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
    .divider {
        margin: 1.5rem 0;
        gap: 0.875rem;
    }
    .divider span {
        font-size: 0.75rem;
        letter-spacing: 0.12em;
    }
    .google-btn-wrapper {
        border-radius: 14px;
        border-width: 1.5px;
    }
    .google-btn-wrapper:hover {
        transform: none;
        box-shadow: var(--xn-shadow-sm);
    }
    .login-section {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
    }
    .login-section p {
        font-size: 0.875rem;
        margin-bottom: 1rem;
    }
    .footer-links a {
        font-size: 0.75rem;
    }
    .error-message {
        padding: 0.875rem 1rem 0.875rem 1.25rem;
        margin-bottom: 1.25rem;
        border-radius: 14px;
        gap: 0.75rem;
    }
    .error-message span {
        font-size: 0.825rem;
    }
    .password-strength {
        margin-top: 0.25rem;
        margin-bottom: 0.5rem;
    }
    #g-signup-modal .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    #g-signup-modal .modal-content {
        border-radius: 16px;
    }
    #g-signup-modal .modal-header {
        padding: 1rem 1.25rem;
    }
    #g-signup-modal .modal-title {
        font-size: 1.1rem;
    }
    #g-signup-modal .modal-body {
        padding: 1rem 1.25rem;
    }
    #g-signup-modal .modal-footer {
        padding: 0.875rem 1.25rem;
        flex-direction: column;
    }
    #g-signup-modal .form-control {
        font-size: 16px;
        padding: 0.7rem 0.875rem;
    }
    #g-signup-picture-img {
        width: 64px;
        height: 64px;
        border-width: 2px;
    }
    .btn-g-signup {
        width: 100%;
        padding: 0.875rem 1.25rem;
        font-size: 0.925rem;
    }
    .g-signup-agreement {
        font-size: 0.775rem;
    }
}
@media (max-width: 360px) {
    .signup-page {
        padding: 0.5rem;
        padding-top: 1.25rem;
    }
    .signup-card {
        padding: 1.75rem 1rem;
        border-radius: 16px;
    }
    .signup-header {
        margin-bottom: 1.5rem;
    }
    .signup-logo {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        margin-bottom: 1rem;
    }
    .signup-logo i {
        font-size: 1.25rem;
    }
    .signup-header h1 {
        font-size: 1.35rem;
    }
    .signup-header p {
        font-size: 0.8rem;
    }
    .input-group-modern input {
        padding: 0.875rem 2.5rem 0.875rem 2.75rem;
    }
    .input-group-modern .input-icon {
        left: 0.75rem;
    }
    .input-group-modern .floating-label {
        left: 2.75rem;
        font-size: 0.85rem;
    }
    .input-group-modern input:focus ~ .floating-label,
    .input-group-modern input:not(:placeholder-shown) ~ .floating-label {
        left: 0.75rem;
    }
    .password-toggle {
        right: 0.5rem;
    }
    .btn-login,
    .btn-signup-main {
        padding: 0.875rem 1rem;
        font-size: 0.85rem;
        letter-spacing: 0.06em;
    }
    .divider {
        margin: 1.25rem 0;
    }
    .login-section {
        margin-top: 1.25rem;
        padding-top: 1.25rem;
    }
    .login-section p {
        font-size: 0.8rem;
    }
    .gender-option label {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    #g-signup-modal .modal-dialog {
        margin: 0.25rem;
    }
}
@media (max-height: 600px) and (orientation: landscape) {
    .signup-page {
        align-items: flex-start;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        overflow-y: auto;
    }
    .signup-card {
        padding: 1.5rem 1.75rem;
    }
    .signup-header {
        margin-bottom: 1rem;
    }
    .signup-logo {
        width: 48px;
        height: 48px;
        margin-bottom: 0.75rem;
        animation: none;
    }
    .signup-logo i {
        font-size: 1.25rem;
        animation: none;
    }
    .signup-header h1 {
        font-size: 1.35rem;
        margin-bottom: 0.25rem;
    }
    .signup-header p {
        font-size: 0.8rem;
    }
    .input-group-modern {
        margin-bottom: 0.75rem;
    }
    .input-group-modern input {
        padding: 0.75rem 2.5rem 0.75rem 2.75rem;
    }
    .gender-selection {
        margin-bottom: 0.75rem;
    }
    .btn-login,
    .btn-signup-main {
        padding: 0.75rem 1rem;
    }
    .divider {
        margin: 1rem 0;
    }
    .login-section {
        margin-top: 1rem;
        padding-top: 1rem;
    }
    .login-section p {
        margin-bottom: 0.75rem;
    }
    .footer-links {
        margin-top: 1rem;
    }
}
@media (hover: none) and (pointer: coarse) {
    .signup-card:hover {
        border-color: var(--xn-glass-border);
    }
    .signup-logo:hover {
        transform: none;
    }
    .signup-logo:hover::after,
    .signup-logo:hover::before {
        opacity: 0;
    }
    .btn-signup-main:hover {
        transform: none;
        filter: none;
    }
    .btn-login:hover {
        transform: none;
    }
    .google-btn-wrapper:hover {
        transform: none;
    }
    .gender-option label:hover {
        transform: none;
    }
    .footer-links a:hover {
        transform: none;
    }
    .btn-signup-main:active {
        transform: scale(0.97);
        filter: brightness(0.95);
    }
    .btn-login:active {
        transform: scale(0.97);
        opacity: 0.85;
    }
    .google-btn-wrapper:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
    .password-toggle:active {
        transform: translateY(-50%) scale(0.9);
        background: var(--xn-element-bg);
    }
    .gender-option label:active {
        transform: scale(0.97);
        opacity: 0.9;
    }
}
@media (prefers-reduced-motion: reduce) {
    .signup-logo,
    .signup-logo i {
        animation: none !important;
    }
    .signup-card,
    .signup-card::before {
        animation: none !important;
    }
    .signup-page::after,
    .signup-page::before {
        animation: none !important;
    }
    *,
    ::after,
    ::before {
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0s !important;
    }
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
#g-signup-modal .modal-content {
    background: var(--xn-bg-color);
    border: 1px solid var(--xn-glass-border);
    border-radius: 20px;
}
#g-signup-modal .modal-header {
    border-bottom: 1px solid var(--xn-glass-border);
}
#g-signup-modal .modal-title {
    color: var(--xn-color);
}
#g-signup-modal .modal-footer {
    border-top: 1px solid var(--xn-glass-border);
    gap: 0.5rem;
}
#g-signup-picture-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 3px solid var(--xn-accent);
}
#g-signup-picture-block label {
    color: var(--xn-text-muted);
    cursor: pointer;
}
#g-signup-picture-block .form-check-input {
    margin: 0;
}
#g-signup-modal .nav-pills {
    background: var(--xn-element-bg);
    border-radius: 10px;
    padding: 4px;
}
#g-signup-modal .nav-link {
    border-radius: 8px;
    color: var(--xn-text-muted);
    transition: all 0.3s ease;
    font-weight: 500;
}
#g-signup-modal .nav-link:hover {
    color: var(--xn-color);
}
#g-signup-modal .nav-link.active {
    background: var(--xn-accent);
    color: #fff;
}
#g-signup-modal .modal-body p {
    color: var(--xn-text-muted);
}
#g-signup-modal .form-label {
    color: var(--xn-text-muted);
}
#g-signup-modal .form-control {
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 10px;
    color: var(--xn-color);
    padding: 0.75rem 1rem;
}
#g-signup-modal .form-control:focus {
    border-color: var(--xn-accent);
    box-shadow: 0 0 0 3px var(--xn-accent-glow);
    outline: 0;
}
#g-signup-modal .form-control[readonly] {
    background: var(--xn-bg);
    border-color: var(--xn-border-color);
    color: var(--xn-text-muted);
}
#g-signup-email-label {
    color: var(--xn-accent);
}
.g-signup-agreement {
    background: var(--xn-element-bg);
    color: var(--xn-text-muted);
    font-size: 0.85rem;
}
.g-signup-agreement b {
    color: var(--xn-text-muted);
}
#g-signup-modal .modal-body a {
    color: var(--xn-accent);
}
.btn-g-signup {
    background: var(--xn-accent);
    border: none;
    border-radius: 10px;
    color: #fff;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-g-signup:hover {
    filter: brightness(1.15);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--xn-accent-glow);
    color: #fff;
}
.btn-g-signup:active {
    transform: translateY(0) scale(0.98);
}
.btn-g-signup:focus-visible {
    outline: 2px solid var(--xn-accent);
    outline-offset: 2px;
}
.nf-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 3rem 1rem;
    position: relative;
    overflow: hidden;
}
.nf-wrap::after,
.nf-wrap::before {
    content: '';
    position: absolute;
    border-radius: var(--xn-radius-full);
    pointer-events: none;
}
.nf-wrap::before {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(var(--xn-primary-rgb), 0.18) 0, transparent 70%);
    top: -120px;
    left: -100px;
    animation: nf-drift 12s ease-in-out infinite alternate;
}
.nf-wrap::after {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(var(--xn-primary-rgb), 0.1) 0, transparent 70%);
    bottom: -100px;
    right: -80px;
    animation: nf-drift 12s ease-in-out 4s infinite alternate-reverse;
}
@keyframes nf-drift {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
    }
    100% {
        transform: translate(40px, 25px) scale(1.15);
        opacity: 1;
    }
}
.nf-card {
    position: relative;
    z-index: 1;
    max-width: 480px;
    width: 100%;
    text-align: center;
    padding: 3.5rem 2.5rem 2.5rem;
    border-radius: var(--xn-radius-2xl);
    background: var(--xn-card-bg);
    border: 1px solid var(--xn-glass-border);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: var(--xn-shadow-lg);
    animation: nf-card-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes nf-card-in {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.nf-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--xn-radius-xl);
    background: rgba(var(--xn-primary-rgb), 0.12);
    color: var(--xn-primary);
    font-size: 1.5rem;
    animation: nf-card-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.nf-code {
    font-size: clamp(5rem, 16vw, 8rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -3px;
    color: var(--xn-primary);
    margin-bottom: 0.5rem;
    user-select: none;
    animation: nf-pulse 5s ease-in-out infinite alternate;
}
@keyframes nf-pulse {
    0% {
        text-shadow: 0 0 20px rgba(var(--xn-primary-rgb), 0.2);
    }
    100% {
        text-shadow:
            0 0 40px rgba(var(--xn-primary-rgb), 0.4),
            0 0 80px rgba(var(--xn-primary-rgb), 0.12);
    }
}
.nf-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--xn-color);
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-bottom: 1rem;
}
.nf-divider {
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: var(--xn-primary);
    margin: 0 auto 1.25rem;
    opacity: 0.6;
}
.nf-msg {
    color: var(--xn-color-secondary);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
}
.nf-actions {
    display: flex;
    gap: 0.625rem;
    justify-content: center;
    flex-wrap: wrap;
}
.nf-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.4rem;
    border-radius: var(--xn-radius-base);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--xn-transition-smooth);
    cursor: pointer;
}
.nf-btn-primary {
    background: var(--xn-primary);
    color: var(--xn-color-light);
    border: none;
}
.nf-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--xn-primary-rgb), 0.35);
    color: var(--xn-color-light);
    filter: brightness(1.1);
}
.nf-btn-primary:active {
    transform: translateY(0);
}
.nf-btn-outline {
    background: var(--xn-element-bg);
    color: var(--xn-color-secondary);
    border: 1px solid var(--xn-border-color);
}
.nf-btn-outline:hover {
    border-color: rgba(var(--xn-primary-rgb), 0.4);
    color: var(--xn-text-hover);
    background: var(--xn-element-hover-bg);
    transform: translateY(-2px);
}
.nf-btn-outline:active {
    transform: translateY(0);
}
@media (max-width: 480px) {
    .nf-card {
        padding: 2.5rem 1.25rem 2rem;
    }
    .nf-title {
        font-size: 0.95rem;
        letter-spacing: 3px;
    }
    .nf-actions {
        flex-direction: column;
    }
    .nf-btn {
        justify-content: center;
    }
}
#short-stage {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--xn-bg);
    overscroll-behavior: none;
    touch-action: none;
}
.short-view-page {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.short-player-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
.short-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    animation: shortFadeIn 0.3s ease-out;
}
.short-nav {
    display: none;
    justify-content: center;
    padding: 10px 0;
    min-height: 48px;
}
.short-nav-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--xn-bg-color);
    border: 1px solid var(--xn-glass-border);
    border-radius: var(--xn-radius-full);
    color: var(--xn-color);
    font-size: 1.2rem;
    text-decoration: none;
    transition: all var(--xn-transition-base);
}
.short-nav-btn:hover {
    background: var(--xn-accent);
    color: var(--xn-color-light);
    transform: scale(1.1);
    border-color: var(--xn-handle-bg);
}
.short-video-container {
    position: relative;
    width: 100%;
    height: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #000;
}
.short-video-container .video-js,
.short-video-container .vjs-tech {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
#swipe .video-js .vjs-iframe-holder {
    top: 10px !important;
}
.short-video-container .vjs-control-bar {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.short-gradient-bottom,
.short-gradient-top {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 2;
}
.short-gradient-top {
    top: 0;
    height: 72px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent);
}
.short-gradient-bottom {
    bottom: 0;
    height: 200px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0, rgba(0, 0, 0, 0.45) 35%, rgba(0, 0, 0, 0.1) 65%, transparent 100%);
}
.short-top-controls {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 10;
    display: flex;
    gap: 8px;
    align-items: center;
}
.short-back-btn {
    margin-right: auto;
    text-decoration: none;
    color: var(--xn-color);
}
.short-top-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--xn-bg-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    border-radius: var(--xn-radius-full);
    color: var(--xn-color);
    font-size: 1rem;
    cursor: pointer;
    transition:
        transform 0.15s ease,
        background 0.15s ease;
}
.short-top-btn:active {
    transform: scale(0.9);
    background: rgba(0, 0, 0, 0.65);
}
.short-info {
    position: absolute;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 64px;
    display: flex;
    flex-direction: column;
    padding: 12px;
    z-index: 5;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.short-info-user {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}
.short-avatar img {
    width: 50px;
    height: 50px;
    border-radius: var(--xn-radius-full);
    border: 2px solid rgba(255, 255, 255, 0.3);
    object-fit: cover;
    flex-shrink: 0;
}
.short-avatar:active img {
    border-color: var(--xn-accent);
}
.short-user-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}
.short-username {
    color: #fff;
    font-weight: 600;
    font-size: 0.82rem;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.short-username:active {
    color: var(--xn-accent);
}
.short-sub-btn .btn {
    min-height: 28px;
    padding: 3px 10px;
    font-size: 0.68rem;
    font-weight: 600;
    border-radius: var(--xn-radius-2xl);
}
.short-info-title {
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.short-actions {
    position: absolute;
    right: 6px;
    bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    z-index: 6;
}
.short-action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    animation: shortFadeIn 0.3s ease-out backwards;
}
.short-action-item:first-child {
    animation-delay: 50ms;
}
.short-action-item:nth-child(2) {
    animation-delay: 80ms;
}
.short-action-item:nth-child(3) {
    animation-delay: 0.11s;
}
.short-action-item:nth-child(4) {
    animation-delay: 0.14s;
}
.short-action-item:nth-child(5) {
    animation-delay: 0.17s;
}
.short-action-item:nth-child(6) {
    animation-delay: 0.2s;
}
.short-action-btn {
    width: 42px;
    height: 42px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--xn-bg-color);
    border: none;
    border-radius: var(--xn-radius-full);
    color: var(--xn-color);
    font-size: 1.25rem;
    cursor: pointer;
    transition: transform 0.15s ease;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.short-action-btn:active {
    transform: scale(0.85);
}
.short-action-btn .bi-heart-fill {
    color: var(--xn-accent);
}
.short-action-btn .bi-bookmark-fill {
    color: var(--xn-warning);
}
.short-action-count {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.short-action-btn.liked {
    animation: heartPop 0.4s ease-out;
}
#staticBackdrop {
    align-items: flex-end;
}
.short-comments-dialog {
    max-width: 100%;
    margin: 0;
    max-height: 100%;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
#staticBackdrop.show .short-comments-dialog {
    transform: translateY(0);
}
.short-comments-content {
    border-radius: 16px 16px 0 0;
    border: none;
    border-top: 1px solid var(--xn-glass-border);
    background: var(--xn-panel-bg-solid);
    max-height: 70vh;
    max-height: 70dvh;
}
.short-comments-header {
    border-bottom: 1px solid var(--xn-border-color);
    padding: 8px 16px 12px;
}
.short-comments-header::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--xn-handle-bg);
    border-radius: 2px;
    margin: 0 auto 8px;
}
.short-comments-body {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.short-flag-content {
    border-radius: var(--xn-radius-2xl);
    border: 1px solid var(--xn-glass-border);
    background: var(--xn-panel-bg-solid);
}
.short-flag-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: var(--xn-radius-lg);
    cursor: pointer;
    transition: background 0.15s ease;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
}
.short-flag-option:active {
    background: var(--xn-element-hover-bg);
}
@keyframes shortFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes heartPop {
    0%,
    100% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.35);
    }
    60% {
        transform: scale(0.95);
    }
}
@media (prefers-reduced-motion: reduce) {
    .short-action-item,
    .short-card,
    .short-comments-dialog {
        animation: none !important;
        transition: none !important;
    }
}
@media (min-width: 992px) {
    #short-stage {
        min-height: calc(100vh - 70px);
        touch-action: auto;
    }
    .short-view-page {
        margin: unset;
        padding: unset;
        overflow: visible;
    }
    .short-player-wrap {
        max-width: 420px;
        height: auto;
    }
    .short-card {
        height: calc(100vh - 128px);
        height: calc(100dvh - 128px);
    }
    .short-video-container {
        height: auto;
        border-radius: var(--xn-radius-2xl);
        box-shadow:
            var(--xn-shadow-xl),
            0 0 0 1px var(--xn-glass-border);
        background: var(--xn-bg);
    }
    .short-video-container .vjs-control-bar,
    .short-video-container:hover .vjs-control-bar {
        opacity: 1;
        pointer-events: auto;
    }
    .short-gradient-top {
        border-radius: var(--xn-radius-2xl) var(--xn-radius-2xl) 0 0;
        height: 80px;
    }
    .short-gradient-bottom {
        border-radius: 0 0 var(--xn-radius-2xl) var(--xn-radius-2xl);
        height: 220px;
    }
    .short-nav {
        display: flex;
    }
    .short-top-controls {
        top: 14px;
        right: 14px;
    }
    .short-top-btn {
        background: var(--xn-glass-bg);
        border: 1px solid var(--xn-glass-border);
    }
    .short-top-btn:hover {
        background: var(--xn-accent);
        color: var(--xn-color-light);
        transform: scale(1.1);
    }
    .short-info {
        right: 76px;
        bottom: 18px;
        left: 14px;
        padding: 14px;
        text-shadow: 0 1px 6px var(--xn-glass-shadow);
    }
    .short-info-user {
        gap: 10px;
        margin-bottom: 0;
    }
    .short-avatar:hover img {
        border-color: var(--xn-accent);
    }
    .short-username {
        font-size: 0.9rem;
    }
    .short-username:hover {
        color: var(--xn-accent);
    }
    .short-sub-btn .btn {
        min-height: 28px;
        padding: 3px 10px;
        font-size: 0.68rem;
        font-weight: 600;
    }
    .short-info-title {
        margin-top: 12px;
        margin-bottom: 0;
        font-size: 0.95rem;
        font-weight: 600;
        line-height: 1.4;
    }
    .short-actions {
        right: 10px;
        bottom: 100px;
        gap: 8px;
    }
    .short-card .short-nav-rail {
        position: absolute;
        top: 50%;
        left: calc(100% + 16px);
        z-index: 3;
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-height: 0;
        padding: 0;
        transform: translateY(-50%);
    }
    .short-card .short-nav-rail .short-nav-btn {
        width: 48px;
        height: 48px;
        border: 0;
        background: var(--xn-glass-bg);
        box-shadow: var(--xn-shadow-md);
    }
    .short-action-btn {
        width: 46px;
        height: 46px;
        font-size: 1.3rem;
        background: var(--xn-glass-bg);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    .short-action-btn:hover {
        background: var(--xn-accent);
        color: #fff;
        transform: scale(1.1);
        box-shadow: 0 0 20px var(--xn-accent-glow);
    }
    .short-action-count {
        font-size: 1rem;
    }
    #staticBackdrop {
        align-items: center;
    }
    .short-comments-dialog {
        max-width: 480px;
        margin: auto;
        transform: none;
    }
    .short-comments-content {
        border-radius: var(--xn-radius-2xl);
        border: 1px solid var(--xn-glass-border);
        max-height: 70vh;
    }
    .short-comments-header::before {
        display: none;
    }
    .short-comments-header {
        padding: 14px 20px;
    }
    .short-comments-body {
        padding: 16px 20px 16px;
    }
    .short-flag-option {
        padding: 8px 12px;
    }
}
.online-indicator {
    width: 14px;
    height: 14px;
    background: var(--xn-success);
    border-radius: var(--xn-radius-full);
    box-shadow: 0 0 0 3px rgba(var(--xn-success-rgb), 0.3);
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%,
    100% {
        box-shadow: 0 0 0 3px rgba(var(--xn-success-rgb), 0.3);
    }
    50% {
        box-shadow: 0 0 0 8px transparent;
    }
}
.user-card {
    background: var(--xn-secondary);
    border-radius: var(--xn-radius-xl);
    padding: 1.25rem 1rem;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition:
        transform var(--xn-transition-smooth),
        box-shadow var(--xn-transition-smooth),
        background var(--xn-transition-smooth),
        border-color var(--xn-transition-smooth);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--xn-border-color);
}
.user-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: 0 0;
    transition: background var(--xn-transition-smooth);
}
.user-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow:
        var(--xn-shadow-lg),
        0 0 0 1px var(--xn-glass-border);
    border-color: var(--xn-glass-border);
    background: linear-gradient(145deg, var(--xn-secondary), rgba(var(--xn-element-bg-rgb), 0.5));
}
.user-card:hover::before {
    background: linear-gradient(90deg, var(--xn-primary), transparent);
}
.user-card-online:hover::before {
    background: linear-gradient(90deg, var(--xn-success), transparent);
}
.user-card-female:hover::before {
    background: linear-gradient(90deg, var(--xn-primary), transparent);
}
.user-card-male:hover::before {
    background: linear-gradient(90deg, #3b82f6, transparent);
}
.user-card:active {
    transform: translateY(-3px) scale(1.01);
}
.user-avatar-wrapper {
    position: relative;
    margin-bottom: 0.75rem;
}
.user-avatar {
    width: 80px;
    height: 80px;
    transition: all var(--xn-transition-smooth);
    position: relative;
}
.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--xn-radius-full);
}
.user-avatar::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--xn-radius-full);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity var(--xn-transition-smooth);
    pointer-events: none;
}
.user-avatar-sm {
    width: 72px;
    height: 72px;
}
.user-card:hover .user-avatar {
    border-color: var(--xn-glass-border);
    transform: scale(1.08) rotate(2deg);
}
.user-card:hover .user-avatar::before {
    opacity: 1;
}
.avatar-glow {
    box-shadow: 0 0 20px rgba(255, 170, 0, 0.3);
    animation: glowPulse 2s ease-in-out infinite;
}
@keyframes glowPulse {
    0%,
    100% {
        box-shadow:
            0 0 20px rgba(255, 170, 0, 0.3),
            0 0 40px rgba(255, 170, 0, 0.1);
    }
    50% {
        box-shadow:
            0 0 30px rgba(255, 170, 0, 0.5),
            0 0 60px rgba(255, 170, 0, 0.2);
    }
}
.online-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    background: var(--xn-success);
    border: 3px solid var(--xn-secondary);
    border-radius: var(--xn-radius-full);
}
.user-name {
    font-weight: 600;
    color: var(--xn-color);
    margin-bottom: 0.25rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-status {
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--xn-success);
}
.user-status i {
    font-size: 5px;
    vertical-align: middle;
    margin-right: 4px;
}
.rank-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 20px;
    z-index: 2;
}
.rank-gold .rank-badge {
    background: var(--xn-warning);
    color: #000;
}
.rank-silver .rank-badge {
    background: var(--xn-gray);
    color: #000;
}
.rank-bronze .rank-badge {
    background: #cd7f32;
    color: #fff;
}
.rank-gold .user-avatar {
    border-color: var(--xn-warning);
}
.rank-silver .user-avatar {
    border-color: var(--xn-gray);
}
.rank-bronze .user-avatar {
    border-color: #cd7f32;
}
.rank-gold:hover::before {
    background: linear-gradient(90deg, var(--xn-warning), transparent);
}
.rank-silver:hover::before {
    background: linear-gradient(90deg, var(--xn-gray), transparent);
}
.rank-bronze:hover::before {
    background: linear-gradient(90deg, #cd7f32, transparent);
}
.gender-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--xn-radius-full);
    margin-right: 0.5rem;
}
.gender-icon.female {
    background: rgba(var(--xn-primary-rgb), 0.15);
    color: var(--xn-primary);
}
.gender-icon.male {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}
.user-card-compact {
    padding: 1rem 0.75rem;
}
@media (max-width: 991.98px) {
    .user-card {
        padding: 1rem 0.75rem;
    }
}
@media (max-width: 575.98px) {
    .user-card:hover {
        transform: translateY(-4px) scale(1.01);
    }
}
@media (prefers-reduced-motion: reduce) {
    *,
    ::after,
    ::before {
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0s !important;
    }
}
.user-card.loading {
    background: linear-gradient(90deg, var(--xn-secondary) 25%, var(--xn-element-bg) 50%, var(--xn-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}
a:has(.user-card):focus-visible {
    outline: 2px solid var(--xn-primary);
    outline-offset: 3px;
    border-radius: var(--xn-radius-xl);
}
.btn:focus-visible {
    outline: 2px solid var(--xn-primary);
    outline-offset: 3px;
    border-radius: inherit;
}
@media (forced-colors: active) {
    .user-card {
        border: 2px solid CanvasText;
    }
    .online-badge,
    .online-indicator {
        forced-color-adjust: none;
        background: Highlight;
    }
    .rank-badge {
        forced-color-adjust: none;
    }
}
@media print {
    .user-card {
        break-inside: avoid;
        border: 1px solid #000;
    }
}
.feedback-page ::selection {
    background: var(--xn-accent);
    color: #fff;
}
.feedback-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(circle at 30% 20%, var(--xn-accent-glow) 0, transparent 45%), radial-gradient(circle at 70% 80%, rgba(59, 130, 246, 0.12) 0, transparent 45%), radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.08) 0, transparent 50%),
        linear-gradient(180deg, var(--xn-bg) 0, var(--xn-bg-color) 100%);
    position: relative;
    overflow: hidden;
}
.feedback-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridMove 25s linear infinite;
    opacity: 0.4;
    pointer-events: none;
    will-change: transform;
}
.feedback-page::after {
    content: '';
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--xn-primary-rgb), 0.15), transparent 70%);
    bottom: 5%;
    left: -5%;
    animation: orbFloat 14s ease-in-out infinite alternate;
    pointer-events: none;
    filter: blur(40px);
}
.feedback-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    background: var(--xn-glass-bg);
    backdrop-filter: blur(80px) saturate(200%);
    -webkit-backdrop-filter: blur(80px) saturate(200%);
    border: 1px solid var(--xn-glass-border);
    border-radius: var(--xn-radius-2xl);
    padding: 3rem 2.5rem;
    box-shadow:
        0 0 0 1px var(--xn-glass-border) inset,
        var(--xn-shadow-lg),
        0 0 120px rgba(var(--xn-primary-rgb), 0.2),
        0 8px 32px var(--xn-glass-shadow);
    animation: cardAppear 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.feedback-card:hover {
    border-color: var(--xn-border-color);
    box-shadow:
        0 0 0 1px var(--xn-glass-border) inset,
        var(--xn-shadow-lg),
        0 0 140px rgba(var(--xn-primary-rgb), 0.25),
        0 10px 40px var(--xn-glass-shadow);
}
.feedback-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--xn-accent), rgba(var(--xn-primary-rgb), 0.6), transparent);
    border-radius: var(--xn-radius-2xl) var(--xn-radius-2xl) 0 0;
    opacity: 0.8;
    animation: shimmer 3s ease-in-out infinite;
}
.feedback-header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.feedback-logo {
    width: 80px;
    height: 80px;
    background: linear-gradient(145deg, var(--xn-accent) 0, rgba(var(--xn-primary-rgb), 0.75) 100%);
    border-radius: var(--xn-radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.75rem;
    box-shadow:
        0 24px 48px var(--xn-accent-glow),
        0 0 0 1px var(--xn-glass-border) inset,
        var(--xn-shadow-base),
        0 0 60px rgba(var(--xn-primary-rgb), 0.4);
    animation: logoPulse 5s ease-in-out infinite;
    position: relative;
    transform-style: preserve-3d;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.feedback-logo:hover {
    transform: translateY(-6px) rotateY(8deg) rotateX(5deg) scale(1.05);
    box-shadow:
        0 30px 60px var(--xn-accent-glow),
        0 0 0 1px var(--xn-border-color) inset,
        var(--xn-shadow-lg),
        0 0 80px rgba(var(--xn-primary-rgb), 0.5);
}
.feedback-logo::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 27px;
    background: linear-gradient(145deg, var(--xn-accent), rgba(var(--xn-primary-rgb), 0.3));
    z-index: -1;
    opacity: 0;
    filter: blur(20px);
    transition: opacity 0.5s ease;
}
.feedback-logo:hover::before {
    opacity: 0.8;
}
.feedback-logo::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--xn-radius-2xl);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.feedback-logo:hover::after {
    opacity: 1;
}
.feedback-logo i {
    font-size: 2rem;
    color: #fff;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
    animation: iconFloat 3s ease-in-out infinite;
    line-height: 1;
}
.feedback-header h1 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--xn-color);
    margin-bottom: 0.75rem;
    letter-spacing: -0.04em;
    line-height: 1.2;
}
.feedback-header p {
    color: var(--xn-text-muted);
    font-size: 0.975rem;
    font-weight: 400;
    line-height: 1.5;
}
.input-group-modern select {
    width: 100%;
    padding: 1.25rem 3rem 1.25rem 3.5rem;
    background: var(--xn-element-bg);
    border: 2px solid var(--xn-glass-border);
    border-radius: var(--xn-radius-xl);
    color: var(--xn-color);
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239ca3af' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.25rem center;
    background-size: 14px;
}
.input-group-modern select:hover {
    background-color: var(--xn-element-hover-bg);
    border-color: var(--xn-border-color);
}
.input-group-modern select:focus {
    background-color: var(--xn-element-hover-bg);
    border-color: var(--xn-accent);
    box-shadow:
        0 0 0 5px var(--xn-accent-glow),
        var(--xn-shadow-base),
        0 0 0 1px var(--xn-glass-border) inset;
    transform: translateY(-3px);
}
.input-group-modern select:focus ~ .input-icon {
    color: var(--xn-accent);
    transform: translateY(-50%) scale(1.15);
}
.input-group-modern select:focus ~ .floating-label {
    top: -2px;
    left: 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--xn-accent);
    background: linear-gradient(180deg, transparent 40%, var(--xn-glass-bg) 40%);
    padding: 0 0.5rem;
}
.input-group-modern select ~ .floating-label {
    top: -2px;
    left: 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--xn-text-muted);
    background: linear-gradient(180deg, transparent 40%, var(--xn-glass-bg) 40%);
    padding: 0 0.5rem;
}
.input-group-modern.has-error select {
    border-color: rgba(239, 68, 68, 0.5);
    background-color: rgba(239, 68, 68, 0.05);
    animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.input-group-modern textarea {
    width: 100%;
    padding: 1.25rem 1.5rem 1.25rem 3.5rem;
    background: var(--xn-element-bg);
    border: 2px solid var(--xn-glass-border);
    border-radius: var(--xn-radius-xl);
    color: var(--xn-color);
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    outline: 0;
    resize: vertical;
    min-height: 140px;
    font-family: inherit;
    line-height: 1.6;
}
.input-group-modern textarea::placeholder {
    color: transparent;
}
.input-group-modern .textarea-icon {
    top: 1.35rem;
    transform: none;
}
.input-group-modern textarea:hover {
    background: var(--xn-element-hover-bg);
    border-color: var(--xn-border-color);
}
.input-group-modern textarea:focus,
.input-group-modern textarea:not(:placeholder-shown) {
    background: var(--xn-element-hover-bg);
    border-color: var(--xn-accent);
    box-shadow:
        0 0 0 5px var(--xn-accent-glow),
        var(--xn-shadow-base),
        0 0 0 1px var(--xn-glass-border) inset;
    transform: translateY(-3px);
}
.input-group-modern textarea:focus ~ .floating-label,
.input-group-modern textarea:not(:placeholder-shown) ~ .floating-label {
    top: -2px;
    left: 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--xn-accent);
    background: linear-gradient(180deg, transparent 40%, var(--xn-glass-bg) 40%);
    padding: 0 0.5rem;
}
.input-group-modern textarea:focus ~ .input-icon {
    color: var(--xn-accent);
    transform: scale(1.15);
}
.input-group-modern.has-error textarea {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.05);
    animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.btn-feedback {
    position: relative;
    width: 100%;
    padding: 1.25rem 1.75rem;
    background: linear-gradient(145deg, var(--xn-accent) 0, rgba(var(--xn-primary-rgb), 0.85) 100%);
    border: none;
    border-radius: var(--xn-radius-xl);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    overflow: hidden;
    margin-top: 0.5rem;
    box-shadow:
        0 10px 30px var(--xn-accent-glow),
        0 0 0 1px var(--xn-glass-border) inset,
        var(--xn-shadow-sm);
}
.btn-feedback::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.btn-feedback::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition:
        width 0.6s ease,
        height 0.6s ease;
}
.btn-feedback:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow:
        0 20px 50px var(--xn-accent-glow),
        0 0 0 1px var(--xn-border-color) inset,
        var(--xn-shadow-lg),
        0 0 80px rgba(var(--xn-primary-rgb), 0.4);
    filter: brightness(1.2) saturate(1.1);
}
.btn-feedback:hover::before {
    opacity: 1;
}
.btn-feedback:active {
    transform: translateY(-2px) scale(0.99);
    box-shadow:
        0 8px 20px var(--xn-accent-glow),
        0 0 0 1px var(--xn-glass-border) inset;
}
.btn-feedback:active::after {
    width: 300px;
    height: 300px;
    opacity: 0;
    transition: 0s;
}
.btn-feedback:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    filter: none;
}
.btn-feedback .btn-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}
.btn-feedback .btn-text i {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-feedback:hover .btn-text i {
    transform: translateX(4px) rotate(-15deg);
}
.btn-feedback .btn-loader {
    display: none;
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    position: relative;
    z-index: 1;
}
.btn-feedback.loading .btn-text {
    display: none;
}
.btn-feedback.loading .btn-loader {
    display: block;
    margin: 0 auto;
}
@media (max-width: 576px) {
    .feedback-card {
        padding: 2rem 1.5rem;
        border-radius: var(--xn-radius-xl);
    }
    .feedback-header h1 {
        font-size: 1.5rem;
    }
    .feedback-logo {
        width: 64px;
        height: 64px;
        margin-bottom: 1.25rem;
    }
    .feedback-logo i {
        font-size: 1.5rem;
    }
    .input-group-modern select,
    .input-group-modern textarea {
        padding-left: 3rem;
        font-size: 0.95rem;
    }
}
.xn-users-hero {
    position: relative;
    border-radius: var(--xn-radius-2xl);
    padding: 3rem 2rem 2.5rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
    background: var(--xn-hero-bg);
    border: 1px solid var(--xn-glass-border);
}
.xn-users-hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.xn-orb-users-1 {
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--xn-primary-rgb), 0.2) 0, transparent 70%);
    top: -120px;
    right: -80px;
    animation: xnOrbDrift 12s ease-in-out infinite;
}
.xn-orb-users-2 {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0, transparent 70%);
    bottom: -80px;
    left: -50px;
    animation: xnOrbDrift 16s ease-in-out infinite reverse;
}
.xn-orb-users-3 {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.1) 0, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: xnOrbDrift 10s ease-in-out infinite 2s;
}
@keyframes xnOrbDrift {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.7;
    }
    33% {
        transform: translate(20px, -10px) scale(1.08);
        opacity: 1;
    }
    66% {
        transform: translate(-10px, 15px) scale(0.95);
        opacity: 0.8;
    }
}
.xn-users-grid-pattern {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 32px 32px;
}
.xn-users-noise {
    position: absolute;
    inset: 0;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.xn-users-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
}
.xn-users-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.875rem;
    border-radius: 20px;
    background: rgba(var(--xn-primary-rgb), 0.08);
    border: 1px solid rgba(var(--xn-primary-rgb), 0.15);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--xn-primary);
    margin-bottom: 0.75rem;
}
.xn-users-hero-content h1 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 800;
    margin: 0 0 0.5rem;
    line-height: 1.2;
}
.xn-users-desc {
    font-size: 0.85rem;
    color: var(--xn-text-muted);
    margin: 0;
    max-width: 400px;
    margin-inline: auto;
}
.xn-users-filter-bar {
    background: var(--xn-secondary);
    border: 1px solid var(--xn-border-color);
    border-radius: var(--xn-radius-xl);
    padding: 0.625rem 0.875rem;
    margin-bottom: 1.25rem;
}
.xn-users-filter-inner {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.xn-users-sort-pills {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    min-width: 0;
}
.xn-users-sort-pills::-webkit-scrollbar {
    display: none;
}
.xn-filter-divider {
    width: 1px;
    height: 20px;
    background: var(--xn-border-color);
    flex-shrink: 0;
}
.xn-users-adv-filters {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: auto;
    flex-shrink: 0;
}
.xn-filter-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 34px;
    padding: 0 0.75rem;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 100px;
    color: var(--xn-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--xn-transition-fast);
}
.xn-filter-dropdown-btn:hover {
    background: var(--xn-element-hover-bg);
    color: var(--xn-color);
    border-color: rgba(255, 255, 255, 0.12);
}
.xn-filter-dropdown-btn.has-selection {
    background: rgba(var(--xn-primary-rgb), 0.12);
    border-color: rgba(var(--xn-primary-rgb), 0.25);
    color: var(--xn-primary);
    font-weight: 600;
}
.xn-filter-dropdown-btn .xn-chevron {
    font-size: 0.55rem;
    opacity: 0.4;
    transition: transform 0.2s ease;
}
.xn-filter-dropdown-btn[aria-expanded='true'] .xn-chevron {
    transform: rotate(180deg);
}
.xn-filter-dropdown-menu {
    background: var(--xn-dropdown-bg) !important;
    backdrop-filter: blur(24px);
    border: 1px solid var(--xn-glass-border) !important;
    border-radius: var(--xn-radius-lg) !important;
    padding: 0.375rem !important;
    min-width: 180px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
}
.xn-filter-menu-label {
    padding: 0.375rem 0.625rem 0.25rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--xn-text-muted);
}
.xn-filter-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.625rem;
    border-radius: var(--xn-radius-sm);
    font-size: 0.8rem;
    color: var(--xn-color-secondary);
    transition: all var(--xn-transition-fast);
}
.xn-filter-dropdown-menu .dropdown-item:hover {
    background: var(--xn-element-hover-bg);
    color: var(--xn-color);
}
.xn-filter-dropdown-menu .dropdown-item.active {
    background: rgba(var(--xn-primary-rgb), 0.12);
    color: var(--xn-primary);
    font-weight: 600;
}
.xn-filter-dropdown-menu .dropdown-item i {
    font-size: 0.85rem;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
.xn-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--xn-glass-border);
}
.xn-active-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    background: rgba(var(--xn-primary-rgb), 0.1);
    border: 1px solid rgba(var(--xn-primary-rgb), 0.2);
    border-radius: 12px;
    color: var(--xn-primary);
    font-size: 0.68rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--xn-transition-fast);
}
.xn-active-filter-tag:hover {
    background: rgba(var(--xn-primary-rgb), 0.2);
    border-color: rgba(var(--xn-primary-rgb), 0.4);
    color: var(--xn-color-light);
}
.xn-active-filter-tag .bi-x-lg {
    font-size: 0.5rem;
    opacity: 0.5;
    transition: opacity var(--xn-transition-fast);
}
.xn-active-filter-tag:hover .bi-x-lg {
    opacity: 1;
}
.xn-users-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
.xn-user-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}
.xn-user-card-link:hover {
    color: inherit;
}
.xn-uc {
    position: relative;
    border-radius: var(--xn-radius-lg);
    overflow: hidden;
    background: var(--xn-secondary);
    border: 1px solid rgba(255, 255, 255, 0.06);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition:
        transform var(--xn-transition-smooth),
        box-shadow var(--xn-transition-smooth),
        border-color var(--xn-transition-smooth);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.xn-uc::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--xn-radius-lg);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transition: opacity var(--xn-transition-smooth);
    background: linear-gradient(180deg, transparent 0, rgba(var(--xn-primary-rgb), 0.03) 100%);
}
.xn-uc:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(var(--xn-primary-rgb), 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}
.xn-uc:hover::before {
    opacity: 1;
}
.xn-uc:active {
    transform: translateY(-2px);
}
.xn-uc.xn-uc-male:hover {
    border-color: rgba(59, 130, 246, 0.15);
}
.xn-uc.xn-uc-female:hover {
    border-color: rgba(var(--xn-primary-rgb), 0.2);
}
.xn-uc-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 16/6;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--xn-bg-color);
}
.xn-uc-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.xn-uc:hover .xn-uc-cover-img {
    transform: scale(1.04);
    filter: brightness(1.08);
}
.xn-uc-body {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.625rem 0.625rem;
    position: relative;
    z-index: 2;
    margin-top: 10px;
}
.xn-uc-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.xn-uc-avatar-img {
    width: 40px;
    height: 40px;
    border-radius: var(--xn-radius-full);
    border: 2.5px solid var(--xn-secondary);
    object-fit: cover;
    transition: border-color var(--xn-transition-smooth);
    background: var(--xn-bg-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.xn-uc:hover .xn-uc-avatar-img {
    border-color: rgba(255, 255, 255, 0.15);
}
.xn-uc-noavatar {
    width: 40px;
    height: 40px;
    border-radius: var(--xn-radius-full);
    border: 2.5px solid var(--xn-secondary);
    background: var(--xn-bg-color);
    color: var(--xn-color);
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
    transition: all var(--xn-transition-smooth);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.xn-uc-gender {
    position: absolute;
    bottom: 0;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: var(--xn-radius-full);
    border: 2px solid var(--xn-secondary);
    z-index: 3;
}
.xn-uc-gender-male {
    background: #3b82f6;
}
.xn-uc-gender-female {
    background: var(--xn-primary);
}
.xn-uc-info {
    min-width: 0;
    flex: 1;
}
.xn-uc-name {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--xn-color-secondary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.xn-uc:hover .xn-uc-name {
    color: var(--xn-color);
}
.xn-uc-premium {
    color: var(--xn-warning);
    font-size: 0.7rem;
    flex-shrink: 0;
    line-height: 1;
}
.xn-users-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    background: var(--xn-secondary);
    border: 1px dashed var(--xn-border-color);
    border-radius: var(--xn-radius-2xl);
}
.xn-empty-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--xn-element-bg);
    border-radius: var(--xn-radius-full);
    margin-bottom: 1rem;
}
.xn-empty-icon i {
    font-size: 1.75rem;
    color: var(--xn-text-muted);
}
.xn-empty-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--xn-color);
    margin-bottom: 0.375rem;
}
.xn-empty-desc {
    font-size: 0.8rem;
    color: var(--xn-text-muted);
    margin-bottom: 1.25rem;
    max-width: 280px;
}
.text-white {
    color: var(--xn-color) !important;
}
@media (max-width: 1399.98px) {
    .xn-users-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 1199.98px) {
    .xn-users-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
}
@media (max-width: 991.98px) {
    .xn-users-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.625rem;
    }
    .xn-users-sort-pills .xn-pill span {
        display: none;
    }
    .xn-users-sort-pills .xn-pill {
        padding: 0 0.625rem;
    }
}
@media (max-width: 767.98px) {
    .xn-users-hero {
        padding: 2rem 1.25rem 1.75rem;
        border-radius: var(--xn-radius-xl);
    }
    .xn-users-hero-content h1 {
        font-size: 1.35rem;
    }
    .xn-users-desc {
        font-size: 0.78rem;
    }
    .xn-users-filter-bar {
        padding: 0.5rem 0.625rem;
        border-radius: var(--xn-radius-lg);
    }
    .xn-users-adv-filters {
        margin-left: 0;
    }
    .xn-users-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }
    .xn-uc-body {
        padding: 0.375rem 0.5rem 0.5rem;
    }
    .xn-uc-avatar-img,
    .xn-uc-noavatar {
        width: 34px;
        height: 34px;
    }
    .xn-uc-name {
        font-size: 0.7rem;
    }
    .xn-uc-gender {
        width: 9px;
        height: 9px;
    }
    .xn-users-empty {
        padding: 3rem 1.5rem;
    }
}
@media (max-width: 575.98px) {
    .xn-users-hero {
        padding: 1.5rem 1rem 1.25rem;
        margin-bottom: 0.75rem;
    }
    .xn-users-filter-bar {
        margin-bottom: 0.75rem;
    }
    .xn-users-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    .xn-uc:hover {
        transform: translateY(-2px);
    }
    .xn-uc-body {
        gap: 0.375rem;
    }
    .xn-filter-divider {
        display: none;
    }
}
@media (min-width: 1600px) {
    .xn-users-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (prefers-reduced-motion: reduce) {
    .xn-orb-users-1,
    .xn-orb-users-2,
    .xn-orb-users-3 {
        animation: none;
    }
    .xn-uc,
    .xn-uc-avatar-img,
    .xn-uc-cover-img,
    .xn-uc-noavatar {
        transition: none;
    }
}
.xn-user-card-link:focus-visible {
    outline: 2px solid var(--xn-primary);
    outline-offset: 2px;
    border-radius: var(--xn-radius-lg);
}
.xn-user-card-link:focus-visible .xn-uc {
    border-color: var(--xn-primary);
}
@media (forced-colors: active) {
    .xn-uc {
        border: 2px solid CanvasText;
    }
    .xn-uc-gender {
        forced-color-adjust: none;
    }
}
@media print {
    .xn-uc {
        break-inside: avoid;
        border: 1px solid #000;
    }
    .xn-users-filter-bar,
    .xn-users-hero {
        display: none;
    }
}
.gif-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    font-size: 1.25rem;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
    z-index: 10;
    opacity: 0.7;
}
.gif-nav:focus-visible,
.gif-nav:hover {
    background: var(--xn-bg);
    color: var(--xn-color);
    opacity: 1;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
}
.gif-nav:active {
    transform: translateY(-50%) scale(0.92);
}
.gif-nav-prev {
    left: 8px;
}
.gif-nav-prev:hover {
    transform: translateY(-50%) translateX(-2px);
}
.gif-nav-next {
    right: 8px;
}
.gif-nav-next:hover {
    transform: translateY(-50%) translateX(2px);
}
.vjs-parent:hover .gif-nav {
    opacity: 1;
}
.xn-fav-nav {
    margin-bottom: 1rem;
}
.xn-fav-nav-scroll {
    display: flex;
    gap: 0.375rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0.125rem 0;
}
.xn-fav-nav-scroll::-webkit-scrollbar {
    display: none;
}
.xn-fav-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 34px;
    padding: 0 0.75rem;
    background: var(--xn-element-bg);
    border: 1px solid var(--xn-glass-border);
    border-radius: 100px;
    color: var(--xn-color-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
    transition: all var(--xn-transition-fast);
    -webkit-tap-highlight-color: transparent;
}
.xn-fav-chip i {
    font-size: 0.8125rem;
    flex-shrink: 0;
}
.xn-fav-chip:active {
    transform: scale(0.96);
}
.xn-fav-chip.active {
    background: var(--xn-color-light);
    border-color: transparent;
    color: #0a0a0a;
    font-weight: 600;
}
.xn-fav-chip.active i {
    color: #0a0a0a;
}
@media (min-width: 576px) {
    .xn-fav-chip {
        height: 36px;
        padding: 0 0.875rem;
        font-size: 0.8125rem;
    }
    .xn-fav-chip i {
        font-size: 0.875rem;
    }
}
@media (min-width: 768px) {
    .xn-fav-nav-scroll {
        flex-wrap: wrap;
        overflow-x: visible;
        gap: 0.5rem;
    }
    .xn-fav-chip:hover {
        background: var(--xn-element-hover-bg);
        border-color: var(--xn-border-color);
    }
    .xn-fav-chip.active:hover {
        background: var(--xn-color-light);
        opacity: 0.9;
    }
}
@media (min-width: 1024px) {
    .xn-fav-chip {
        height: 38px;
        padding: 0 1rem;
        font-size: 0.875rem;
    }
}