@charset "UTF-8";
/*
Script Name: Digikash
Author: Coevs
Author URI: https://codecanyon.net/user/coevs
Description: Digikash Wallet Laravel Script
Version: 1.0.0
*/
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap");

:root {
    --main-color: var(--front-color-primary);
    --hover-color: var(--front-color-primary-dark);
    --heading-color: var(--front-color-heading);
    --paragraph-color: var(--front-color-text);
    --divider-color: var(--front-palette-e9ecef);
    --body-font: "Roboto", sans-serif;
    --heading-font: "Roboto", sans-serif;
    --body-font-size: var(--front-font-lg);
    --line-height30: 1.7;
    --border-color: var(--front-palette-e3e7ff);
    --sky-color: var(--front-palette-eff1ff);
    --main-color-2: var(--front-color-secondary);
    --shadow-color: rgba(var(--front-color-black-rgb), 0.14);
    --soft-warning: var(--front-palette-ffebcc);
    --soft-success: var(--front-palette-d4f8e8);
    --soft-info: var(--front-palette-d7eeff);
    --soft-danger: var(--front-palette-ffd9d9);
    --soft-gray: var(--front-palette-f5f7fa);
    --main-background: linear-gradient(90deg, var(--front-color-white) 0%, var(--front-palette-fdfbff) 100%);
    --muted-color: var(--front-palette-666);
    --gray-border: var(--front-palette-e3e7ff);
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    overflow-x: hidden;
    font-family: var(--body-font), sans-serif;
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    -moz-osx-font-smoothing: grayscale;
    /* Firefox */
    -webkit-font-smoothing: antialiased;
    /* WebKit  */
}

body {
    margin: 0;
    color: var(--paragraph-color);
    overflow-x: hidden;
    font-family: var(--body-font), sans-serif;
    line-height: var(--line-height30);
    font-size: var(--body-font-size);
    background: linear-gradient(90deg, var(--front-color-white) 0%, var(--front-palette-fdfbff) 100%);
    background: var(--main-background);
}

/* General Box Sizing and Text Smoothing */
* {
    box-sizing: border-box;
    outline: none;
    -moz-osx-font-smoothing: grayscale; /* Firefox */
    -webkit-font-smoothing: antialiased; /* WebKit */
}

h1 {
    font-size: var(--front-font-size-px-84);
    line-height: 90px;
}

h2 {
    font-size: var(--front-font-size-px-40);
    line-height: 1.2380952381;
}

h3 {
    font-size: var(--front-font-size-px-36);
    line-height: 1.3833333333;
}

h4 {
    font-size: var(--front-font-size-px-30);
    line-height: 1.3380952381;
}

h5 {
    font-size: var(--front-font-3xl);
    line-height: 1.3380952381;
}

h6 {
    font-size: var(--front-font-2xl);
    line-height: 1.2380952381;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading-color);
    font-weight: var(--front-font-medium);
    font-family: var(--heading-font);
}

p {
    color: var(--paragraph-color);
    -ms-hyphens: auto;
    hyphens: auto;
    margin-bottom: 10px;
}

a {
    color: inherit;
    text-decoration: none;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

a,
a:hover,
a:focus,
a:active {
    text-decoration: none;
    outline: none;
    color: inherit;
}

a:hover {
    color: var(--main-color);
}

pre {
    word-break: break-word;
}

a i {
    padding: 0 2px;
}

img {
    max-width: 100%;
}

ol {
    counter-reset: counter;
    padding-left: 0;
}

ol li {
    list-style: none;
    margin-bottom: 1rem;
}

ol li:before {
    counter-increment: counter;
    content: counter(counter);
    font-weight: var(--front-font-medium);
    margin-right: 10px;
}

button:hover,
button:active,
button:focus {
    outline: 0;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* scrollbar */
::-webkit-scrollbar-thumb {
    background-color: var(--main-color);
    border-radius: 10px;
    border: 2px solid var(--sky-color);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--hover-color);
}

::-webkit-scrollbar-track {
    background: var(--sky-color);
    border-radius: 10px;
}

.text-paragraph {
    color: var(--paragraph-color) !important;
}

/*input and button type focus outline disable*/
input[type=text]:focus,
input[type=file]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=number]:focus,
textarea:focus,
input[type=button]:focus,
input[type=reset]:focus,
input[type=submit]:focus,
select:focus {
    outline: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid var(--border-color) !important;
}

.no-gutter.row,
.no-gutter.container,
.no-gutter.container-fluid {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.no-gutter > [class^=col-] {
    padding-left: 0;
    padding-right: 0;
}

.no-gutter[class^=col-] {
    padding-left: 0;
    padding-right: 0;
}

.h-100vh {
    height: 100vh;
}

code {
    color: var(--front-palette-faa603);
}

.check-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.check-list li {
    display: block;
    padding-left: 20px;
    position: relative;
    z-index: 0;
}

.check-list li:after {
    position: absolute;
    left: 0;
    top: 0;
    font-family: "fontawesome";
    content: "\f105";
    color: var(--main-color);
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
    clear: both;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
    float: left;
    width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
    float: right;
    text-align: right;
    width: 50%;
}

.comment-navigation .nav-previous > a,
.posts-navigation .nav-previous > a,
.post-navigation .nav-previous > a,
.comment-navigation .nav-next > a,
.posts-navigation .nav-next > a,
.post-navigation .nav-next > a {
    -webkit-transition: 0.3s ease-in;
    transition: 0.3s ease-in;
}

.comment-navigation .nav-previous:hover > a,
.posts-navigation .nav-previous:hover > a,
.post-navigation .nav-previous:hover > a,
.comment-navigation .nav-next:hover > a,
.posts-navigation .nav-next:hover > a,
.post-navigation .nav-next:hover > a {
    color: var(--main-color);
}

.comment-list li {
    list-style: none;
}

.h-100vh {
    height: 100vh;
}

.position-relative {
    position: relative;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
    /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
    background-color: var(--front-palette-f1f1f1);
    border-radius: 3px;
    -webkit-box-shadow: 0 0 2px 2px rgba(var(--front-color-black-rgb), 0.6);
    box-shadow: 0 0 2px 2px rgba(var(--front-color-black-rgb), 0.6);
    clip: auto !important;
    -webkit-clip-path: none;
    clip-path: none;
    color: var(--front-palette-21759b);
    display: block;
    font-size: var(--front-font-md);
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
    /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
    outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
    float: left;
    clear: both;
    margin-right: 20px;
}

.alignright {
    float: right;
    clear: both;
    margin-left: 20px;
}

.aligncenter {
    clear: both;
    display: block;
    margin: 0 auto 1.75em;
}

.alignfull {
    margin: 1.5em 0;
    max-width: 100%;
}

.alignwide {
    max-width: 1100px;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
    content: "";
    display: table;
    table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
    clear: both;
}

/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
    display: block;
}

.updated:not(.published) {
    display: none;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
    max-width: 100%;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
    display: inline-block;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
    margin-bottom: 1.5em;
    max-width: 100%;
    clear: both;
}

.wp-caption img[class*=wp-image-] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption .wp-caption-text {
    margin: 0.8075em 0;
}

.wp-caption-text {
    text-align: center;
}

/*----------------------------------------
    # Unit test
------------------------------------------*/
.wp-link-pages a {
    margin: 0 5px;
    -webkit-transition: 0.3s ease-in;
    transition: 0.3s ease-in;
}

.wp-link-pages {
    margin-bottom: 30px;
    margin-top: 25px;
}

.wp-link-pages span,
.wp-link-pages a {
    border: 1px solid var(--front-palette-e2e2e2);
    padding: 5px 15px;
    display: inline-block;
}

.wp-link-pages .current,
.wp-link-pages a:hover {
    background-color: var(--main-color);
    color: var(--front-color-white);
    border-color: var(--main-color);
}

.wp-link-pages span:first-child {
    margin-right: 5px;
}

dl,
ol,
ul {
    padding-left: 15px;
}

.post-password-form input {
    display: block;
    border: 1px solid var(--front-palette-e2e2e2);
    height: 50px;
    border-radius: 3px;
    padding: 0 20px;
}

.post-password-form label {
    font-weight: var(--front-font-semibold);
    color: var(--front-palette-333);
}

.post-password-form input[type=submit] {
    width: 100px;
    height: 50px;
    background-color: var(--main-color);
    color: var(--front-color-white);
    font-size: var(--front-font-md);
    font-weight: var(--front-font-semibold);
    letter-spacing: 1px;
    border: none;
    cursor: pointer;
    -webkit-transition: 0.3s ease-in;
    transition: 0.3s ease-in;
}

.post-password-form input[type=submit]:hover {
    background-color: var(--front-palette-121a2f);
}

.footer-widget .table td,
.footer-widget .table th {
    padding: 0.5rem !important;
}

/*---------------------------------------
    ## Button
---------------------------------------*/
.btn {
    line-height: 40px;
    padding: 0 0.75rem;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: 0;
    font-size: var(--front-font-lg);
    font-family: var(--heading-font);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    font-weight: var(--front-font-normal);
    z-index: 0;
}

.btn:focus, .btn:active {
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.btn:hover {
    background: var(--front-palette-4285f4);
}

.dashboard-user-layout {
    --dashboard-primary-button-bg: var(--main-color, var(--front-color-primary));
    --dashboard-primary-button-hover: var(--front-color-primary-hover, var(--dashboard-primary-button-bg));
    --dashboard-primary-button-rgb: var(--front-color-primary-rgb);
}

.dashboard-user-layout .btn-primary,
.dashboard-user-layout .btn-base {
    color: var(--front-color-white);
    background: var(--dashboard-primary-button-bg);
    border-color: var(--dashboard-primary-button-bg);
    box-shadow: 0 10px 20px -16px rgba(var(--dashboard-primary-button-rgb), 0.72);
}

.dashboard-user-layout .btn-primary:hover,
.dashboard-user-layout .btn-primary:focus,
.dashboard-user-layout .btn-primary:active,
.dashboard-user-layout .btn-base:hover,
.dashboard-user-layout .btn-base:focus,
.dashboard-user-layout .btn-base:active {
    color: var(--front-color-white);
    background: var(--dashboard-primary-button-hover);
    border-color: var(--dashboard-primary-button-hover);
    box-shadow: 0 10px 20px -17px rgba(var(--dashboard-primary-button-rgb), 0.68);
}

.btn-base {
    color: var(--front-color-white);
    background: var(--main-color);
}

.btn-default {
    padding-right: 1rem !important;
    padding-left: .5rem !important;
}

.btn-base:active, .btn-base:focus, .btn-base:hover {
    color: var(--front-color-white);
    background: var(--main-color-2);
}

.btn-border-base {
    color: var(--main-color);
    background: transparent;
    border: 1px solid var(--main-color);
}

.btn-border-base:active, .btn-border-base:focus, .btn-border-base:hover {
    color: var(--front-color-white);
    background: var(--main-color);
}

.btn-border-base:active svg path, .btn-border-base:focus svg path, .btn-border-base:hover svg path {
    fill: var(--front-color-white);
}

.btn-white {
    color: var(--heading-color);
    background: var(--front-color-white);
    line-height: 60px;
}

.btn-white:active, .btn-white:focus, .btn-white:hover {
    color: var(--front-color-white);
    background: var(--main-color);
}

.btn-white:active:after, .btn-white:focus:after, .btn-white:hover:after {
    background: var(--main-color);
}

.btn-black {
    color: var(--front-color-white);
    background: var(--heading-color);
}

.btn-black:active, .btn-black:focus, .btn-black:hover {
    color: var(--front-color-white);
    background: var(--main-color);
}

.btn-height-60 {
    height: 60px;
    line-height: 60px;
}

.btn-light-primary {
    background: var(--front-palette-e3e8fc);
    color: var(--main-color);
}

.btn-light-primary:hover {
    color: var(--front-color-white);
}

.btn-light-secondary {
    background: var(--front-palette-e5e6e7);
    color: var(--front-palette-6c767c);
}

.btn-light-secondary:hover {
    color: var(--front-color-white);
}

.btn-light-success {
    background: var(--front-palette-e1ede6);
    color: var(--front-palette-34865b);
}

.btn-light-success:hover {
    color: var(--front-color-white);
}

.btn-light-danger {
    background: var(--front-palette-f9e0e3);
    color: var(--front-palette-d52e46);
}

.btn-light-danger:hover {
    color: var(--front-color-white);
}

.btn-light-warning {
    background: var(--front-palette-fff3da);
    color: var(--front-palette-ffac0b);
}

.btn-light-warning:hover {
    color: var(--front-color-white);
}

.btn-light-info {
    background: var(--front-palette-e1f7fc);
    color: var(--front-palette-36cdec);
}

.btn-light-info:hover {
    color: var(--front-color-white);
}

.btn-edit, .btn-config, .btn-qr {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    font-size: var(--front-font-size-rem-075);
    font-weight: var(--front-font-semibold);
    text-transform: uppercase;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: 0.2s ease-in-out;
    text-decoration: none;
    white-space: nowrap;
}

.btn-edit {
    background-color: var(--front-palette-e7f1ff);
    color: var(--front-palette-0d6efd);
    border-color: var(--front-palette-cfe2ff);
}

.btn-config {
    background-color: var(--front-palette-f1f3f5);
    color: var(--front-palette-6c757d);
    border-color: var(--front-palette-dee2e6);
}

.btn-qr {
    background-color: var(--front-palette-e9ecef);
    color: var(--front-palette-212529);
    border-color: var(--front-palette-ced4da);
}

.btn-edit:hover,
.btn-config:hover,
.btn-qr:hover {
    filter: brightness(95%);
}

/********* social-media *********/
.social-media {
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 2;
}

.social-media li {
    display: inline-block;
    margin: 0 4px;
}

.social-media li a {
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
    background: var(--front-color-white);
    color: var(--front-palette-3f517e);
}

.social-media li a:hover {
    color: var(--front-color-white);
    background: var(--main-color);
}

.social-media li:first-child {
    margin-left: 0;
}

.social-media li:last-child {
    margin-right: 0;
}

.social-media.style-border li a {
    background: transparent;
    border: 1px solid var(--front-color-white);
    color: var(--front-color-white);
}

.social-media.style-border li a i, .social-media.style-border li a svg {
    margin-right: 0;
}

.social-media.style-border li a:hover {
    background: var(--main-color);
    border-color: var(--main-color);
    color: var(--front-color-white);
}

/********* slider-control *********/
.slider-control-square .owl-nav button {
    height: 50px;
    width: 50px;
    line-height: 50px;
    margin: 0 8px;
    border-radius: 0;
    border: 1px solid var(--main-color);
    -webkit-transition: 0.4s;
    transition: 0.4s;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: var(--heading-color);
    background: transparent;
    font-size: var(--front-font-2xl);
    padding: 0;
    cursor: pointer;
}

.slider-control-square .owl-nav button:hover {
    background: var(--main-color);
    color: var(--front-color-white);
}

.slider-control-square .owl-nav .owl-prev {
    margin-left: 0;
}

.slider-control-square .owl-nav .owl-next {
    margin-left: 0;
}

/*--------------------------------------------------------------
# Globals
--------------------------------------------------------------*/
.ratting-inner {
    color: var(--front-palette-ffc107);
}

.color-base {
    color: var(--main-color);
}

.bg-base {
    background: var(--main-color);
}

.bg-sky-2 {
    background-color: var(--sky-color) !important;
}

.bg-main {
    background: var(--main-background);
}

.bg-green {
    background: var(--front-palette-1dc295);
}

.bg-blue {
    background: var(--front-palette-2878eb);
}

.bg-red {
    background: var(--front-palette-f14d5d);
}

.bg-gray {
    background: var(--front-palette-1b1e26);
}

.bg-sky {
    background: var(--front-palette-f9f9f9) !important;
}

.bg-light-warning {
    background: var(--front-palette-fff3cd) !important;
}

.bg-black {
    background: var(--heading-color) !important;
}

.bg-light {
    background: var(--front-palette-f7fafc);
}

.color-red {
    color: var(--front-palette-ee4664);
}

.bg-relative {
    position: relative;
}

.bg-cover {
    background-size: cover !important;
}

.bg-overlay {
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    z-index: 0;
}

.bg-overlay:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background: rgba(var(--front-rgb-8-12-36), 0.9);
    z-index: -1;
}

.bg-overlay .container {
    position: relative;
    z-index: 2;
}

.bg-overlay .bg-z-index {
    position: relative;
    z-index: 2;
}

.bg-overlay-2 {
    position: relative;
    background-size: cover !important;
}

.bg-overlay-2:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background: rgba(var(--front-rgb-3-0-12), 0.5);
}

.bg-overlay-2 .container {
    position: relative;
    z-index: 2;
}

.bg-overlay-2 .bg-z-index {
    position: relative;
    z-index: 2;
}

.pt-30 {
    padding-top: 30px;
}

.pb-30 {
    padding-bottom: 30px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-30 {
    margin-top: 30px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-30 {
    margin-bottom: 30px;
}

.b-radius-16 {
    border-radius: 16px;
}

.fw-400 {
    font-weight: var(--front-font-normal);
}

.fw-500 {
    font-weight: var(--front-font-medium);
}

.main-title {
    margin-bottom: 12px;
}

.main-title.style-small {
    font-size: var(--front-font-lg);
}

.fz-14 {
    font-size: var(--front-font-base);
}

.after-none:after {
    display: none !important;
}

.text-base {
    color: var(--main-color);
}

.media {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.media-body {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.border-bottom-1 {
    border-bottom: 1px solid var(--border-color);
}

.border-left-5 {
    border-left: 5px solid var(--border-color);
}

.border-warning-left-5 {
    border-left: 5px solid var(--bs-warning) !important;
}

.border-default {
    border: 1px solid var(--border-color) !important;
}

.border-bottom-1-dark {
    border-bottom: 1px solid var(--front-palette-23293c);
}

.border-0 {
    border: 0 !important;
}

.border-top-0 {
    border-top: 0;
}

.border-radius-none {
    border-radius: 0 !important;
}

.border-radius-5 input {
    border-radius: 5px !important;
}

.border-radius-5 .single-select {
    border-radius: 5px !important;
}

.btn.btn-light {
    background: var(--front-palette-f1f3ff);
}

.btn.btn-light:hover {
    background: var(--main-color);
    color: var(--front-color-white);
}

/************ animate style ************/
.top_image_bounce {
    -webkit-animation: top-image-bounce 3s infinite ease-in-out;
    animation: top-image-bounce 3s infinite ease-in-out;
}

.left_image_bounce {
    -webkit-animation: left-image-bounce 3s infinite ease-in-out;
    animation: left-image-bounce 3s infinite ease-in-out;
}

.right_image_bounce {
    -webkit-animation: right-image-bounce 3s infinite ease-in-out;
    animation: right-image-bounce 3s infinite ease-in-out;
}

.spin_image {
    -webkit-animation: spin 3s infinite ease-in-out;
    animation: spin 3s infinite ease-in-out;
}

@-webkit-keyframes top-image-bounce {
    0% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
    50% {
        -webkit-transform: translateY(12px);
        transform: translateY(12px);
    }
    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}

@keyframes top-image-bounce {
    0% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
    50% {
        -webkit-transform: translateY(12px);
        transform: translateY(12px);
    }
    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}

@-webkit-keyframes left-image-bounce {
    0% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
    }
    100% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
}

@keyframes left-image-bounce {
    0% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
    }
    100% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        -webkit-transform-origin: 50%;
        transform-origin: 50%;
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        -webkit-transform-origin: 50%;
        transform-origin: 50%;
    }
}

@-webkit-keyframes ripple-white3 {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(var(--front-color-white-rgb), 0.1), 0 0 0 10px rgba(var(--front-color-white-rgb), 0.1), 0 0 0 20px rgba(var(--front-color-white-rgb), 0.1);
        box-shadow: 0 0 0 0 rgba(var(--front-color-white-rgb), 0.1), 0 0 0 10px rgba(var(--front-color-white-rgb), 0.1), 0 0 0 20px rgba(var(--front-color-white-rgb), 0.1);
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(var(--front-color-white-rgb), 0.1), 0 0 0 20px rgba(var(--front-color-white-rgb), 0.1), 0 0 0 100px rgba(var(--front-color-white-rgb), 0);
        box-shadow: 0 0 0 10px rgba(var(--front-color-white-rgb), 0.1), 0 0 0 20px rgba(var(--front-color-white-rgb), 0.1), 0 0 0 100px rgba(var(--front-color-white-rgb), 0);
    }
}

@keyframes ripple-white3 {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(var(--front-color-white-rgb), 0.1), 0 0 0 10px rgba(var(--front-color-white-rgb), 0.1), 0 0 0 20px rgba(var(--front-color-white-rgb), 0.1);
        box-shadow: 0 0 0 0 rgba(var(--front-color-white-rgb), 0.1), 0 0 0 10px rgba(var(--front-color-white-rgb), 0.1), 0 0 0 20px rgba(var(--front-color-white-rgb), 0.1);
    }
    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(var(--front-color-white-rgb), 0.1), 0 0 0 20px rgba(var(--front-color-white-rgb), 0.1), 0 0 0 100px rgba(var(--front-color-white-rgb), 0);
        box-shadow: 0 0 0 10px rgba(var(--front-color-white-rgb), 0.1), 0 0 0 20px rgba(var(--front-color-white-rgb), 0.1), 0 0 0 100px rgba(var(--front-color-white-rgb), 0);
    }
}

/*----------------------------------------------
    # Nav bar
----------------------------------------------*/
.navbar-area .navbar-wrap {
    box-shadow: 0 1px 3px rgba(var(--front-rgb-15-23-42), 0.03);
    padding: 20px 0;
}

.navbar-area .logo-area img {
    margin-right: 30px;
}

.navbar-area .logo-area h6 {
    line-height: 1;
}

.navbar-area .header-right li {
    list-style: none;
    display: inline-block;
}

.navbar-area .header-right li + li {
    margin-left: 24px;
}

.header-right li .lang .dropdown img {
    width: 24px;
    height: 24px;
    border-radius: 20%;
}

.header-right li .lang .dropdown-menu {
    position: absolute;
    top: 22% !important;
    left: 0 !important;
    width: 112%;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--front-color-white);
    display: none;
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 0.4s, opacity 0.4s;
    opacity: 0;
}

.header-right li .lang .dropdown-menu.show {
    display: block;
    transform: scaleY(1);
    opacity: 1;
}

.header-right li .lang .dropdown-menu li {
    display: block;
    margin: 0;
    padding: 6px 10px;
}

.header-right li .lang .dropdown-menu li + li {
    border-top: 1px solid var(--border-color);
}

.header-right li .lang .dropdown-menu li a.dropdown-item {
    display: flex;
    align-items: center;
    gap: 5px;
    text-align: left;
}

.header-right li .lang .dropdown-menu li a.dropdown-item:hover {
    border-radius: 5px;
}

.header-right li .lang .dropdown-menu li a.dropdown-item.active {
    border-radius: 5px;
}

.header-right li .lang .dropdown-menu li a.dropdown-item img.icon {
    width: 20px;
}

.header-right li .lang > a.dropdown-toggle img {
    margin-top: -3px;
    margin-right: 5px;
    object-fit: cover;
    border-radius: 20%;
}

.mobile-lang:hover .dropdown-toggle {
    color: var(--front-color-white);
}

.mobile-lang .dropdown-toggle::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 6px;
    margin-left: 4px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D'12'%20height%3D'6'%20viewBox%3D'0%200%2012%206'%20fill%3D'none'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%3E%3Cpath%20d%3D'M1.5%200.75L6%205.25L10.5%200.75'%20stroke%3D'%23FFFFFF'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.navbar-area .header-right li .notice {
    position: relative;
}

.navbar-area .header-right li .notice img {
    -webkit-box-shadow: 0px 4px 25px rgba(var(--front-color-black-rgb), 0.2);
    box-shadow: 0px 4px 25px rgba(var(--front-color-black-rgb), 0.2);
    border-radius: 50%;
}

.navbar-area .header-right li .notice span {
    position: absolute;
    right: -4px;
    top: -3px;
    background: var(--front-palette-d31e30);
    height: 15px;
    width: 15px;
    line-height: 15px;
    text-align: center;
    border-radius: 50%;
    font-size: var(--front-font-2xs);
    color: var(--front-color-white);
}

.navbar-area .header-right li .user {
    position: relative;
    border-left: 1px solid var(--border-color);
    padding-left: 10px;
}

.navbar-area .header-right li .user img {
    margin-top: -3px;
    margin-right: 8px;
}

.navbar-area .header-right li .user h6 {
    color: var(--paragraph-color);
    font-size: var(--front-font-lg);
    font-weight: var(--front-font-normal);
}

.navbar-area .header-right .btn,
.navbar-area .header-right button {
    border: none !important;
    box-shadow: none !important;
}

.navbar-area .header-right li .user.active .author-card {
    visibility: visible;
    opacity: 1;
    transform: scaleY(1);
}

.navbar-area .header-right .author-card {
    width: 235px;
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--main-color);
    border-radius: 5px;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    opacity: 0;
    position: absolute;
    background: var(--front-color-white);
    z-index: 9;
    top: 39px !important;
    left: -88px !important;
}

.navbar-area .header-right .author-card .names {
    padding: 15px 20px;
    text-align: left;
    margin-bottom: 0;
    font-size: var(--front-font-lg);
    font-weight: var(--front-font-medium);
    color: var(--heading-color);
}

.navbar-area .header-right .author-card .balance {
    background: var(--main-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 15px 20px;
}

.navbar-area .header-right .author-card .balance h6 {
    font-weight: var(--front-font-medium);
}

.navbar-area .header-right .author-card .balance .balance-inner {
    border-left: 1px solid rgba(var(--front-color-white-rgb), 0.1254901961);
    padding-left: 15px;
}

.navbar-area .header-right .author-card .balance .balance-inner h4 {
    font-size: var(--front-font-3xl);
}

.navbar-area .header-right .author-card .list-details {
    display: block;
    padding: 20px;
}

.navbar-area .header-right .author-card .list-details a {
    display: block;
    text-align: left;
}

.navbar-area .header-right .author-card .list-details a + a {
    margin-top: 15px;
}

.navbar-area .header-right .author-card .list-details a span {
    height: 35px;
    width: 35px;
    line-height: 35px;
    background: var(--front-palette-eff1ff);
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    margin-right: 5px;
}

.navbar-area .header-right .author-card .list-details a span svg {
    margin-right: 0;
    padding-left: 2px;
    padding-bottom: 2px;
    height: 18px;
    width: 18px;
    color: var(--front-palette-0a53be);
}

.navbar-area .header-right .author-card .list-details a:hover span {
    background: var(--main-color);
}

.navbar-area .header-right .author-card .list-details a:hover span svg path {
    -webkit-filter: brightness(100);
    filter: brightness(100);
}

.navbar-area .header-right .author-card .list-details .border-bottom {
    padding-bottom: 12px;
}

/*----------------------------------------------
    # Nav bar
----------------------------------------------*/
.mobile-navbar-area {
    background: var(--main-color);
    padding-bottom: 120px;
}

.mobile-navbar-area .navbar-wrap {
    padding: 20px 0;
}

.mobile-navbar-area .logo-area img {
    margin-right: 30px;
}

.mobile-navbar-area .logo-area h6 {
    line-height: 1;
}

.mobile-navbar-area .header-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
}

.mobile-navbar-area .header-right li {
    list-style: none;
    display: inline-block;
}

.mobile-navbar-area .header-right li + li {
    margin-left: 8px;
    margin-top: 2px;
}

.mobile-navbar-area .header-right li .lang img {
    margin-top: -3px;
    margin-right: 5px;
}

.mobile-navbar-area .header-right li .lang select {
    border: 0;
    color: var(--front-color-white);
    background: transparent;
}

.mobile-navbar-area .header-right li .lang .single-select {
    background: transparent;
    border: 0;
    color: var(--front-color-white);
    height: 30px;
    padding-left: 0;
}

.mobile-navbar-area .header-right li .lang .single-select:after {
    border-bottom: 2px solid var(--front-color-white);
    border-right: 2px solid var(--front-color-white);
    margin-top: 0;
    right: 17px;
}

.mobile-navbar-area .header-right li .lang .single-select .list li {
    display: block;
    min-height: 18px;
    line-height: 2;
    color: var(--paragraph-color);
    padding: 0 10px !important;
    font-weight: var(--front-font-normal);
}

.mobile-navbar-area .header-right li .lang .single-select .list li + li {
    margin: 0;
}

.mobile-navbar-area .user {
    background: var(--front-palette-d6dcff);
    border-radius: 8px;
    margin: 0;
    padding: 15px 10px 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.mobile-navbar-area .user li {
    list-style: none;
}

.mobile-navbar-area .user li img {
    margin-top: -5px;
    height: 35px;
    width: 35px;
    border-radius: 50%;
    margin-right: 4px;
}

.mobile-navbar-area .user li .user-1 {
    border: 2px solid var(--front-color-white);
}

.mobile-navbar-area .user li h6 {
    font-weight: var(--front-font-normal);
    color: var(--paragraph-color);
    font-size: var(--front-font-lg);
}

.sidebar-menu {
    width: 0;
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    background-color: var(--front-color-white);
    overflow-y: auto;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    opacity: 0;
    visibility: hidden;
    z-index: 9999;
}

.sidebar-menu .single-card-box {
    border: 0;
    border-radius: 0;
}

.sidebar-menu .left-menu-box li a {
    background: transparent !important;
}

.sidebar-menu .left-menu-box li a:hover {
    color: var(--main-color);
}

.sidebar-menu.active {
    width: 290px;
    opacity: 1;
    visibility: visible;
}

.sidebar-menu .sidebar-menu-close {
    color: var(--main-color);
    border: 0;
    position: absolute;
    top: 22px;
    right: 15px;
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
}

.body-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    display: block;
    background: rgba(var(--front-color-black-rgb), 0.95);
    z-index: 2;
    content: "";
    left: 0;
    top: 0;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVBAMAAABbObilAAAAMFBMVEVMaXH////////////////////////////////////////////////////////////6w4mEAAAAD3RSTlMAlAX+BKLcA5+b6hJ7foD4ZP1OAAAAkUlEQVR4XkWPoQ3CUBQAL4SktoKAbCUjgAKLJZ2ABYosngTJCHSD6joUI6BZgqSoB/+Shqde7sS9x3OGk81fdO+texMtRVTia+TsQtHEUJLdohJfgNNPJHyEJPZTsWLoxShqsWITazEwqePAn69Sw2TUxk1+euPis3EwaXy8RMHSZBIlRcKKnC5hRctjMf57/wJbBlAIs9k1BAAAAABJRU5ErkJggg==), progress;
}

.body-overlay.active {
    visibility: visible;
    opacity: 0.97;
}

/*----------------------------------------
  ## Search Popup
----------------------------------------*/
.td-search-popup.active .search-form {
    visibility: visible;
    opacity: 1;
    width: 40%;
}

.td-search-popup .search-form {
    width: 35%;
    position: absolute;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 999;
}

.td-search-popup .search-form .form-group .form-control {
    border: none;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    height: 54px;
    padding: 0 75px 0 25px;
    background: var(--front-palette-f7f9fb);
}

.td-search-popup .search-form .form-group .form-control:hover,
.td-search-popup .search-form .form-group .form-control:focus,
.td-search-popup .search-form .form-group .form-control:active {
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.td-search-popup .search-form .submit-btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 60px;
    height: 54px;
    border: 0;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    color: var(--front-color-white);
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    padding: 0;
    cursor: pointer;
    background: var(--main-color);
}

.td-search-popup .search-form .submit-btn:hover,
.td-search-popup .search-form .submit-btn:focus,
.td-search-popup .search-form .submit-btn:active {
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.body-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    display: block;
    background: rgba(var(--front-color-black-rgb), 0.95);
    z-index: 999;
    content: "";
    left: 0;
    top: 0;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVBAMAAABbObilAAAAMFBMVEVMaXH////////////////////////////////////////////////////////////6w4mEAAAAD3RSTlMAlAX+BKLcA5+b6hJ7foD4ZP1OAAAAkUlEQVR4XkWPoQ3CUBQAL4SktoKAbCUjgAKLJZ2ABYosngTJCHSD6joUI6BZgqSoB/+Shqde7sS9x3OGk81fdO+texMtRVTia+TsQtHEUJLdohJfgNNPJHyEJPZTsWLoxShqsWITazEwqePAn69Sw2TUxk1+euPis3EwaXy8RMHSZBIlRcKKnC5hRctjMf57/wJbBlAIs9k1BAAAAABJRU5ErkJggg==), progress;
}

.body-overlay.active {
    visibility: visible;
    opacity: 0.97;
}

.mfp-zoom-in .mfp-content {
    opacity: 0;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
}

.mfp-zoom-in.mfp-bg {
    opacity: 0;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.mfp-zoom-in.mfp-ready .mfp-content {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.mfp-zoom-in.mfp-ready.mfp-bg {
    opacity: 0.7;
}

.mfp-zoom-in.mfp-removing .mfp-content {
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0;
}

.mfp-zoom-in.mfp-removing.mfp-bg {
    opacity: 0;
}

/************ single-inpur-inner ************/
.single-input-inner {
    margin-bottom: 18px;
    position: relative;
}

.single-input-inner label {
    font-weight: var(--front-font-medium);
    font-size: var(--front-font-base);
    color: var(--paragraph-color);
    margin-bottom: 8px;
}

.single-input-inner input {
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 0px;
    padding: 0 40px;
    font-size: var(--front-font-base);
    background: rgba(var(--front-rgb-8-12-36), 0.06);
    color: var(--paragraph-color);
    border-radius: 4px !important;
}

.single-input-inner input::-webkit-input-placeholder {
    color: var(--paragraph-color);
}

.single-input-inner input::-moz-placeholder {
    color: var(--paragraph-color);
}

.single-input-inner input:-ms-input-placeholder {
    color: var(--paragraph-color);
}

.single-input-inner input::-ms-input-placeholder {
    color: var(--paragraph-color);
}

.single-input-inner input::placeholder {
    color: var(--paragraph-color);
}

.single-input-inner input:active, .single-input-inner input:focus, .single-input-inner input:hover {
    border: 0;
}

.single-input-inner textarea {
    width: 100%;
    border: 0;
    height: 80px;
    border-radius: 0px;
    padding: 14px 20px;
    background: rgba(var(--front-rgb-8-12-36), 0.06);
    color: var(--paragraph-color);
    margin-bottom: -8px;
}

.single-input-inner textarea::-webkit-input-placeholder {
    color: var(--paragraph-color);
}

.single-input-inner textarea::-moz-placeholder {
    color: var(--paragraph-color);
}

.single-input-inner textarea:-ms-input-placeholder {
    color: var(--paragraph-color);
}

.single-input-inner textarea::-ms-input-placeholder {
    color: var(--paragraph-color);
}

.single-input-inner textarea::placeholder {
    color: var(--paragraph-color);
}

.single-input-inner.style-border input {
    border: 1px solid var(--border-color) !important;
    background: transparent;
    height: 45px;
    padding: 0 20px;
}

.single-input-inner.style-border input::-webkit-input-placeholder {
    color: var(--paragraph-color);
}

.single-input-inner.style-border input::-moz-placeholder {
    color: var(--paragraph-color);
}

.single-input-inner.style-border input:-ms-input-placeholder {
    color: var(--paragraph-color);
}

.single-input-inner.style-border input::-ms-input-placeholder {
    color: var(--paragraph-color);
}

.single-input-inner.style-border input::placeholder {
    color: var(--paragraph-color);
}

.single-input-inner.style-border textarea {
    border: 1px solid var(--border-color) !important;
    background: transparent;
}

.single-input-inner.style-border textarea::-webkit-input-placeholder {
    color: var(--front-palette-bbbbbb);
}

.single-input-inner.style-border textarea::-moz-placeholder {
    color: var(--front-palette-bbbbbb);
}

.single-input-inner.style-border textarea:-ms-input-placeholder {
    color: var(--front-palette-bbbbbb);
}

.single-input-inner.style-border textarea::-ms-input-placeholder {
    color: var(--front-palette-bbbbbb);
}

.single-input-inner.style-border textarea::placeholder {
    color: var(--front-palette-bbbbbb);
}

.single-input-inner.style-bg input {
    background: var(--front-palette-f5f6f6);
}

.single-input-inner.style-bg input::-webkit-input-placeholder {
    color: var(--front-palette-3f517e);
}

.single-input-inner.style-bg input::-moz-placeholder {
    color: var(--front-palette-3f517e);
}

.single-input-inner.style-bg input:-ms-input-placeholder {
    color: var(--front-palette-3f517e);
}

.single-input-inner.style-bg input::-ms-input-placeholder {
    color: var(--front-palette-3f517e);
}

.single-input-inner.style-bg input::placeholder {
    color: var(--front-palette-3f517e);
}

.single-input-inner.style-bg textarea {
    background: var(--front-palette-f5f6f6);
}

.single-input-inner.style-bg textarea::-webkit-input-placeholder {
    color: var(--front-palette-3f517e);
}

.single-input-inner.style-bg textarea::-moz-placeholder {
    color: var(--front-palette-3f517e);
}

.single-input-inner.style-bg textarea:-ms-input-placeholder {
    color: var(--front-palette-3f517e);
}

.single-input-inner.style-bg textarea::-ms-input-placeholder {
    color: var(--front-palette-3f517e);
}

.single-input-inner.style-bg textarea::placeholder {
    color: var(--front-palette-3f517e);
}

.single-select-inner {
    margin-bottom: 15px;
    position: relative;
    display: -ms-grid;
    display: grid;
}

.single-select-inner label {
    font-weight: var(--front-font-medium);
    font-size: var(--front-font-base);
    color: var(--paragraph-color);
    margin-bottom: 8px;
}

.single-select-inner .single-select {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border: 0 !important;
    border-radius: 0px;
    font-size: var(--front-font-base);
    color: var(--paragraph-color);
    background: rgba(var(--front-rgb-8-12-36), 0.06);
    padding: 0 20px 0 20px;
    border-radius: 4px !important;
}

.single-select-inner .single-select::-webkit-input-placeholder {
    color: var(--paragraph-color);
}

.single-select-inner .single-select::-moz-placeholder {
    color: var(--paragraph-color);
}

.single-select-inner .single-select:-ms-input-placeholder {
    color: var(--paragraph-color);
}

.single-select-inner .single-select::-ms-input-placeholder {
    color: var(--paragraph-color);
}

.single-select-inner .single-select::placeholder {
    color: var(--paragraph-color);
}

.single-select-inner .single-select:after {
    right: 20px;
    height: 7px;
    width: 7px;
    border-color: var(--paragraph-color);
}

.single-select-inner .single-select .list {
    width: 100%;
}

.single-select-inner.style-border .single-select {
    border: 1px solid var(--border-color) !important;
    background: transparent;
    height: 45px;
    line-height: 45px;
    padding: 0 20px;
}

.single-select-inner.style-bg .single-select {
    background: var(--front-palette-f7fafc);
}

.single-select-inner.style-bg .single-select::-webkit-input-placeholder {
    color: var(--front-palette-3f517e);
}

.single-select-inner.style-bg .single-select::-moz-placeholder {
    color: var(--front-palette-3f517e);
}

.single-select-inner.style-bg .single-select:-ms-input-placeholder {
    color: var(--front-palette-3f517e);
}

.single-select-inner.style-bg .single-select::-ms-input-placeholder {
    color: var(--front-palette-3f517e);
}

.single-select-inner.style-bg .single-select::placeholder {
    color: var(--front-palette-3f517e);
}

.single-check-wrap {
    font-size: var(--front-font-base);
    margin: 0;
    line-height: 26px;
}

.single-check-wrap .form-check-input {
    border-radius: 0;
    border: 1px solid var(--front-palette-d6d6d6);
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    position: relative;
    height: 20px;
    width: 20px;
}

.single-check-wrap .form-check-input:after {
    content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    height: 8px;
    width: 8px;
    background: var(--main-color);
    opacity: 0;
    z-index: 1;
}

.single-check-wrap .form-check-input:checked[type=checkbox] {
    background: transparent;
}

.single-check-wrap .form-check-input:checked[type=checkbox]::after {
    opacity: 1;
}

.single-check-wrap label {
    margin-left: 10px;
}

/************** feature-wrap ***************/
.single-card-box {
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
}

.single-card-box.style-shadow {
    border: 0;
    -webkit-box-shadow: 0px 4px 25px rgba(var(--front-color-black-rgb), 0.08);
    box-shadow: 0px 4px 25px rgba(var(--front-color-black-rgb), 0.08);
}

.walet-inner {
    position: relative;
    border-radius: 16px;
    background-image: linear-gradient(to right, var(--front-palette-16bbfb), var(--front-palette-1978ba));
    padding: 20px;
}

.walet-inner img {
    width: auto !important;
}

.walet-inner .bg-img {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100% !important;
}

.walet-inner .sim-card {
    margin-bottom: 25px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.walet-inner .sim-card span {
    font-size: var(--front-font-xl);
    font-weight: var(--front-font-semibold);
}

.walet-inner .title {
    font-size: var(--front-font-lg);
    font-weight: var(--front-font-normal);
}

.walet-inner .amount {
    font-size: var(--front-font-3xl);
    font-weight: var(--front-font-medium);
}

.walet-slider .owl-nav {
    position: absolute;
    right: 0;
    top: -38px;
}

.walet-slider .owl-nav button {
    background: transparent;
    border: 0;
    color: var(--heading-color);
}

.walet-slider .owl-nav button:hover {
    color: var(--main-color);
}

.sidebar-wallet-panel.single-card-box {
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    overflow: visible;
}

.sidebar-wallet-panel .walet-slider {
    --sidebar-wallet-dot: var(--main-color);
    position: relative;
    margin-bottom: 0;
}

.sidebar-wallet-panel .walet-slider[data-sidebar-wallet-role="merchant"] {
    --sidebar-wallet-dot: var(--front-color-merchant);
}

.sidebar-wallet-panel .walet-slider[data-sidebar-wallet-role="agent"] {
    --sidebar-wallet-dot: var(--front-color-agent);
}

.sidebar-wallet-panel .walet-slider .owl-stage-outer {
    overflow: hidden;
    border-radius: 10px;
}

.sidebar-wallet-panel .walet-inner.sidebar-wallet-card {
    --sidebar-wallet-start: var(--front-palette-5b8df5);
    --sidebar-wallet-mid: var(--front-palette-4285f4);
    --sidebar-wallet-end: var(--front-palette-1255b0);
    --sidebar-wallet-shadow: rgba(var(--front-color-primary-rgb), 0.2);
    --sidebar-wallet-dot: var(--main-color);
    min-height: 152px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 14px 12px 12px;
    border-radius: 10px;
    overflow: hidden;
    color: var(--front-color-white);
    background:
        radial-gradient(circle at 92% 10%, rgba(var(--front-color-white-rgb), 0.18) 0 1px, transparent 2px),
        linear-gradient(135deg, var(--sidebar-wallet-start) 0%, var(--sidebar-wallet-mid) 48%, var(--sidebar-wallet-end) 100%);
    box-shadow: 0 12px 26px var(--sidebar-wallet-shadow);
}

.sidebar-wallet-panel .walet-inner.sidebar-wallet-card--merchant {
    --sidebar-wallet-start: var(--front-color-merchant);
    --sidebar-wallet-mid: var(--front-color-merchant-accent);
    --sidebar-wallet-end: var(--front-color-merchant-dark);
    --sidebar-wallet-shadow: rgba(var(--front-color-merchant-rgb), 0.24);
    --sidebar-wallet-dot: var(--front-color-merchant);
}

.sidebar-wallet-panel .walet-inner.sidebar-wallet-card--agent {
    --sidebar-wallet-start: var(--front-color-agent);
    --sidebar-wallet-mid: var(--front-color-agent-dark);
    --sidebar-wallet-end: var(--front-palette-24315c);
    --sidebar-wallet-shadow: rgba(var(--front-color-agent-rgb), 0.22);
    --sidebar-wallet-dot: var(--front-color-agent);
}

.sidebar-wallet-panel .walet-inner.sidebar-wallet-card::before {
    content: "";
    position: absolute;
    top: -34px;
    right: -20px;
    width: 94px;
    height: 94px;
    border: 1px solid rgba(var(--front-color-white-rgb), 0.2);
    border-radius: 50%;
    box-shadow: inset 0 0 0 16px rgba(var(--front-color-white-rgb), 0.04);
    pointer-events: none;
}

.sidebar-wallet-panel .walet-inner.sidebar-wallet-card::after {
    content: "";
    position: absolute;
    right: -22px;
    bottom: -44px;
    width: 142px;
    height: 142px;
    border: 1px solid rgba(var(--front-color-white-rgb), 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.sidebar-wallet-card > * {
    position: relative;
    z-index: 1;
}

.sidebar-wallet-card__top {
    min-height: 25px;
    display: flex;
    align-items: center;
    padding-right: 58px;
}

.sidebar-wallet-card__badge {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    gap: 6px;
    padding: 4px 10px 4px 6px;
    border-radius: 999px;
    background: rgba(var(--front-color-white-rgb), 0.16);
    color: rgba(var(--front-color-white-rgb), 0.94);
    font-size: 10px;
    font-weight: var(--front-font-bold);
    line-height: 1;
}

.sidebar-wallet-card__badge span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-wallet-card__symbol {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(var(--front-color-white-rgb), 0.18);
    font-size: 10px;
    font-weight: var(--front-font-bold);
}

.sidebar-wallet-card__body {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.sidebar-wallet-card__id {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
    color: rgba(var(--front-color-white-rgb), 0.72);
    font-size: 10px;
    font-weight: var(--front-font-semibold);
    line-height: 1.2;
}

.sidebar-wallet-card__id-label {
    flex: 0 0 auto;
    color: rgba(var(--front-color-white-rgb), 0.9);
    font-weight: var(--front-font-bold);
}

.sidebar-wallet-card__id-label::after {
    content: ":";
}

.sidebar-wallet-card__id-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-wallet-card__id i {
    flex: 0 0 auto;
    font-size: 9px;
}

.sidebar-wallet-card__id .copy-icon {
    color: rgba(var(--front-color-white-rgb), 0.5);
    transition: color 0.2s ease;
}

.sidebar-wallet-card__id .copy-icon:hover {
    color: var(--front-color-white);
}

.sidebar-wallet-card__amount-row {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
}

.sidebar-wallet-card__amount {
    min-width: 0;
    color: var(--front-color-white);
    font-size: var(--front-font-size-px-22);
    font-weight: var(--front-font-bold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    transition: filter 0.16s ease, opacity 0.16s ease;
}

.sidebar-wallet-card__amount[data-hidden="1"] {
    filter: blur(8px);
    opacity: 0.72;
    user-select: none;
}

.sidebar-wallet-card__eye {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid rgba(var(--front-color-white-rgb), 0.2);
    border-radius: 999px;
    background: rgba(var(--front-color-white-rgb), 0.12);
    color: rgba(var(--front-color-white-rgb), 0.88);
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.sidebar-wallet-card__eye:hover,
.sidebar-wallet-card__eye:focus-visible {
    background: rgba(var(--front-color-white-rgb), 0.2);
    color: var(--front-color-white);
    outline: none;
    transform: translateY(-1px);
}

.sidebar-wallet-card__eye i {
    font-size: 10px;
    line-height: 1;
}

.sidebar-wallet-card__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.sidebar-wallet-card__action {
    min-width: 0;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 8px;
    border-radius: 7px;
    color: var(--front-color-white);
    font-size: 10.5px;
    font-weight: var(--front-font-bold);
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sidebar-wallet-card__action:hover,
.sidebar-wallet-card__action:focus {
    color: var(--front-color-white);
    text-decoration: none;
}

.sidebar-wallet-card__action i,
.sidebar-wallet-card__action span {
    min-width: 0;
}

.sidebar-wallet-card__action span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-wallet-card__action--primary {
    background: var(--front-color-white);
    color: var(--sidebar-wallet-mid);
}

.sidebar-wallet-card__action--primary:hover,
.sidebar-wallet-card__action--primary:focus {
    background: rgba(var(--front-color-white-rgb), 0.92);
    color: var(--sidebar-wallet-mid);
}

.sidebar-wallet-card__action--secondary {
    border: 1px solid rgba(var(--front-color-white-rgb), 0.5);
    background: rgba(var(--front-color-white-rgb), 0.12);
}

.sidebar-wallet-card__action--secondary:hover,
.sidebar-wallet-card__action--secondary:focus {
    border-color: rgba(var(--front-color-white-rgb), 0.74);
    background: rgba(var(--front-color-white-rgb), 0.18);
}

.sidebar-wallet-panel .walet-slider .owl-nav {
    top: 14px;
    right: 12px;
    z-index: 3;
    display: flex;
    gap: 6px;
}

.sidebar-wallet-panel .walet-slider .owl-nav button {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(var(--front-color-white-rgb), 0.14);
    border-radius: 8px;
    background: rgba(var(--front-color-white-rgb), 0.16);
    color: rgba(var(--front-color-white-rgb), 0.86);
    line-height: 1;
}

.sidebar-wallet-panel .walet-slider .owl-nav button:hover {
    background: rgba(var(--front-color-white-rgb), 0.24);
    color: var(--front-color-white);
}

.sidebar-wallet-panel .walet-slider .owl-nav button i {
    margin: 0 !important;
    font-size: 11px;
}

.sidebar-wallet-panel .walet-slider .owl-dots {
    position: absolute;
    right: 0;
    bottom: -10px;
    left: 0;
    display: flex;
    justify-content: center;
    gap: 5px;
    height: 6px;
    margin: 0;
}

.sidebar-wallet-panel .walet-slider .owl-dot {
    width: 5px;
    height: 5px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(var(--front-color-primary-rgb), 0.32);
}

.sidebar-wallet-panel .walet-slider .owl-dot.active {
    width: 18px;
    background: var(--sidebar-wallet-dot, var(--main-color));
}

.left-menu-box {
    margin: 0;
    padding: 0;
}

.left-menu-box li {
    display: block;
}

.left-menu-box li + li {
    margin-top: 8px;
}

.left-menu-box li a {
    display: block;
    padding: 10px 16px;
    background: var(--front-palette-f1f3ff);
    border-radius: 8px;
}

.left-menu-box li a img {
    margin-top: -4px;
    margin-right: 5px;
}

.left-menu-box li a .icon {
    margin-top: -4px;
    margin-right: 5px;
    width: 16px;
    height: 16px;
}

.left-menu-box li a i {
    float: right;
    margin-top: 5px;
}

.left-menu-box li a .arrow {
    float: right;
    margin-top: 5px;
}

.left-menu-box li .active {
    background: var(--main-color);
    color: var(--front-color-white);
}

.left-menu-box li a:hover {
    background: var(--main-color);
    color: var(--front-color-white);
}

.left-menu-box li a:hover img {
    -webkit-filter: brightness(100);
    filter: brightness(100);
}

.dashboard-sidebar-referral-card {
    position: relative;
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    margin-top: 0;
    padding: 12px;
    border: 1px solid rgba(var(--front-rgb-34-197-94), 0.34);
    border-radius: 14px;
    background:
        radial-gradient(circle at 18% 45%, rgba(var(--front-rgb-34-197-94), 0.16), transparent 36%),
        linear-gradient(135deg, rgba(var(--front-rgb-34-197-94), 0.08), rgba(var(--front-color-primary-rgb), 0.06)),
        var(--front-color-white);
    color: var(--front-palette-344054);
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(var(--front-rgb-15-23-42), 0.05);
}

.dashboard-sidebar-referral-slot {
    position: relative;
    flex: 0 0 auto;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(var(--front-rgb-226-232-240), 0.85);
    background: linear-gradient(180deg, rgba(var(--front-color-white-rgb), 0), var(--front-color-white) 36%);
}

.dashboard-sidebar-referral-card:hover {
    border-color: rgba(var(--front-rgb-34-197-94), 0.5);
    color: var(--front-palette-15803d);
    background:
        radial-gradient(circle at 18% 45%, rgba(var(--front-rgb-34-197-94), 0.2), transparent 38%),
        linear-gradient(135deg, rgba(var(--front-rgb-34-197-94), 0.12), rgba(var(--front-color-primary-rgb), 0.08)),
        var(--front-color-white);
}

.dashboard-sidebar-referral-card__image {
    position: relative;
    display: grid;
    place-items: center;
    width: 70px;
    height: 64px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(var(--front-rgb-34-197-94), 0.12), rgba(var(--front-color-primary-rgb), 0.1));
    color: var(--main-color);
    overflow: hidden;
}

.dashboard-sidebar-referral-card__gift {
    width: 76px;
    height: 58px;
    transform: translateY(3px);
}

.dashboard-sidebar-referral-card__person {
    position: absolute;
    right: 6px;
    bottom: 7px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 3px solid rgba(var(--front-color-white-rgb), 0.9);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(var(--front-rgb-34-197-94), 0.92), rgba(var(--front-color-success-rgb), 0.92));
    color: var(--front-color-white);
    box-shadow: 0 8px 18px rgba(var(--front-rgb-34-197-94), 0.26);
}

.dashboard-sidebar-referral-card__person-icon {
    width: 16px;
    height: 16px;
}

.dashboard-sidebar-referral-card__body {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.dashboard-sidebar-referral-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    justify-self: flex-start;
    min-width: 0;
    max-width: 100%;
    padding: 4px 8px;
    border: 1px solid rgba(var(--front-rgb-34-197-94), 0.18);
    border-radius: 999px;
    background: rgba(var(--front-rgb-34-197-94), 0.1);
    color: var(--front-palette-15803d);
    font-size: var(--front-font-size-rem-07);
    font-weight: var(--front-font-bold);
    letter-spacing: 0.03em;
    line-height: 1;
    text-transform: uppercase;
}

.dashboard-sidebar-referral-card__badge-icon {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.dashboard-sidebar-referral-card__title {
    color: var(--front-palette-101828);
    font-size: var(--front-font-size-rem-09);
    font-weight: var(--front-font-bold);
    line-height: 1.2;
}

.dashboard-sidebar-referral-card:hover .dashboard-sidebar-referral-card__title {
    color: var(--front-palette-15803d);
}

.dashboard-sidebar-referral-card__subtitle {
    color: var(--front-palette-667085);
    font-size: var(--front-font-size-rem-074);
    font-weight: var(--front-font-medium);
    line-height: 1.25;
}

.dashboard-sidebar-referral-card__action {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--front-palette-22c55e), var(--front-palette-15803d));
    color: var(--front-color-white);
    box-shadow: 0 10px 20px rgba(var(--front-rgb-34-197-94), 0.22);
}

.dashboard-sidebar-referral-card__arrow {
    width: 16px;
    height: 16px;
}

/* grouped sidebar menu */
.left-menu-box .menu-group > .group-toggle {
    display: block;
    position: relative;
}

.left-menu-box .menu-group > .group-toggle .arrow {
    transition: transform 0.25s ease;
}

.left-menu-box .menu-group > .group-toggle[aria-expanded="true"] .arrow {
    transform: rotate(90deg);
}

.left-menu-box .menu-group .submenu {
    position: relative;
    margin: 7px 0 0 14px;
    padding: 5px 0 5px 10px;
    border-left: 1px solid rgba(var(--front-color-primary-rgb), 0.16);
}

.left-menu-box .menu-group .submenu li + li {
    margin-top: 4px;
}

.left-menu-box .menu-group .submenu a {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px 8px 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--front-palette-344054);
    font-size: var(--front-font-size-rem-088);
    font-weight: var(--front-font-medium);
    line-height: 1.22;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.left-menu-box .menu-group .submenu a .icon {
    width: 15px;
    height: 15px;
    margin: 0;
    color: var(--front-palette-667085);
    opacity: 0.9;
}

.left-menu-box .menu-group .submenu a .arrow {
    margin-top: 0;
    margin-left: auto;
    color: var(--front-palette-667085);
    font-size: var(--front-font-size-rem-074);
}

.left-menu-box .menu-group .submenu a:hover {
    border-color: rgba(var(--front-color-primary-rgb), 0.12);
    background: linear-gradient(135deg, rgba(var(--front-color-primary-rgb), 0.08), rgba(var(--front-color-primary-rgb), 0.03));
    color: var(--main-color);
    transform: translateX(2px);
}

.left-menu-box .menu-group .submenu a:hover .icon,
.left-menu-box .menu-group .submenu a:hover .arrow {
    color: var(--main-color);
}

/* submenu active: clearer contrast and stable appearance */
.left-menu-box .menu-group .submenu a.active {
    position: relative;
    border-color: rgba(var(--front-color-primary-rgb), 0.16);
    background: linear-gradient(135deg, rgba(var(--front-color-primary-rgb), 0.12), rgba(var(--front-color-primary-rgb), 0.05));
    color: var(--main-color);
    font-weight: var(--front-font-bold);
}

.left-menu-box .menu-group .submenu a.active:hover {
    background: linear-gradient(135deg, rgba(var(--front-color-primary-rgb), 0.14), rgba(var(--front-color-primary-rgb), 0.06));
    color: var(--main-color);
}

.left-menu-box .menu-group .submenu a.active .arrow {
    color: var(--main-color);
}

.left-menu-box .menu-group .submenu a.active .icon {
    color: var(--main-color);
}

.left-menu-box .menu-group .submenu a.active:before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    width: 3px;
    height: 18px;
    border-radius: 2px;
    background: var(--main-color);
    transform: translateY(-50%);
}

.main-notice-card {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    background: var(--front-color-white);
    padding: 20px;
    margin-bottom: 30px;
    text-align: left;
}

.main-notice-card h6 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    font-size: var(--front-font-xl);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    font-weight: bold;
}

.kyc-status {
    font-size: var(--front-font-lg);
    font-weight: bold;
}

.main-notice-card p {
    margin: 15px 0;
    font-size: var(--front-font-lg);
    color: var(--front-palette-555);
}

.kyc-button {
    padding: 8px 15px;
    font-size: var(--front-font-base);
    font-weight: bold;
    border-radius: 10px;
    display: inline-block;
    margin-top: 10px;
    background-color: var(--sky-color, var(--front-palette-28a745));
    color: var(--front-color-white);
    text-decoration: none;
    text-align: center;
    transition: background 0.3s ease;
    border: none;
}

.kyc-button:hover {
    background-color: var(--sky-color, var(--front-palette-218838));
}

/* KYC notice card - premium, state-driven */
.kyc-notice-card {
    /* Default (Action Required) - Indigo/Blue */
    --kyc-bg-start: var(--front-palette-f5f7ff);
    --kyc-bg-end: var(--front-palette-eef2ff);
    --kyc-border: rgba(var(--front-rgb-79-105-234), 0.18);
    --kyc-accent: var(--front-palette-4f69ea);
    --kyc-accent-soft: rgba(var(--front-rgb-79-105-234), 0.12);
    --kyc-chip-bg: rgba(var(--front-rgb-79-105-234), 0.10);
    --kyc-chip-color: var(--front-palette-3a52c9);
    --kyc-icon-bg-start: var(--front-palette-e6edff);
    --kyc-icon-bg-end: var(--front-palette-f2f5ff);
    --kyc-btn-start: var(--front-palette-6c8efb);
    --kyc-btn-end: var(--front-palette-4e72f0);
    --kyc-btn-border: rgba(var(--front-rgb-78-114-240), 0.55);
    --kyc-btn-shadow: rgba(var(--front-color-primary-rgb), 0.22);

    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas: "icon content action";
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border: 1px solid var(--kyc-border);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--kyc-bg-start) 0%, var(--kyc-bg-end) 100%);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 1px 1px rgba(17, 24, 39, 0.03);
    overflow: hidden;
    isolation: isolate;
}

.kyc-notice-card--pending {
    --kyc-bg-start: var(--front-palette-fffaf0);
    --kyc-bg-end: var(--front-palette-fef4e2);
    --kyc-border: rgba(var(--front-rgb-211-161-45), 0.22);
    --kyc-accent: var(--front-palette-d3a12d);
    --kyc-accent-soft: rgba(var(--front-rgb-211-161-45), 0.14);
    --kyc-chip-bg: rgba(var(--front-rgb-211-161-45), 0.12);
    --kyc-chip-color: var(--front-palette-9a7413);
    --kyc-icon-bg-start: var(--front-palette-fff4d9);
    --kyc-icon-bg-end: var(--front-palette-fffaee);
    --kyc-btn-start: var(--front-palette-f0c95d);
    --kyc-btn-end: var(--front-palette-d8ad39);
    --kyc-btn-border: rgba(var(--front-rgb-211-175-69), 0.6);
    --kyc-btn-shadow: rgba(var(--front-rgb-181-138-21), 0.22);
}

.kyc-notice-card--rejected {
    --kyc-bg-start: var(--front-palette-fff5f5);
    --kyc-bg-end: var(--front-palette-ffecec);
    --kyc-border: rgba(var(--front-rgb-213-86-86), 0.22);
    --kyc-accent: var(--front-palette-d95656);
    --kyc-accent-soft: rgba(var(--front-rgb-213-86-86), 0.12);
    --kyc-chip-bg: rgba(var(--front-rgb-213-86-86), 0.12);
    --kyc-chip-color: var(--front-palette-b54141);
    --kyc-icon-bg-start: var(--front-palette-ffe3e3);
    --kyc-icon-bg-end: var(--front-palette-fff1f1);
    --kyc-btn-start: var(--front-palette-e58f8f);
    --kyc-btn-end: var(--front-palette-d16a6a);
    --kyc-btn-border: rgba(var(--front-rgb-217-127-127), 0.6);
    --kyc-btn-shadow: rgba(var(--front-rgb-178-76-76), 0.22);
}

.kyc-notice-card::before {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: 42%;
    background: radial-gradient(120% 120% at 100% 0%, var(--kyc-accent-soft) 0%, rgba(var(--front-color-white-rgb), 0) 60%);
    pointer-events: none;
    z-index: 0;
}

.kyc-notice-card::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--kyc-accent) 0%, transparent 100%);
    opacity: 0.85;
    pointer-events: none;
    z-index: 0;
}

.kyc-notice-card__illustration,
.kyc-notice-card__content,
.kyc-notice-card__action {
    position: relative;
    z-index: 1;
}

.kyc-notice-card__illustration {
    grid-area: icon;
    width: 52px;
    height: 44px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(150deg, var(--kyc-icon-bg-start) 0%, var(--kyc-icon-bg-end) 100%);
    border: 1px solid var(--kyc-border);
    box-shadow: inset 0 1px 0 rgba(var(--front-color-white-rgb), 0.9), 0 1px 2px rgba(var(--front-rgb-17-24-39), 0.04);
}

.kyc-notice-card__glow {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 30% 25%, rgba(var(--front-color-white-rgb), 0.85) 0%, rgba(var(--front-color-white-rgb), 0) 55%);
    pointer-events: none;
}

.kyc-notice-card__icon {
    position: relative;
    width: 30px;
    height: 30px;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(var(--front-rgb-17-24-39), 0.06));
}

.kyc-notice-card__status-mark {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--front-color-white);
    background: linear-gradient(180deg, var(--kyc-btn-start) 0%, var(--kyc-btn-end) 100%);
    border: 2px solid var(--front-color-white);
    box-shadow: 0 2px 6px var(--kyc-btn-shadow);
    font-size: var(--front-font-size-px-9);
    line-height: 1;
}

.kyc-notice-card--pending .kyc-notice-card__status-mark {
    animation: kyc-notice-mark-pulse 2s ease-in-out infinite;
}

@keyframes kyc-notice-mark-pulse {
    0%, 100% {
        box-shadow: 0 2px 6px var(--kyc-btn-shadow), 0 0 0 0 var(--kyc-accent-soft);
    }
    50% {
        box-shadow: 0 2px 6px var(--kyc-btn-shadow), 0 0 0 6px rgba(var(--front-color-white-rgb), 0);
    }
}

.kyc-notice-card--rejected::before {
    background: radial-gradient(120% 120% at 100% 0%, var(--kyc-accent-soft) 0%, rgba(var(--front-color-white-rgb), 0) 60%),
    repeating-linear-gradient(135deg, rgba(var(--front-rgb-213-86-86), 0.05) 0 8px, rgba(var(--front-rgb-213-86-86), 0) 8px 18px);
}

.kyc-notice-card__content {
    grid-area: content;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kyc-notice-card .kyc-notice-card__title {
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    font-size: 0.98rem;
    font-weight: var(--front-font-semibold);
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--main-color);
}

.kyc-notice-card .kyc-notice-card__text {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--front-palette-5b6577);
    max-width: 720px;
}

.kyc-notice-card__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    background: var(--kyc-chip-bg);
    color: var(--kyc-chip-color);
    font-size: var(--front-font-size-rem-075);
    font-weight: var(--front-font-medium);
    line-height: 1.2;
    align-self: flex-start;
    max-width: 100%;
}

.kyc-notice-card__meta-icon {
    font-size: var(--front-font-size-rem-072);
    color: var(--kyc-accent);
}

.kyc-notice-card__meta-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kyc-notice-card__action {
    grid-area: action;
    justify-self: end;
}

.kyc-notice-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    justify-content: center;
    border-radius: 8px;
    padding: 7px 14px;
    border: 1px solid var(--kyc-btn-border);
    background: linear-gradient(180deg, var(--kyc-btn-start) 0%, var(--kyc-btn-end) 100%);
    box-shadow: 0 1px 2px rgba(70, 99, 238, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    color: var(--front-color-white);
    font-size: var(--front-font-size-rem-086);
    font-weight: var(--front-font-semibold);
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.kyc-notice-card__btn i {
    transition: transform 0.2s ease;
}

.kyc-notice-card__btn:hover,
.kyc-notice-card__btn:focus {
    color: var(--front-color-white);
    filter: brightness(1.04);
    box-shadow: 0 4px 12px var(--kyc-btn-shadow), inset 0 1px 0 rgba(var(--front-color-white-rgb), 0.24);
    transform: translateY(-1px);
}

.kyc-notice-card__btn:hover i,
.kyc-notice-card__btn:focus i {
    transform: translateX(2px);
}

.kyc-notice-card__btn:focus-visible {
    outline: 2px solid var(--kyc-accent);
    outline-offset: 2px;
}

/* KYC notice strip - image-aligned dashboard UI */
.main-notice-card.kyc-notice-card {
    --kyc-bg: #fff7ed;
    --kyc-border: rgba(249, 115, 22, 0.34);
    --kyc-accent: #f97316;
    --kyc-accent-rgb: 249, 115, 22;
    --kyc-icon-bg: #fff1df;
    --kyc-title: var(--front-palette-101828);
    --kyc-text: var(--front-palette-667085);
    --kyc-button-bg: rgba(var(--front-color-primary-rgb), 0.08);
    --kyc-button-color: var(--main-color);
    --kyc-step-width: 66%;

    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto auto;
    grid-template-areas: "icon content progress action";
    align-items: center;
    gap: 14px;
    min-height: 58px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--kyc-border);
    border-left: 2px solid var(--kyc-accent);
    border-radius: 10px;
    background: linear-gradient(90deg, var(--kyc-bg) 0%, rgba(var(--front-color-white-rgb), 0.96) 58%, rgba(var(--front-color-white-rgb), 0.88) 100%);
    box-shadow: none;
    overflow: hidden;
}

.main-notice-card.kyc-notice-card[hidden] {
    display: none !important;
}

.main-notice-card.kyc-notice-card--approved {
    --kyc-bg: #dcfce7;
    --kyc-border: rgba(var(--front-color-success-rgb), 0.34);
    --kyc-accent: var(--front-color-success);
    --kyc-accent-rgb: var(--front-color-success-rgb);
    --kyc-icon-bg: rgba(var(--front-color-success-rgb), 0.82);
    --kyc-button-bg: rgba(var(--front-color-primary-rgb), 0.08);
    --kyc-step-width: 66%;
}

.main-notice-card.kyc-notice-card--rejected {
    --kyc-bg: #fee2e2;
    --kyc-border: rgba(var(--front-color-danger-rgb), 0.34);
    --kyc-accent: var(--front-color-danger);
    --kyc-accent-rgb: var(--front-color-danger-rgb);
    --kyc-icon-bg: rgba(var(--front-color-danger-rgb), 0.9);
    --kyc-button-bg: var(--front-color-danger);
    --kyc-button-color: var(--front-color-white);
    --kyc-step-width: 66%;
}

.main-notice-card.kyc-notice-card--missing {
    --kyc-bg: #eef4ff;
    --kyc-border: rgba(var(--front-color-primary-rgb), 0.3);
    --kyc-accent: var(--main-color);
    --kyc-accent-rgb: var(--front-color-primary-rgb);
    --kyc-icon-bg: rgba(var(--front-color-primary-rgb), 0.9);
    --kyc-step-width: 33%;
}

.main-notice-card.kyc-notice-card::before,
.main-notice-card.kyc-notice-card::after {
    content: none;
}

.kyc-notice-card__icon-box {
    grid-area: icon;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--kyc-icon-bg);
    color: var(--front-color-white);
}

.kyc-notice-card--pending .kyc-notice-card__icon-box {
    color: var(--kyc-accent);
}

.kyc-notice-card__icon-box i {
    font-size: 13px;
    line-height: 1;
}

.main-notice-card.kyc-notice-card .kyc-notice-card__content {
    grid-area: content;
    min-width: 0;
    gap: 2px;
}

.main-notice-card.kyc-notice-card .kyc-notice-card__title {
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    color: var(--kyc-title);
    font-size: 13px;
    font-weight: var(--front-font-bold);
    line-height: 1.2;
    letter-spacing: 0;
}

.main-notice-card.kyc-notice-card .kyc-notice-card__text {
    margin: 0;
    color: var(--kyc-text);
    font-size: 11px;
    line-height: 1.35;
    max-width: none;
}

.kyc-notice-card__progress {
    grid-area: progress;
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 8px;
    min-width: 142px;
    color: var(--front-palette-667085);
    font-size: 10px;
    font-weight: var(--front-font-semibold);
    white-space: nowrap;
}

.kyc-notice-card__track {
    width: 62px;
    height: 4px;
    display: block;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(var(--kyc-accent-rgb), 0.12);
}

.kyc-notice-card__bar {
    width: var(--kyc-step-width);
    height: 100%;
    display: block;
    border-radius: inherit;
    background: var(--kyc-accent);
}

.kyc-notice-card__status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid rgba(var(--front-color-success-rgb), 0.22);
    border-radius: 999px;
    background: rgba(var(--front-color-success-rgb), 0.1);
    color: var(--front-palette-15803d);
    font-size: 10.5px;
    font-weight: var(--front-font-bold);
    line-height: 1;
    white-space: nowrap;
}

.kyc-notice-card__status-pill i {
    font-size: 11px;
}

.main-notice-card.kyc-notice-card .kyc-notice-card__action {
    grid-area: action;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-self: end;
}

.main-notice-card.kyc-notice-card .kyc-notice-card__btn {
    min-width: 104px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.12);
    border-radius: 8px;
    background: var(--kyc-button-bg);
    box-shadow: none;
    color: var(--kyc-button-color);
    font-size: 11px;
    font-weight: var(--front-font-bold);
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
}

.main-notice-card.kyc-notice-card .kyc-notice-card__btn:hover,
.main-notice-card.kyc-notice-card .kyc-notice-card__btn:focus {
    color: var(--kyc-button-color);
    filter: brightness(0.98);
    transform: translateY(-1px);
    box-shadow: none;
}

.main-notice-card.kyc-notice-card .kyc-notice-card__btn i {
    font-size: 11px;
}

.main-notice-card.kyc-notice-card .kyc-notice-card__dismiss {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(var(--front-color-success-rgb), 0.22);
    border-radius: 8px;
    background: rgba(var(--front-color-white-rgb), 0.66);
    color: var(--front-palette-667085);
    font-size: 10px;
    line-height: 1;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.main-notice-card.kyc-notice-card .kyc-notice-card__dismiss:hover,
.main-notice-card.kyc-notice-card .kyc-notice-card__dismiss:focus {
    border-color: rgba(var(--front-color-success-rgb), 0.34);
    background: var(--front-color-white);
    color: var(--front-palette-344054);
    transform: translateY(-1px);
}

.main-notice-card.kyc-notice-card--rejected .kyc-notice-card__btn:hover,
.main-notice-card.kyc-notice-card--rejected .kyc-notice-card__btn:focus {
    color: var(--front-color-white);
}

/* KYC Verify page - premium form + status panel */
.kyc-verify-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.kyc-verify-header__title {
    margin: 0 0 4px;
    font-size: var(--front-font-size-rem-115);
    font-weight: var(--front-font-semibold);
    letter-spacing: -0.01em;
    color: var(--main-color);
}

.kyc-verify-header__subtitle {
    margin: 0;
    font-size: var(--front-font-size-rem-088);
    line-height: 1.5;
    color: var(--front-palette-5b6577);
    max-width: 620px;
}

.kyc-verify-header__badge {
    --kv-badge-bg: rgba(var(--front-rgb-79-105-234), 0.10);
    --kv-badge-color: var(--front-palette-3a52c9);
    --kv-badge-dot: var(--front-palette-4f69ea);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--kv-badge-bg);
    color: var(--kv-badge-color);
    font-size: var(--front-font-size-rem-078);
    font-weight: var(--front-font-semibold);
    letter-spacing: 0.02em;
    line-height: 1;
}

.kyc-verify-header__badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--kv-badge-dot);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--kv-badge-dot) 18%, transparent);
}

.kyc-verify-header__badge--pending {
    --kv-badge-bg: rgba(var(--front-rgb-211-161-45), 0.12);
    --kv-badge-color: var(--front-palette-9a7413);
    --kv-badge-dot: var(--front-palette-d3a12d);
}

.kyc-verify-header__badge--pending .kyc-verify-header__badge-dot {
    animation: kyc-notice-mark-pulse 2s ease-in-out infinite;
}

.kyc-verify-header__badge--approved {
    --kv-badge-bg: rgba(var(--front-rgb-40-167-114), 0.12);
    --kv-badge-color: var(--front-palette-1e7f55);
    --kv-badge-dot: var(--front-palette-28a772);
}

.kyc-verify-header__badge--rejected {
    --kv-badge-bg: rgba(var(--front-rgb-213-86-86), 0.12);
    --kv-badge-color: var(--front-palette-b54141);
    --kv-badge-dot: var(--front-palette-d95656);
}

/* Status panel */
.kyc-verify-status {
    --kv-accent: var(--front-palette-4f69ea);
    --kv-accent-soft: rgba(var(--front-rgb-79-105-234), 0.12);
    --kv-bg-start: var(--front-palette-f5f7ff);
    --kv-bg-end: var(--front-palette-eef2ff);
    --kv-border: rgba(var(--front-rgb-79-105-234), 0.18);

    position: relative;
    border: 1px solid var(--kv-border);
    border-radius: 16px;
    background: linear-gradient(135deg, var(--kv-bg-start) 0%, var(--kv-bg-end) 100%);
    padding: 20px 22px;
    box-shadow: 0 1px 2px rgba(var(--front-rgb-17-24-39), 0.04), 0 6px 18px rgba(var(--front-rgb-17-24-39), 0.04);
    overflow: hidden;
}

.kyc-verify-status--pending {
    --kv-accent: var(--front-palette-d3a12d);
    --kv-accent-soft: rgba(var(--front-rgb-211-161-45), 0.14);
    --kv-bg-start: var(--front-palette-fffaf0);
    --kv-bg-end: var(--front-palette-fef4e2);
    --kv-border: rgba(var(--front-rgb-211-161-45), 0.22);
}

.kyc-verify-status--approved {
    --kv-accent: var(--front-palette-28a772);
    --kv-accent-soft: rgba(var(--front-rgb-40-167-114), 0.14);
    --kv-bg-start: var(--front-palette-f1fbf5);
    --kv-bg-end: var(--front-palette-e6f7ee);
    --kv-border: rgba(var(--front-rgb-40-167-114), 0.22);
}

.kyc-verify-status--rejected {
    --kv-accent: var(--front-palette-d95656);
    --kv-accent-soft: rgba(var(--front-rgb-213-86-86), 0.12);
    --kv-bg-start: var(--front-palette-fff5f5);
    --kv-bg-end: var(--front-palette-ffecec);
    --kv-border: rgba(var(--front-rgb-213-86-86), 0.22);
}

.kyc-verify-status::before {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: 34%;
    background: radial-gradient(120% 120% at 100% 0%, var(--kv-accent-soft) 0%, rgba(var(--front-color-white-rgb), 0) 60%);
    pointer-events: none;
}

.kyc-verify-status__lead {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.kyc-verify-status__icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--front-color-white);
    border: 1px solid var(--kv-border);
    color: var(--kv-accent);
    font-size: var(--front-font-size-rem-115);
    box-shadow: 0 2px 6px rgba(var(--front-rgb-17-24-39), 0.05);
}

.kyc-verify-status--pending .kyc-verify-status__icon i {
    animation: kyc-verify-spin 2.4s linear infinite;
}

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

.kyc-verify-status__text {
    min-width: 0;
}

.kyc-verify-status__title {
    margin: 0 0 4px;
    font-size: var(--front-font-size-rem-1);
    font-weight: var(--front-font-semibold);
    color: var(--main-color);
    letter-spacing: -0.01em;
}

.kyc-verify-status__message {
    margin: 0;
    font-size: var(--front-font-size-rem-088);
    line-height: 1.55;
    color: var(--front-palette-5b6577);
    max-width: 680px;
}

/* Timeline */
.kyc-verify-timeline {
    position: relative;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 0;
    padding: 14px 8px 6px;
    border-top: 1px dashed var(--kv-border);
}

.kyc-verify-timeline__step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-right: 8px;
}

.kyc-verify-timeline__step::after {
    content: "";
    position: absolute;
    top: 10px;
    left: calc(100% - 6px);
    right: -12px;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--kv-border) 0 4px, transparent 4px 8px);
}

.kyc-verify-timeline__step:last-child::after {
    display: none;
}

.kyc-verify-timeline__dot {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-top: 3px;
    border-radius: 50%;
    background: var(--front-color-white);
    border: 2px solid var(--kv-border);
}

.kyc-verify-timeline__step.is-active .kyc-verify-timeline__dot {
    border-color: var(--kv-accent);
    background: var(--kv-accent);
    box-shadow: 0 0 0 4px var(--kv-accent-soft);
    animation: kyc-notice-mark-pulse 2s ease-in-out infinite;
}

.kyc-verify-timeline__step.is-done .kyc-verify-timeline__dot {
    border-color: var(--kv-accent);
    background: var(--kv-accent);
}

.kyc-verify-timeline__step.is-rejected .kyc-verify-timeline__dot {
    background: var(--front-palette-d95656);
    border-color: var(--front-palette-d95656);
}

.kyc-verify-timeline__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kyc-verify-timeline__label {
    font-size: var(--front-font-size-rem-082);
    font-weight: var(--front-font-semibold);
    color: var(--main-color);
    line-height: 1.2;
}

.kyc-verify-timeline__meta {
    font-size: var(--front-font-size-rem-072);
    color: var(--front-palette-6b7383);
    line-height: 1.2;
}

/* Form card */
.kyc-verify-form-card {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--front-color-white);
    box-shadow: 0 1px 2px rgba(var(--front-rgb-17-24-39), 0.03), 0 6px 18px rgba(var(--front-rgb-17-24-39), 0.04);
    overflow: hidden;
}

.kyc-verify-form-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--front-palette-fbfcff) 0%, var(--front-palette-f6f8ff) 100%);
}

.kyc-verify-form-card__title {
    margin: 0 0 4px;
    font-size: var(--front-font-size-rem-1);
    font-weight: var(--front-font-semibold);
    color: var(--main-color);
    letter-spacing: -0.01em;
}

.kyc-verify-form-card__subtitle {
    margin: 0;
    font-size: var(--front-font-size-rem-085);
    color: var(--front-palette-5b6577);
    line-height: 1.5;
}

.kyc-verify-form-card__hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(var(--front-rgb-40-167-114), 0.10);
    color: var(--front-palette-1e7f55);
    font-size: var(--front-font-size-rem-075);
    font-weight: var(--front-font-medium);
    line-height: 1;
}

.kyc-verify-form-card__body {
    padding: 22px 24px 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* Form fields with step indicator */
.kyc-verify-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kyc-verify-field__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: var(--front-font-size-rem-092);
    font-weight: var(--front-font-semibold);
    color: var(--main-color);
    line-height: 1.3;
}

.kyc-verify-field__step {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--main-color);
    color: var(--front-color-white);
    font-size: var(--front-font-size-rem-072);
    font-weight: var(--front-font-bold);
    letter-spacing: 0;
    line-height: 1;
}

.kyc-verify-field__optional {
    margin-left: auto;
    font-size: var(--front-font-size-rem-07);
    font-weight: var(--front-font-medium);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--front-palette-8892a6);
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(var(--front-rgb-136-146-166), 0.10);
}

.kyc-verify-field__hint {
    margin: 0 0 6px;
    font-size: var(--front-font-size-rem-08);
    color: var(--front-palette-6b7383);
    line-height: 1.5;
}

/* Template details container */
.kyc-verify-template-details {
    min-height: 60px;
}

.kyc-verify-template-empty,
.kyc-verify-template-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    background: var(--front-palette-fbfcff);
    color: var(--front-palette-6b7383);
    font-size: var(--front-font-size-rem-085);
}

.kyc-verify-template-empty i,
.kyc-verify-template-loading i {
    color: var(--front-palette-8892a6);
    font-size: var(--front-font-size-rem-1);
}

.kyc-verify-template-empty--error {
    border-style: solid;
    border-color: rgba(var(--front-rgb-213-86-86), 0.3);
    background: var(--front-palette-fff7f7);
    color: var(--front-palette-b54141);
}

.kyc-verify-template-empty--error i {
    color: var(--front-palette-d95656);
}

/* Form footer */
.kyc-verify-form-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 24px;
    margin: 4px -24px 0;
    border-top: 1px solid var(--border-color);
    background: var(--front-palette-fbfcff);
}

.kyc-verify-form-card__legal {
    margin: 0;
    font-size: var(--front-font-size-rem-078);
    color: var(--front-palette-6b7383);
    line-height: 1.5;
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    max-width: 520px;
}

.kyc-verify-form-card__legal i {
    color: var(--front-palette-8892a6);
    margin-top: 2px;
}

.kyc-verify-form-card__submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: var(--front-font-semibold);
    letter-spacing: 0.01em;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.kyc-verify-form-card__submit:hover,
.kyc-verify-form-card__submit:focus {
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--front-rgb-79-105-234), 0.25);
}

/* Responsive */
@media (max-width: 767.98px) {
    .kyc-verify-header {
        align-items: flex-start;
    }

    .kyc-verify-timeline {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .kyc-verify-timeline__step::after {
        display: none;
    }

    .kyc-verify-form-card__header,
    .kyc-verify-form-card__body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .kyc-verify-form-card__footer {
        padding: 16px;
        margin: 4px -16px 0;
    }

    .kyc-verify-form-card__submit {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   User Settings pages - shared premium layout
   ============================================================ */

/* Tab navigation */
.settings-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    border-radius: 14px;
    background: var(--front-palette-f4f6fc);
    border: 1px solid var(--border-color);
}

.settings-nav__link {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 10px;
    color: var(--front-palette-4b5563);
    font-size: var(--front-font-size-rem-085);
    font-weight: var(--front-font-medium);
    line-height: 1;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.settings-nav__link:hover,
.settings-nav__link:focus-visible {
    color: var(--main-color);
    background: var(--front-color-white);
    box-shadow: 0 1px 2px rgba(var(--front-rgb-17-24-39), 0.05);
}

.settings-nav__link.is-active {
    color: var(--front-color-white);
    background: linear-gradient(180deg, var(--front-palette-6c8efb) 0%, var(--front-palette-4e72f0) 100%);
    box-shadow: 0 4px 12px rgba(var(--front-rgb-78-114-240), 0.28);
    transform: translateY(-1px);
}

.settings-nav__link.is-active .settings-nav__icon {
    color: var(--front-color-white);
}

.settings-nav__link--danger {
    color: var(--front-palette-d95656);
}

.settings-nav__link--danger:hover,
.settings-nav__link--danger:focus-visible {
    color: var(--front-palette-d95656);
    background: var(--front-palette-fff5f5);
}

.settings-nav__icon {
    display: inline-grid;
    place-items: center;
    width: 18px;
    color: inherit;
    font-size: var(--front-font-size-rem-088);
}

.settings-nav__label {
    letter-spacing: 0.01em;
}

.settings-content {
    display: block;
}

/* Section card */
.settings-section {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--front-color-white);
    margin-bottom: 20px;
    overflow: hidden;
}

.settings-section__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--front-palette-fbfcff) 0%, var(--front-palette-f6f8ff) 100%);
}

.settings-section__title {
    margin: 0 0 2px;
    font-size: var(--front-font-size-rem-095);
    font-weight: var(--front-font-semibold);
    letter-spacing: -0.01em;
    color: var(--main-color);
}

.settings-section__subtitle {
    margin: 0;
    font-size: var(--front-font-size-rem-082);
    line-height: 1.5;
    color: var(--front-palette-6b7383);
    max-width: 640px;
}

.settings-section__body {
    padding: 18px 20px;
}

/* Status badge (small chip on labels/headers) */
.settings-badge {
    --sb-bg: rgba(var(--front-rgb-136-146-166), 0.12);
    --sb-color: var(--front-palette-6b7383);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--sb-bg);
    color: var(--sb-color);
    font-size: var(--front-font-size-rem-072);
    font-weight: var(--front-font-semibold);
    line-height: 1;
    letter-spacing: 0.02em;
}

.settings-badge i {
    font-size: var(--front-font-size-rem-07);
}

.settings-badge .settings-icon-svg {
    width: 0.82rem;
    height: 0.82rem;
    flex: 0 0 auto;
}

.settings-badge--success {
    --sb-bg: rgba(var(--front-rgb-40-167-114), 0.12);
    --sb-color: var(--front-palette-1e7f55);
}

.settings-badge--danger {
    --sb-bg: rgba(var(--front-rgb-213-86-86), 0.12);
    --sb-color: var(--front-palette-b54141);
}

.settings-badge--info {
    --sb-bg: rgba(var(--front-rgb-79-105-234), 0.12);
    --sb-color: var(--front-palette-3a52c9);
}

.settings-badge--muted {
    --sb-bg: rgba(var(--front-rgb-136-146-166), 0.12);
    --sb-color: var(--front-palette-6b7383);
}

/* Inline alert */
.settings-inline-alert {
    --sia-bg: var(--front-palette-f5f7ff);
    --sia-border: rgba(var(--front-rgb-79-105-234), 0.22);
    --sia-accent: var(--front-palette-4f69ea);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--sia-border);
    border-radius: 12px;
    background: var(--sia-bg);
}

.settings-inline-alert--warning {
    --sia-bg: var(--front-palette-fffaf0);
    --sia-border: rgba(var(--front-rgb-211-161-45), 0.28);
    --sia-accent: var(--front-palette-d3a12d);
}

.settings-inline-alert--danger {
    --sia-bg: var(--front-palette-fff5f5);
    --sia-border: rgba(var(--front-rgb-213-86-86), 0.26);
    --sia-accent: var(--front-palette-d95656);
}

.settings-inline-alert__icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--front-color-white);
    border: 1px solid var(--sia-border);
    color: var(--sia-accent);
}

.settings-inline-alert__icon .settings-icon-svg {
    width: 0.95rem;
    height: 0.95rem;
}

.settings-inline-alert__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-inline-alert__title {
    font-size: var(--front-font-size-rem-088);
    font-weight: var(--front-font-semibold);
    color: var(--main-color);
    line-height: 1.3;
}

.settings-inline-alert__text {
    font-size: var(--front-font-size-rem-082);
    color: var(--front-palette-5b6577);
    line-height: 1.5;
}

.settings-inline-alert__action {
    flex: 0 0 auto;
    align-self: center;
}

/* Security tips sidebar (change password etc.) */
.settings-tips {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 18px 20px;
    background: linear-gradient(180deg, var(--front-palette-f9faff) 0%, var(--front-color-white) 100%);
    height: 100%;
}

.settings-tips__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: var(--front-font-size-rem-092);
    font-weight: var(--front-font-semibold);
    color: var(--main-color);
}

.settings-tips__title i {
    color: var(--front-palette-4e72f0);
}

.settings-tips__list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--front-palette-5b6577);
    font-size: var(--front-font-size-rem-082);
    line-height: 1.5;
}

/* Step-by-step list (2FA setup) */
.settings-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    counter-reset: settings-step;
}

.settings-steps__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px dashed var(--border-color);
}

.settings-steps__item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.settings-steps__number {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, var(--front-palette-6c8efb) 0%, var(--front-palette-4e72f0) 100%);
    color: var(--front-color-white);
    font-size: var(--front-font-size-rem-078);
    font-weight: var(--front-font-bold);
    line-height: 1;
    box-shadow: 0 2px 6px rgba(var(--front-rgb-78-114-240), 0.25);
}

.settings-steps__body {
    flex: 1 1 auto;
    min-width: 0;
}

.settings-steps__title {
    display: block;
    font-size: var(--front-font-size-rem-092);
    font-weight: var(--front-font-semibold);
    color: var(--main-color);
    margin-bottom: 4px;
}

.settings-steps__text {
    margin: 0;
    font-size: var(--front-font-size-rem-082);
    color: var(--front-palette-5b6577);
    line-height: 1.5;
}

/* 2FA scan block (QR + manual entry) */
.settings-2fa-scan {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: flex-start;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--front-palette-fbfcff);
}

.settings-2fa-scan__qr {
    padding: 6px;
    background: var(--front-color-white);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(var(--front-rgb-17-24-39), 0.05);
}

.settings-2fa-scan__qr-image {
    width: 160px;
    height: 160px;
    display: block;
}

.settings-2fa-scan__manual {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.settings-2fa-scan__row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.settings-2fa-scan__label {
    font-size: var(--front-font-size-rem-072);
    font-weight: var(--front-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--front-palette-6b7383);
    flex: 0 0 70px;
}

.settings-2fa-scan__value {
    font-size: var(--front-font-size-rem-088);
    color: var(--main-color);
    font-weight: var(--front-font-medium);
}

.settings-2fa-scan__secret {
    flex: 1 1 auto;
    padding: 6px 10px;
    background: var(--front-color-white);
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    font-family: var(--front-font-mono);
    font-size: var(--front-font-size-rem-08);
    color: var(--main-color);
    word-break: break-all;
}

.settings-2fa-scan__copy {
    flex: 0 0 auto;
    border-radius: 8px;
}

.settings-2fa-scan__copy-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.settings-2fa-scan__copy-icon .settings-icon-svg {
    width: 0.95rem;
    height: 0.95rem;
}

.settings-2fa-code {
    max-width: 180px;
    letter-spacing: 0.4em;
    text-align: center;
    font-size: var(--front-font-size-rem-1);
    font-weight: var(--front-font-semibold);
    font-variant-numeric: tabular-nums;
}

/* Status card (2FA enable/disable banner) */
.settings-status-card {
    --ssc-bg-start: var(--front-palette-f5f7ff);
    --ssc-bg-end: var(--front-palette-eef2ff);
    --ssc-border: rgba(var(--front-rgb-79-105-234), 0.18);
    --ssc-accent: var(--front-palette-4f69ea);

    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border: 1px solid var(--ssc-border);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--ssc-bg-start) 0%, var(--ssc-bg-end) 100%);
    box-shadow: 0 1px 2px rgba(var(--front-rgb-17-24-39), 0.04);
}

.settings-status-card--enabled {
    --ssc-bg-start: var(--front-palette-f1fbf5);
    --ssc-bg-end: var(--front-palette-e6f7ee);
    --ssc-border: rgba(var(--front-rgb-40-167-114), 0.24);
    --ssc-accent: var(--front-palette-28a772);
}

.settings-status-card--disabled {
    --ssc-bg-start: var(--front-palette-fffaf0);
    --ssc-bg-end: var(--front-palette-fef4e2);
    --ssc-border: rgba(var(--front-rgb-211-161-45), 0.24);
    --ssc-accent: var(--front-palette-d3a12d);
}

.settings-status-card__icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--front-color-white);
    border: 1px solid var(--ssc-border);
    color: var(--ssc-accent);
    font-size: var(--front-font-size-rem-115);
}

.settings-status-card__icon .settings-icon-svg {
    width: 1.15rem;
    height: 1.15rem;
}

.settings-status-card__body {
    flex: 1 1 280px;
    min-width: 0;
}

.settings-status-card__title {
    margin: 0 0 2px;
    font-size: var(--front-font-size-rem-095);
    font-weight: var(--front-font-semibold);
    color: var(--main-color);
    letter-spacing: -0.01em;
}

.settings-status-card__text {
    margin: 0;
    font-size: var(--front-font-size-rem-083);
    color: var(--front-palette-5b6577);
    line-height: 1.5;
}

/* Security center */
.security-center-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.security-check-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 100%;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--front-color-white);
}

.security-check-card__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(var(--front-rgb-79-105-234), 0.1);
    color: var(--front-palette-4f69ea);
    font-size: var(--front-font-size-rem-105);
}

.security-check-card__icon .security-icon-svg,
.security-activity-item__icon .security-icon-svg {
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 auto;
    margin: 0 !important;
}

.security-check-card.is-complete .security-check-card__icon {
    background: rgba(var(--front-rgb-40-167-114), 0.12);
    color: var(--front-palette-28a772);
}

.security-check-card.needs-action .security-check-card__icon {
    background: rgba(var(--front-rgb-213-86-86), 0.1);
    color: var(--front-palette-d95656);
}

.security-check-card__body {
    flex: 1 1 auto;
}

.security-check-card__title {
    margin: 0 0 4px;
    color: var(--main-color);
    font-size: var(--front-font-size-rem-092);
    font-weight: var(--front-font-semibold);
}

.security-check-card__text {
    margin: 0;
    color: var(--front-palette-6b7383);
    font-size: var(--front-font-size-rem-08);
    line-height: 1.5;
}

.security-check-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.security-check-card__action {
    border-radius: 9px;
    font-size: var(--front-font-size-rem-075);
    font-weight: var(--front-font-semibold);
    color: var(--main-color);
}

.security-current-list {
    display: grid;
    gap: 10px;
    margin: 0;
}

.security-current-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--front-rgb-136-146-166), 0.16);
}

.security-current-list div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.security-current-list dt,
.security-current-list dd {
    margin: 0;
    font-size: var(--front-font-size-rem-08);
}

.security-current-list dt {
    color: var(--front-palette-6b7383);
    font-weight: var(--front-font-medium);
}

.security-current-list dd {
    color: var(--main-color);
    font-weight: var(--front-font-semibold);
    text-align: right;
    word-break: break-word;
}

.security-center-session-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    font-weight: var(--front-font-semibold);
}

.security-activity-list {
    display: grid;
    gap: 7px;
}

.security-activity-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 8px 9px;
    border: 1px solid rgba(var(--front-rgb-136-146-166), 0.18);
    border-radius: 10px;
    background: var(--front-palette-fbfcff);
}

.security-activity-item__icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--front-color-white);
    color: var(--front-palette-4f69ea);
    border: 1px solid rgba(var(--front-rgb-79-105-234), 0.14);
}

.security-activity-item__body {
    flex: 1 1 auto;
    min-width: 0;
}

.security-activity-item__title {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 0 1px;
    color: var(--main-color);
    font-size: var(--front-font-size-rem-08);
    font-weight: var(--front-font-semibold);
    line-height: 1.2;
}

.security-activity-item__title span {
    color: var(--front-palette-6b7383);
    font-size: var(--front-font-size-rem-07);
    font-weight: var(--front-font-medium);
}

.security-activity-item__meta {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin: 0;
    color: var(--front-palette-6b7383);
    font-size: var(--front-font-size-rem-072);
    line-height: 1.25;
}

.security-activity-item__time {
    flex: 0 0 auto;
    color: var(--front-palette-8892a6);
    font-size: var(--front-font-size-rem-07);
    font-weight: var(--front-font-medium);
    text-align: right;
    white-space: nowrap;
}

/* Sticky-ish actions footer */
.settings-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding: 16px 20px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--front-palette-fbfcff);
}

.settings-actions--hint-only {
    justify-content: flex-start;
    padding: 12px 16px;
}

.settings-actions__hint {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--front-font-size-rem-078);
    color: var(--front-palette-6b7383);
    line-height: 1.4;
    max-width: 520px;
}

.settings-actions__hint i {
    color: var(--front-palette-8892a6);
}

.settings-actions__submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    font-weight: var(--front-font-semibold);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.settings-actions__submit:hover,
.settings-actions__submit:focus {
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--front-rgb-79-105-234), 0.25);
}

/* Wallet PIN settings */
.wallet-pin-status {
    position: relative;
    overflow: hidden;
}

.wallet-pin-status::after {
    content: "";
    position: absolute;
    inset-inline-end: -34px;
    inset-block-start: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(var(--front-rgb-79-105-234), 0.08);
    pointer-events: none;
}

.wallet-pin-card {
    box-shadow: 0 12px 30px rgba(var(--front-rgb-17-24-39), 0.05);
}

.wallet-pin-card__header {
    background:
        linear-gradient(135deg, rgba(var(--front-rgb-79-105-234), 0.08) 0%, rgba(var(--front-rgb-40-167-114), 0.08) 100%),
        var(--front-color-white);
}

.wallet-pin-card__body {
    padding-top: 20px;
}

.wallet-pin-field .form-label {
    margin-bottom: 8px;
    font-size: var(--front-font-size-rem-083);
    font-weight: var(--front-font-semibold);
    color: var(--main-color);
}

.wallet-pin-input-wrap {
    position: relative;
}

.wallet-pin-input-wrap__icon {
    position: absolute;
    inset-inline-start: 14px;
    inset-block-start: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: var(--front-palette-6b7383);
    font-size: var(--front-font-size-rem-088);
    pointer-events: none;
}

.wallet-pin-input-wrap .form-control {
    min-height: 48px;
    padding-inline-start: 42px;
    border-radius: 12px;
    border-color: rgba(var(--front-rgb-136-146-166), 0.22);
    background: var(--front-palette-fbfcff);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.wallet-pin-input-wrap .form-control:focus {
    background: var(--front-color-white);
    border-color: rgba(var(--front-rgb-79-105-234), 0.52);
    box-shadow: 0 0 0 4px rgba(var(--front-rgb-79-105-234), 0.1);
}

.wallet-pin-input {
    font-family: var(--front-font-mono);
    font-weight: var(--front-font-semibold);
    letter-spacing: 0.22em;
    font-variant-numeric: tabular-nums;
}

.wallet-pin-tips {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.wallet-pin-tips__visual {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid rgba(var(--front-rgb-79-105-234), 0.14);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--front-palette-f5f7ff) 0%, var(--front-palette-fbfcff) 100%);
}

.wallet-pin-tips__key {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--front-palette-4f69ea);
    background: var(--front-color-white);
    box-shadow: 0 8px 18px rgba(var(--front-rgb-79-105-234), 0.12);
}

.wallet-pin-tips__dots {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.wallet-pin-tips__dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--front-palette-4f69ea);
    box-shadow: 0 0 0 4px rgba(var(--front-rgb-79-105-234), 0.08);
}

.wallet-pin-errors {
    margin: 4px 0 0;
    padding-left: 17px;
    color: var(--front-palette-5b6577);
    font-size: var(--front-font-size-rem-082);
}

.wallet-pin-actions {
    margin-top: 0;
}

.wallet-pin-reset-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--front-palette-4f69ea);
    font-size: var(--front-font-size-rem-083);
    font-weight: var(--front-font-semibold);
}

.wallet-pin-reset-link:hover,
.wallet-pin-reset-link:focus {
    color: var(--front-color-primary-hover);
    text-decoration: underline;
}

/* KYC template field group (inside verify form) */
.kyc-template-fields {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--front-palette-fbfcff);
    padding: 16px;
}

.kyc-template-fields__header {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px dashed var(--border-color);
}

.kyc-template-fields__title {
    margin: 0 0 2px;
    font-size: var(--front-font-size-rem-092);
    font-weight: var(--front-font-semibold);
    color: var(--main-color);
}

.kyc-template-fields__description {
    margin: 0;
    font-size: var(--front-font-size-rem-08);
    color: var(--front-palette-6b7383);
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 991.98px) {
    .settings-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .settings-nav__link {
        flex: 0 0 auto;
    }

    .security-center-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .settings-section__header,
    .settings-section__body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .settings-actions {
        padding: 14px 16px;
    }

    .settings-actions__submit {
        width: 100%;
        justify-content: center;
    }

    .settings-2fa-scan {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .settings-2fa-scan__manual {
        width: 100%;
    }

    .security-activity-item {
        align-items: flex-start;
    }

    .security-activity-item__time {
        text-align: left;
    }
}

/* Settings workspace - premium account UI */
.settings-pro-card.single-form-card {
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.12);
    border-radius: 18px;
    background: linear-gradient(180deg, var(--front-color-white) 0%, var(--front-palette-f8faff) 100%);
    box-shadow: none;
    overflow: hidden;
}

.settings-pro-card .user-feature-header {
    margin: 10px 10px 0;
    border-radius: 14px;
}

.settings-shell {
    padding: 14px;
    background:
        radial-gradient(circle at 8% 0%, rgba(var(--front-color-primary-rgb), 0.06), transparent 28%),
        linear-gradient(180deg, rgba(var(--front-color-primary-rgb), 0.025), rgba(var(--front-color-white-rgb), 0.96));
}

.settings-shell__grid {
    display: grid;
    grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
    gap: 14px;
    align-items: flex-start;
}

.settings-sidebar {
    position: sticky;
    top: 0;
    display: grid;
    gap: 12px;
}

.settings-profile-card,
.settings-content--panel {
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.1);
    border-radius: 16px;
    background: rgba(var(--front-color-white-rgb), 0.92);
    box-shadow: none;
}

.settings-profile-card {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px 14px;
    align-items: center;
    padding: 14px;
    overflow: hidden;
}

.settings-profile-card::after {
    content: "";
    position: absolute;
    top: -38px;
    right: -34px;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background: rgba(var(--front-color-primary-rgb), 0.08);
    pointer-events: none;
}

.settings-profile-card__avatar,
.settings-profile-hero__avatar {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--front-palette-5b8df5), var(--front-palette-1255b0));
    color: var(--front-color-white);
    font-size: var(--front-font-lg);
    font-weight: var(--front-font-bold);
    line-height: 1;
    overflow: hidden;
    box-shadow: none;
}

.settings-profile-card__avatar img,
.settings-profile-hero__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-profile-card__body,
.settings-profile-card__role {
    position: relative;
    z-index: 1;
}

.settings-profile-card__eyebrow,
.settings-profile-hero__eyebrow,
.settings-content__eyebrow {
    display: inline-flex;
    color: var(--front-palette-8892a6);
    font-size: 9px;
    font-weight: var(--front-font-extrabold);
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.settings-profile-card__name {
    margin: 6px 0 2px;
    color: var(--front-palette-101828);
    font-size: var(--front-font-size-rem-105);
    font-weight: var(--front-font-bold);
    line-height: 1.15;
}

.settings-profile-card__meta {
    margin: 0;
    color: var(--front-palette-667085);
    font-size: var(--front-font-size-rem-078);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.settings-profile-card__role {
    position: relative;
    z-index: 1;
    display: inline-flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(var(--front-color-primary-rgb), 0.08);
    color: var(--main-color);
    font-size: var(--front-font-size-rem-074);
    font-weight: var(--front-font-bold);
    line-height: 1;
}

.settings-profile-card__chips,
.settings-profile-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.settings-pro-card .settings-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 8px;
    border-radius: 16px;
    background: rgba(var(--front-color-white-rgb), 0.92);
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.1);
    box-shadow: none;
}

.settings-pro-card .settings-nav__link {
    position: relative;
    min-height: 54px;
    justify-content: flex-start;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
}

.settings-pro-card .settings-nav__icon {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: rgba(var(--front-color-primary-rgb), 0.08);
    color: var(--main-color);
}

.settings-nav__body {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.settings-nav__hint {
    color: var(--front-palette-8892a6);
    font-size: 10.5px;
    font-weight: var(--front-font-medium);
    line-height: 1.25;
    white-space: normal;
}

.settings-nav__meta {
    max-width: 92px;
    margin-left: auto;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(var(--front-rgb-136-146-166), 0.12);
    color: var(--front-palette-667085);
    font-size: 10px;
    font-weight: var(--front-font-bold);
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-nav__meta.is-positive {
    background: rgba(var(--front-color-success-rgb), 0.12);
    color: var(--front-palette-28a772);
}

.settings-nav__meta.is-muted {
    background: rgba(var(--front-rgb-136-146-166), 0.12);
    color: var(--front-palette-8892a6);
}

.settings-pro-card .settings-nav__link.is-active {
    color: var(--main-color);
    border-color: rgba(var(--front-color-primary-rgb), 0.16);
    background: rgba(var(--front-color-primary-rgb), 0.1);
    box-shadow: none;
}

.settings-pro-card .settings-nav__link.is-active .settings-nav__icon {
    background: var(--main-color);
    color: var(--front-color-white);
}

.settings-pro-card .settings-nav__link.is-active .settings-nav__hint {
    color: var(--front-palette-667085);
}

.settings-pro-card .settings-nav__link.is-active .settings-nav__meta {
    background: rgba(var(--front-color-white-rgb), 0.72);
}

.settings-nav__active-dot {
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--main-color);
    box-shadow: none;
}

.settings-content--panel {
    min-width: 0;
    padding: 16px;
}

.settings-content__scroll {
    min-height: 0;
}

.settings-content__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 42px;
    margin-bottom: 8px;
    padding: 0 0 7px;
    border-bottom: 1px solid rgba(var(--front-rgb-136-146-166), 0.16);
}

.settings-content__heading {
    min-width: 0;
}

.settings-content__title {
    margin: 2px 0 0;
    color: var(--front-palette-101828);
    font-size: var(--front-font-size-rem-098);
    font-weight: var(--front-font-bold);
    line-height: 1.08;
}

.settings-content__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.settings-content__badge {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(var(--front-color-primary-rgb), 0.08);
    color: var(--main-color);
    font-size: var(--front-font-size-rem-072);
    font-weight: var(--front-font-semibold);
    line-height: 1;
}

.settings-heading-action {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 11px;
    border-radius: 8px;
    font-size: var(--front-font-size-rem-074);
    font-weight: var(--front-font-bold);
    line-height: 1;
    box-shadow: none;
}

.settings-heading-action i {
    font-size: var(--front-font-size-rem-072);
}

@media (min-width: 1200px) {
    #mainArea.dashboard-main-area .dashboard-main-content:has(.settings-pro-card) {
        overflow: hidden;
    }

    .settings-pro-card.single-form-card {
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .settings-pro-card .settings-shell {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    .settings-shell__grid {
        height: 100%;
        min-height: 0;
        align-items: stretch;
    }

    .settings-sidebar {
        align-self: start;
        max-height: 100%;
        overflow: hidden;
    }

    .settings-content--panel {
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .settings-content__header {
        flex: 0 0 auto;
    }

    .settings-content__scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 4px;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(var(--front-rgb-136-146-166), 0.35) transparent;
    }

    .settings-content__scroll::-webkit-scrollbar {
        width: 6px;
    }

    .settings-content__scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .settings-content__scroll::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(var(--front-rgb-136-146-166), 0.35);
    }
}

.settings-profile-hero {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.1);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--front-color-success-rgb), 0.1), transparent 34%),
        linear-gradient(135deg, var(--front-palette-fbfcff), var(--front-color-white));
}

.settings-profile-hero__avatar {
    width: 64px;
    height: 64px;
    border-radius: 18px;
}

.settings-profile-hero__name {
    margin: 6px 0 4px;
    color: var(--front-palette-101828);
    font-size: var(--front-font-size-rem-125);
    font-weight: var(--front-font-bold);
    line-height: 1.15;
}

.settings-profile-hero__text {
    margin: 0 0 10px;
    color: var(--front-palette-667085);
    font-size: var(--front-font-size-rem-085);
    line-height: 1.45;
}

.settings-section {
    border-color: rgba(var(--front-color-primary-rgb), 0.1);
    border-radius: 16px;
    box-shadow: none;
}

.settings-section__header {
    justify-content: flex-start;
    align-items: center;
    padding: 13px 16px;
    background: linear-gradient(135deg, var(--front-palette-fbfcff), var(--front-color-white));
}

.settings-section__header > div {
    flex: 1 1 260px;
    min-width: 0;
}

.settings-section__icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    background: rgba(var(--front-color-primary-rgb), 0.08);
    color: var(--main-color);
    font-size: 15px;
}

.settings-content--panel .form-control,
.settings-content--panel .form-select {
    min-height: 42px;
    border-color: rgba(var(--front-rgb-136-146-166), 0.24);
    border-radius: 10px;
    background-color: var(--front-palette-fbfcff);
    font-size: var(--front-font-size-rem-088);
}

.settings-content--panel .form-control:focus,
.settings-content--panel .form-select:focus {
    border-color: rgba(var(--front-color-primary-rgb), 0.36) !important;
    background-color: var(--front-color-white);
    box-shadow: 0 0 0 3px rgba(var(--front-color-primary-rgb), 0.08) !important;
}

.settings-content--panel .form-label {
    color: var(--front-palette-344054);
    font-size: var(--front-font-size-rem-082);
    font-weight: var(--front-font-semibold);
}

.kyc-verify-hero {
    --kvh-accent: var(--main-color);
    --kvh-accent-rgb: var(--front-color-primary-rgb);
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 15px;
    border: 1px solid rgba(var(--kvh-accent-rgb), 0.18);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--kvh-accent-rgb), 0.12), transparent 34%),
        linear-gradient(135deg, var(--front-palette-fbfcff), var(--front-color-white));
    box-shadow: none;
}

.kyc-verify-hero--approved {
    --kvh-accent: var(--front-palette-28a772);
    --kvh-accent-rgb: var(--front-color-success-rgb);
}

.kyc-verify-hero--pending {
    --kvh-accent: var(--front-palette-d3a12d);
    --kvh-accent-rgb: var(--front-rgb-211-161-45);
}

.kyc-verify-hero--rejected {
    --kvh-accent: var(--front-palette-d95656);
    --kvh-accent-rgb: var(--front-rgb-213-86-86);
}

.kyc-verify-hero__icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(var(--kvh-accent-rgb), 0.12);
    color: var(--kvh-accent);
    font-size: 20px;
}

.kyc-verify-hero__eyebrow {
    display: inline-flex;
    color: var(--front-palette-8892a6);
    font-size: 10px;
    font-weight: var(--front-font-extrabold);
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.kyc-verify-hero__title {
    margin: 5px 0 4px;
    color: var(--front-palette-101828);
    font-size: var(--front-font-size-rem-12);
    font-weight: var(--front-font-bold);
    line-height: 1.15;
}

.kyc-verify-hero__subtitle {
    margin: 0;
    max-width: 680px;
    color: var(--front-palette-667085);
    font-size: var(--front-font-size-rem-088);
    line-height: 1.5;
}

.kyc-verify-hero__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(var(--kvh-accent-rgb), 0.1);
    color: var(--kvh-accent);
    font-size: var(--front-font-size-rem-078);
    font-weight: var(--front-font-bold);
    line-height: 1;
    white-space: nowrap;
}

.kyc-verify-hero__meta {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding-top: 2px;
}

.kyc-verify-hero__meta-item {
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid rgba(var(--front-rgb-136-146-166), 0.12);
    border-radius: 12px;
    background: rgba(var(--front-color-white-rgb), 0.72);
}

.kyc-verify-hero__meta-item span,
.kyc-verify-hero__meta-item strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kyc-verify-hero__meta-item span {
    color: var(--front-palette-8892a6);
    font-size: 10px;
    font-weight: var(--front-font-bold);
    line-height: 1;
    text-transform: uppercase;
}

.kyc-verify-hero__meta-item strong {
    margin-top: 6px;
    color: var(--front-palette-344054);
    font-size: var(--front-font-size-rem-085);
    font-weight: var(--front-font-bold);
    line-height: 1.2;
}

.kyc-verify-status {
    border-radius: 18px;
    box-shadow: none;
}

.kyc-verify-status--timeline {
    padding: 16px;
    background: var(--front-color-white);
}

.kyc-verify-timeline-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.kyc-verify-timeline-head__eyebrow {
    display: inline-flex;
    color: var(--front-palette-8892a6);
    font-size: 10px;
    font-weight: var(--front-font-extrabold);
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.kyc-verify-timeline-head__title {
    margin: 5px 0 0;
    color: var(--front-palette-101828);
    font-size: var(--front-font-size-rem-1);
    font-weight: var(--front-font-bold);
    line-height: 1.2;
}

.kyc-verify-timeline {
    padding: 14px;
    border: 1px solid rgba(var(--front-rgb-136-146-166), 0.12);
    border-radius: 14px;
    background: rgba(var(--front-color-white-rgb), 0.68);
}

.settings-content--panel .notification-card,
.settings-content--panel .settings-status-card,
.settings-content--panel .security-check-card,
.settings-content--panel .settings-tips,
.settings-content--panel .phone-security-step,
.settings-content--panel .wallet-pin-card {
    border-color: rgba(var(--front-color-primary-rgb), 0.1);
    border-radius: 16px;
    box-shadow: none;
}

.settings-content--panel .notification-header,
.settings-content--panel .settings-section__header,
.settings-content--panel .kyc-verify-form-card__header {
    padding: 13px 16px;
    background: linear-gradient(135deg, var(--front-palette-fbfcff), var(--front-color-white));
}

.settings-content--panel .settings-section__body,
.settings-content--panel .kyc-verify-form-card__body {
    padding: 16px;
}

.settings-content--panel .notification-header__title,
.settings-content--panel .settings-status-card__title,
.settings-content--panel .security-check-card__title,
.settings-content--panel .settings-tips__title {
    color: var(--front-palette-101828);
    font-size: var(--front-font-size-rem-105);
    letter-spacing: 0;
}

.settings-content--panel .settings-status-card {
    padding: 14px 16px;
}

/* Security suite tabs */
.settings-content--panel .security-suite-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
    padding: 8px;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.1);
    border-radius: 16px;
    background: linear-gradient(135deg, var(--front-palette-f8faff), var(--front-color-white));
}

.settings-content--panel .security-suite-tabs__item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 48px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--front-palette-5b6577);
    text-decoration: none;
}

.settings-content--panel .security-suite-tabs__item:hover,
.settings-content--panel .security-suite-tabs__item:focus {
    border-color: rgba(var(--front-color-primary-rgb), 0.12);
    background: rgba(var(--front-color-primary-rgb), 0.06);
    color: var(--front-color-primary);
    text-decoration: none;
}

.settings-content--panel .security-suite-tabs__item.is-active {
    border-color: rgba(var(--front-color-primary-rgb), 0.22);
    background: var(--front-color-primary);
    color: var(--front-color-white);
}

.settings-content--panel .security-suite-tabs__icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 10px;
    background: rgba(var(--front-color-primary-rgb), 0.08);
    color: var(--front-color-primary);
}

.settings-content--panel .security-suite-tabs__item.is-active .security-suite-tabs__icon {
    background: rgba(var(--front-color-white-rgb), 0.18);
    color: var(--front-color-white);
}

.settings-content--panel .security-suite-tabs__copy {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.settings-content--panel .security-suite-tabs__label {
    font-size: var(--front-font-size-rem-078);
    font-weight: var(--front-font-bold);
    line-height: 1.15;
    white-space: nowrap;
}

.settings-content--panel .security-suite-tabs__hint {
    overflow: hidden;
    color: currentColor;
    font-size: var(--front-font-size-rem-068);
    font-weight: var(--front-font-medium);
    line-height: 1.15;
    opacity: 0.72;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-content--panel .settings-credential-stack {
    display: grid;
    gap: 16px;
}

.settings-content--panel .credential-status-card {
    margin-bottom: 0;
}

.settings-content--panel .credential-password-card,
.settings-content--panel .credential-tips {
    border-color: rgba(var(--front-color-primary-rgb), 0.1);
    border-radius: 16px;
    box-shadow: none;
}

.settings-content--panel .credential-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--front-color-primary-rgb), 0.16), transparent);
}

/* Security center - premium compact workspace */
.settings-content--panel .security-center-hero {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(var(--front-color-primary-rgb), 0.06), rgba(var(--front-color-white-rgb), 0.92)),
        linear-gradient(180deg, var(--front-color-white), var(--front-palette-f8faff));
}

.settings-content--panel .security-center-hero .settings-status-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
}

.settings-content--panel .security-center-hero .settings-status-card__body {
    flex-basis: auto;
}

.settings-content--panel .security-center-hero .settings-status-card__title {
    margin-bottom: 2px;
    font-size: var(--front-font-size-rem-095);
}

.settings-content--panel .security-center-hero .settings-status-card__text {
    max-width: 560px;
    font-size: var(--front-font-size-rem-078);
    line-height: 1.45;
}

.settings-content--panel .security-readiness-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 140px;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.1);
    border-radius: 14px;
    background:
        linear-gradient(90deg, rgba(var(--front-color-primary-rgb), 0.045), rgba(var(--front-color-white-rgb), 0.92)),
        var(--front-color-white);
}

.settings-content--panel .security-readiness-strip__item {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.settings-content--panel .security-readiness-strip__label,
.settings-content--panel .security-readiness-strip__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-content--panel .security-readiness-strip__label {
    color: var(--front-palette-8892a6);
    font-size: var(--front-font-size-rem-068);
    font-weight: var(--front-font-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.settings-content--panel .security-readiness-strip__value {
    color: var(--front-palette-101828);
    font-size: var(--front-font-size-rem-082);
    font-weight: var(--front-font-bold);
}

.settings-content--panel .security-readiness-strip__meter {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(var(--front-color-primary-rgb), 0.1);
}

.settings-content--panel .security-readiness-strip__meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--front-color-primary), var(--front-palette-28a772));
}

.settings-content--panel .settings-current-plan {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.1);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0, rgba(var(--front-color-primary-rgb), 0.08), transparent 34%),
        linear-gradient(180deg, var(--front-color-white), var(--front-palette-fbfcff));
    box-shadow: none;
}

.settings-content--panel .settings-current-plan__hero {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.settings-content--panel .settings-current-plan__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(var(--front-color-primary-rgb), 0.1);
    color: var(--front-color-primary);
    font-size: var(--front-font-size-rem-105);
}

.settings-content--panel .settings-current-plan--earn .settings-current-plan__icon {
    background: rgba(var(--front-color-success-rgb), 0.12);
    color: var(--front-palette-28a772);
}

.settings-content--panel .settings-current-plan__copy {
    min-width: 0;
}

.settings-content--panel .settings-current-plan__eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--front-palette-8892a6);
    font-size: var(--front-font-size-rem-068);
    font-weight: var(--front-font-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.settings-content--panel .settings-current-plan__title {
    margin: 0;
    color: var(--front-palette-101828);
    font-size: var(--front-font-size-rem-115);
    font-weight: var(--front-font-bold);
    line-height: 1.22;
}

.settings-content--panel .settings-current-plan__text {
    max-width: 620px;
    margin: 3px 0 0;
    color: var(--front-palette-667085);
    font-size: var(--front-font-size-rem-078);
    line-height: 1.4;
}

.settings-content--panel .settings-current-plan__badge {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    justify-self: end;
    padding: 0 11px;
    border-radius: 999px;
    font-size: var(--front-font-size-rem-074);
    font-weight: var(--front-font-bold);
    white-space: nowrap;
}

.settings-content--panel .settings-current-plan__badge--success {
    background: rgba(var(--front-color-success-rgb), 0.12);
    color: var(--front-palette-15803d);
}

.settings-content--panel .settings-current-plan__metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.settings-content--panel .settings-current-plan__metric {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(var(--front-rgb-136-146-166), 0.12);
    border-radius: 12px;
    background: rgba(var(--front-color-white-rgb), 0.72);
}

.settings-content--panel .settings-current-plan__metric span,
.settings-content--panel .settings-current-plan__metric strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-content--panel .settings-current-plan__metric span {
    margin-bottom: 4px;
    color: var(--front-palette-8892a6);
    font-size: var(--front-font-size-rem-068);
    font-weight: var(--front-font-bold);
    text-transform: uppercase;
}

.settings-content--panel .settings-current-plan__metric strong {
    color: var(--front-palette-101828);
    font-size: var(--front-font-size-rem-082);
    font-weight: var(--front-font-bold);
}

.settings-content--panel .settings-current-plan__features {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.settings-content--panel .settings-current-plan__features span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(var(--front-color-primary-rgb), 0.07);
    color: var(--front-palette-344054);
    font-size: var(--front-font-size-rem-074);
    font-weight: var(--front-font-semibold);
}

.settings-content--panel .settings-current-plan__features i {
    color: var(--front-palette-28a772);
    font-size: var(--front-font-size-rem-068);
}

.settings-content--panel .settings-active-list {
    display: grid;
    gap: 7px;
}

.settings-content--panel .settings-active-list__item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid rgba(var(--front-rgb-136-146-166), 0.12);
    border-radius: 12px;
    background: rgba(var(--front-color-white-rgb), 0.78);
}

.settings-content--panel .settings-active-list__icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(var(--front-color-success-rgb), 0.12);
    color: var(--front-palette-28a772);
}

.settings-content--panel .settings-active-list__body {
    min-width: 0;
}

.settings-content--panel .settings-active-list__body h6 {
    margin: 0 0 2px;
    color: var(--front-palette-101828);
    font-size: var(--front-font-size-rem-082);
    font-weight: var(--front-font-bold);
}

.settings-content--panel .settings-active-list__body p,
.settings-content--panel .settings-active-list__meta span {
    margin: 0;
    color: var(--front-palette-667085);
    font-size: var(--front-font-size-rem-072);
    line-height: 1.25;
}

.settings-content--panel .settings-active-list__meta {
    text-align: right;
    white-space: nowrap;
}

.settings-content--panel .settings-active-list__meta strong {
    display: block;
    color: var(--front-palette-101828);
    font-size: var(--front-font-size-rem-076);
    font-weight: var(--front-font-bold);
}

.settings-content--panel .settings-current-plan__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(var(--front-rgb-136-146-166), 0.12);
}

.settings-content--panel .settings-current-plan__footer span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--front-palette-667085);
    font-size: var(--front-font-size-rem-074);
    line-height: 1.35;
}

.settings-content--panel .settings-current-plan__footer span i {
    color: var(--front-color-primary);
}

.settings-content--panel .settings-current-plan__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--front-color-primary);
    font-size: var(--front-font-size-rem-076);
    font-weight: var(--front-font-bold);
    white-space: nowrap;
    text-decoration: none;
}

.settings-content--panel .settings-current-plan__link:hover {
    color: var(--main-color);
}

.settings-content--panel .security-center-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.settings-content--panel .security-check-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 92px;
    padding: 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, var(--front-color-white), var(--front-palette-fbfcff));
}

.settings-content--panel .security-check-card__icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
}

.settings-content--panel .security-check-card__title {
    margin-bottom: 3px;
    font-size: var(--front-font-size-rem-09);
}

.settings-content--panel .security-check-card__text {
    display: -webkit-box;
    font-size: var(--front-font-size-rem-076);
    line-height: 1.42;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.settings-content--panel .security-check-card__footer {
    justify-content: flex-end;
    align-self: stretch;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
}

.settings-content--panel .security-check-card__action {
    min-height: 32px;
    padding: 7px 10px;
    border-radius: 9px;
    background: rgba(var(--front-color-primary-rgb), 0.08);
    color: var(--front-color-primary);
}

.settings-content--panel .security-check-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    color: var(--front-palette-6b7383);
    font-size: var(--front-font-size-rem-072);
    font-weight: var(--front-font-bold);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.settings-content--panel .security-check-toggle:hover,
.settings-content--panel .security-check-toggle:focus {
    color: var(--front-color-primary);
    text-decoration: none;
}

.settings-content--panel .security-check-toggle__track {
    position: relative;
    width: 42px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border-radius: 999px;
    background: rgba(var(--front-rgb-213-86-86), 0.14);
    border: 1px solid rgba(var(--front-rgb-213-86-86), 0.18);
}

.settings-content--panel .security-check-toggle__thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--front-color-white);
    box-shadow: 0 2px 5px rgba(var(--front-rgb-17-24-39), 0.16);
    transition: transform 0.2s ease;
}

.settings-content--panel .security-check-toggle.is-on {
    color: var(--front-palette-28a772);
}

.settings-content--panel .security-check-toggle.is-on .security-check-toggle__track {
    background: rgba(var(--front-rgb-40-167-114), 0.16);
    border-color: rgba(var(--front-rgb-40-167-114), 0.2);
}

.settings-content--panel .security-check-toggle.is-on .security-check-toggle__thumb {
    transform: translateX(18px);
}

.settings-content--panel .security-check-toggle.is-off {
    color: var(--front-palette-d95656);
}

.settings-content--panel .security-access-grid {
    align-items: stretch;
}

.settings-content--panel .security-access-grid > [class*="col-"] {
    display: flex;
}

.settings-content--panel .security-session-card,
.settings-content--panel .security-center-summary,
.settings-content--panel .security-activity-section {
    border-color: rgba(var(--front-color-primary-rgb), 0.1);
    border-radius: 16px;
    background: var(--front-color-white);
    box-shadow: none;
}

.settings-content--panel .security-session-card,
.settings-content--panel .security-center-summary {
    width: 100%;
    height: 100%;
    margin-bottom: 0;
}

.settings-content--panel .security-session-card {
    display: flex;
    flex-direction: column;
}

.settings-content--panel .security-session-card .settings-section__body {
    flex: 1 1 auto;
}

.settings-content--panel .security-session-card form {
    width: 100%;
}

.settings-content--panel .security-current-list {
    gap: 0;
}

.settings-content--panel .security-current-list div {
    padding: 9px 0;
}

.settings-content--panel .security-current-list div:first-child {
    padding-top: 0;
}

.settings-content--panel .security-current-list dt,
.settings-content--panel .security-current-list dd {
    font-size: var(--front-font-size-rem-076);
}

.settings-content--panel .security-center-session-button {
    min-height: 36px;
    gap: 7px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: var(--front-font-size-rem-085);
}

.settings-content--panel .security-center-session-button__icon {
    width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 6px;
    background: rgba(var(--front-color-white-rgb), 0.18);
    font-size: var(--front-font-size-rem-072);
    line-height: 1;
}

.settings-content--panel .security-activity-section {
    margin-top: 12px;
}

.settings-content--panel .security-activity-list {
    gap: 6px;
}

.settings-content--panel .security-activity-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 44px;
    padding: 7px 8px;
    border-color: rgba(var(--front-rgb-136-146-166), 0.14);
    border-radius: 10px;
    background: linear-gradient(180deg, var(--front-color-white), var(--front-palette-fbfcff));
}

.settings-content--panel .security-activity-item__icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

.settings-content--panel .security-activity-item__icon .security-icon-svg {
    width: 0.9rem;
    height: 0.9rem;
}

.settings-content--panel .security-activity-item__title {
    gap: 5px;
    margin-bottom: 1px;
    font-size: var(--front-font-size-rem-078);
    line-height: 1.18;
}

.settings-content--panel .security-activity-item__title span,
.settings-content--panel .security-activity-item__meta,
.settings-content--panel .security-activity-item__time {
    font-size: var(--front-font-size-rem-068);
}

.settings-content--panel .security-activity-item__meta {
    gap: 4px;
    line-height: 1.22;
}

.settings-content--panel .security-activity-item__time {
    align-self: center;
    color: var(--front-palette-8892a6);
    white-space: nowrap;
}

.settings-content--panel .security-activity-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(var(--front-rgb-136-146-166), 0.12);
}

.settings-content--panel .security-activity-pagination__summary {
    color: var(--front-palette-6b7383);
    font-size: var(--front-font-size-rem-072);
    font-weight: var(--front-font-semibold);
    white-space: nowrap;
}

.settings-content--panel .security-activity-pagination__actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.settings-content--panel .security-activity-page-link {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.12);
    border-radius: 9px;
    background: var(--front-color-white);
    color: var(--front-palette-5b6577);
    font-size: var(--front-font-size-rem-072);
    font-weight: var(--front-font-semibold);
    line-height: 1;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.settings-content--panel .security-activity-page-link:hover {
    border-color: rgba(var(--front-color-primary-rgb), 0.28);
    background: rgba(var(--front-color-primary-rgb), 0.08);
    color: var(--front-color-primary);
}

.settings-content--panel .security-activity-page-link.is-current {
    color: var(--front-color-primary);
    background: rgba(var(--front-color-primary-rgb), 0.08);
}

.settings-content--panel .security-activity-page-link.is-disabled {
    color: var(--front-palette-8892a6);
    background: var(--front-palette-f7f9fc);
    opacity: 0.58;
    pointer-events: none;
}

.settings-content--panel .security-activity-page-link i {
    font-size: var(--front-font-size-rem-062);
}

.settings-content--panel .security-activity-pagination .pagination {
    margin: 0;
    gap: 4px;
}

.settings-content--panel .security-activity-pagination .page-link {
    min-width: 32px;
    min-height: 32px;
    display: grid;
    place-items: center;
    padding: 6px 10px;
    border-radius: 9px;
    border-color: rgba(var(--front-color-primary-rgb), 0.12);
    color: var(--front-palette-5b6577);
    font-size: var(--front-font-size-rem-074);
    font-weight: var(--front-font-semibold);
}

.settings-content--panel .security-activity-pagination .page-item.active .page-link {
    background: var(--front-color-primary);
    border-color: var(--front-color-primary);
    color: var(--front-color-white);
}

@media (max-width: 1199.98px) {
    .settings-shell__grid {
        grid-template-columns: 1fr;
    }

    .settings-sidebar {
        position: static;
    }

    .settings-pro-card .settings-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1080px) {
    .settings-content--panel .security-suite-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .settings-content--panel .security-center-checks {
        grid-template-columns: 1fr;
    }

    .settings-content--panel .security-readiness-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-content--panel .security-readiness-strip__meter {
        grid-column: 1 / -1;
    }

    .settings-content--panel .settings-current-plan__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .settings-shell,
    .settings-content--panel {
        padding: 12px;
    }

    .settings-pro-card .user-feature-header {
        margin: 8px 8px 0;
    }

    .settings-pro-card .settings-nav {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .settings-pro-card .settings-nav__link {
        width: 100%;
    }

    .settings-content--panel .security-suite-tabs {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 7px;
        scroll-snap-type: x proximity;
    }

    .settings-content--panel .security-suite-tabs__item {
        flex: 0 0 150px;
        scroll-snap-align: start;
    }

    .settings-content--panel .security-center-hero,
    .settings-content--panel .security-check-card,
    .settings-content--panel .security-activity-item {
        grid-template-columns: 1fr;
    }

    .settings-content--panel .security-readiness-strip {
        grid-template-columns: 1fr;
    }

    .settings-content--panel .settings-current-plan__hero,
    .settings-content--panel .settings-active-list__item {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .settings-content--panel .settings-current-plan__badge,
    .settings-content--panel .settings-active-list__meta {
        justify-self: start;
        text-align: left;
    }

    .settings-content--panel .settings-current-plan__metrics {
        grid-template-columns: 1fr;
    }

    .settings-content--panel .settings-current-plan__footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-content--panel .security-check-card__footer,
    .settings-content--panel .security-activity-pagination {
        align-items: flex-start;
        justify-content: flex-start;
    }

    .settings-content--panel .security-activity-pagination {
        flex-direction: column;
    }

    .settings-content--panel .security-activity-pagination__actions {
        justify-content: flex-start;
    }

    .settings-content--panel .security-activity-item__time {
        text-align: left;
    }

    .settings-content__header,
    .settings-profile-hero,
    .kyc-verify-hero {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .settings-content__header {
        display: grid;
        gap: 8px;
        min-height: 0;
    }

    .settings-content__actions {
        width: 100%;
        justify-content: flex-start;
    }

    .settings-heading-action {
        flex: 0 1 auto;
    }

    .settings-profile-hero__avatar {
        width: 58px;
        height: 58px;
    }

    .kyc-verify-hero__meta {
        grid-column: auto;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .kyc-verify-hero__badge {
        width: fit-content;
    }
}

/*small screen dashboard card*/
.single-amount-card {
    padding: 14px;
    transition: 0.4s;
    position: relative;
}

.single-amount-card .media {
    display: block;
    text-align: center;
    line-height: 1;
}

.single-amount-card h6 {
    margin-bottom: 2px;
    line-height: 1;
    font-size: var(--front-font-md);
}

.single-amount-card span {
    font-size: var(--front-font-xs);
    line-height: 0.8;
}

.icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: 60px;
    border-radius: 8px;
    transition: 0.4s;
    margin: 0 auto 12px;
}

.icon-container svg {
    width: 35px;
    height: 35px;
    transition: 0.4s;
}

.single-amount-card a {
    display: none;
}

.single-chart-inner {
    background: var(--front-color-white);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(var(--front-color-black-rgb), 0.04);
}

.single-chart-inner .chart-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding: 10px 16px;
}

.single-chart-inner .chart-head h6 {
    margin-bottom: 0;
    font-size: var(--front-font-size-px-135);
    font-weight: var(--front-font-semibold);
}

.single-chart-inner .chart-head .single-select {
    border: 0;
    color: var(--main-color);
    font-weight: var(--front-font-normal) !important;
    height: 32px;
    font-size: var(--front-font-lg);
}

.single-chart-inner .chart-head .single-select:after {
    border-bottom: 2px solid var(--main-color);
    border-right: 2px solid var(--main-color);
    margin-top: -1px;
    height: 6px;
    width: 6px;
}

.single-chart-inner .chart-head .single-select .list li {
    min-height: 25px;
    line-height: 2;
}

.single-chart-inner .details {
    padding: 5px 14px;
}

.single-chart-inner .details .chart-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--main-color);
    margin-bottom: 30px;
}

.single-chart-inner .details .chart-thumb h5 {
    color: var(--main-color);
    font-size: var(--front-font-lg);
}

.single-chart-inner .details .chart-down {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 18px;
}

.single-chart-inner .details .chart-down .btn {
    padding: 0 20px;
}

.single-form-card {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
}

.single-form-card .card-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--main-color);
    padding: 14px 30px;
}

.single-form-card .card-title svg path {
    fill: var(--front-color-white);
}

.single-form-card .card-main {
    padding: 16px 20px;
}

.single-form-card .user-feature-header {
    --user-feature-header-primary: var(--main-color, var(--front-color-primary));
    --user-feature-header-primary-rgb: var(--front-color-primary-rgb, 70, 99, 238);
    --user-feature-header-primary-hover: var(--front-color-primary-hover, var(--user-feature-header-primary));
    --user-feature-header-accent: var(--main-color-2, var(--front-color-accent, #17a86a));
    --user-feature-header-accent-rgb: var(--front-color-accent-rgb, 23, 168, 106);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 10px 0;
    padding: 8px 14px;
    min-height: 54px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(115deg, var(--user-feature-header-primary) 0%, var(--user-feature-header-primary-hover) 48%, var(--user-feature-header-accent) 100%);
    box-shadow: 0 8px 20px rgba(var(--user-feature-header-primary-rgb), 0.16);
    overflow: hidden;
    isolation: isolate;
}

.single-form-card .user-feature-header + .card-main,
.single-form-card .user-feature-header + .card-body {
    padding-top: 14px;
}

.single-form-card .user-feature-header::before,
.single-form-card .user-feature-header::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: rgba(var(--front-color-white-rgb), 0.09);
    pointer-events: none;
    z-index: -1;
}

.single-form-card .user-feature-header::before {
    width: 260px;
    height: 260px;
    right: 18%;
    top: -194px;
}

.single-form-card .user-feature-header::after {
    width: 300px;
    height: 190px;
    right: -1%;
    bottom: -122px;
}

.single-form-card .user-feature-header > * {
    position: relative;
    z-index: 1;
}

.single-form-card .user-feature-header__main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

.single-form-card .user-feature-header__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(var(--front-color-white-rgb), 0.12);
    color: var(--front-color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(var(--front-color-white-rgb), 0.08);
    font-size: var(--front-font-sm);
    flex-shrink: 0;
}

.single-form-card .user-feature-header__icon i,
.single-form-card .user-feature-header__icon svg {
    transform: scale(1.2);
    transform-origin: center;
}

.single-form-card .user-feature-header__copy {
    flex: 1 1 auto;
    min-width: 0;
}

.single-form-card .user-feature-header__title {
    margin: 0;
    font-size: var(--front-font-base);
    line-height: 1.2;
    font-weight: var(--front-font-bold);
    color: var(--front-color-white);
}

.single-form-card .user-feature-header__subtitle {
    margin: 0;
    margin-top: 2px;
    font-size: var(--front-font-xs);
    line-height: 1.4;
    color: rgba(var(--front-color-white-rgb), 0.82);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.single-form-card .user-feature-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    min-height: 36px;
}

.single-form-card .user-feature-header__actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 14px;
    border: 1px solid rgba(var(--front-color-white-rgb), 0.66);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(var(--front-color-white-rgb), 0.99) 0%, rgba(var(--front-rgb-242-246-255), 0.96) 100%);
    color: var(--user-feature-header-primary);
    line-height: 1.1;
    box-shadow: 0 6px 14px rgba(var(--user-feature-header-primary-rgb), 0.12), inset 0 1px 0 rgba(var(--front-color-white-rgb), 0.78);
    font-size: var(--front-font-size-px-115);
    font-weight: var(--front-font-bold);
    white-space: nowrap;
    letter-spacing: 0.01em;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.single-form-card .user-feature-header__actions .btn i {
    margin-right: 0;
    font-size: var(--front-font-sm);
    opacity: 0.95;
}

.single-form-card .user-feature-header__actions .btn:hover,
.single-form-card .user-feature-header__actions .btn:focus {
    color: var(--user-feature-header-primary-hover);
    background: linear-gradient(180deg, var(--front-color-white) 0%, var(--front-palette-eef3ff) 100%);
    border-color: rgba(var(--front-color-white-rgb), 0.72);
    box-shadow: 0 14px 26px rgba(var(--user-feature-header-primary-rgb), 0.18), inset 0 1px 0 rgba(var(--front-color-white-rgb), 0.88);
    transform: translateY(-1px) scale(1.01);
}

.single-form-card .user-feature-header--compact {
    min-height: 48px;
    padding: 7px 14px;
}

.single-form-card .user-feature-header--compact::before {
    width: 150px;
    height: 150px;
    top: -76px;
    right: 90px;
}

.single-form-card .user-feature-header--compact::after {
    width: 120px;
    height: 120px;
    right: 18px;
    bottom: -64px;
}

.single-form-card .user-feature-header--compact .user-feature-header__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: var(--front-font-xs);
}

.single-form-card .user-feature-header--compact .user-feature-header__title {
    font-size: var(--front-font-sm);
}

.single-form-card .user-feature-header--compact .user-feature-header__subtitle {
    font-size: var(--front-font-size-px-105);
}

.single-form-card .user-feature-header--compact .user-feature-header__actions .btn {
    min-height: 28px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: var(--front-font-xs);
}

/*---------------------------------------
    ## P2P Trading UI (Scoped)
----------------------------------------*/
.p2p-ui {
    --p2p-border: var(--front-palette-e7edf5);
    --p2p-muted: var(--front-color-muted);
    --p2p-head: var(--front-palette-0b0f19);
    --p2p-table-head: var(--front-palette-f5f7fb);
    --p2p-primary: var(--main-color);
    --p2p-primary-dark: var(--hover-color);
    --p2p-buy: var(--p2p-primary);
    --p2p-sell: var(--p2p-primary-dark);
}

.p2p-ui.p2p-offer-card {
    border-radius: 18px;
    border-color: var(--front-palette-dfe7f5);
    box-shadow: 0 18px 40px rgba(var(--front-rgb-30-41-59), 0.12);
}

.p2p-offer-card__head {
    background: linear-gradient(135deg, var(--front-palette-f7f9ff) 0%, var(--front-palette-eef2ff) 100%);
    color: var(--p2p-head);
    border-bottom: 1px solid var(--front-palette-e5e7eb);
    padding: 6px 26px;
}

.p2p-offer-card__head h6 {
    font-size: var(--front-font-xl);
    font-weight: var(--front-font-bold);
    color: var(--p2p-head);
}

.p2p-offer-card__subtitle {
    margin: 0;
    font-size: var(--front-font-base);
    color: var(--p2p-muted);
}

.p2p-offer-card__body {
    background: var(--front-color-white);
    padding: 22px 26px 26px;
}

.p2p-offer-section {
    border: 1px solid var(--front-palette-e7edf5);
    border-radius: 16px;
    padding: 18px;
    background: var(--front-palette-f8fafc);
    margin-bottom: 18px;
}

.p2p-offer-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.p2p-offer-section__title {
    margin: 0;
    font-size: var(--front-font-md);
    font-weight: var(--front-font-bold);
    color: var(--p2p-head);
}

.p2p-offer-section__subtitle {
    margin: 0;
    font-size: var(--front-font-sm);
    color: var(--p2p-muted);
}

.p2p-offer-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--front-font-xs);
    color: var(--front-palette-64748b);
    background: var(--front-color-white);
    border: 1px dashed var(--front-palette-dbe4f3);
    border-radius: 10px;
    padding: 6px 10px;
}

.p2p-offer-hint i {
    color: var(--p2p-primary);
}

.p2p-offer-search {
    margin-bottom: 12px;
}

.p2p-offer-card__body .input-group-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 12px;
    padding-right: 12px;
    min-width: 44px;
    gap: 8px;
}

.p2p-offer-card__body .input-group-text i {
    font-size: var(--front-font-base);
    line-height: 1;
}

.p2p-offer-card__body .form-select-sm,
.p2p-offer-card__body .form-control-sm {
    padding-top: 0.48rem;
    padding-bottom: 0.48rem;
    min-height: 42px;
    line-height: 1.3;
}

.p2p-offer-methods__list {
    border: 1px solid var(--front-palette-e2e8f0);
    border-radius: 14px;
    padding: 12px;
    background: var(--front-color-white);
}

.p2p-offer-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--front-palette-e2e8f0);
    background: var(--front-palette-f8fafc);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--front-font-sm);
    font-weight: var(--front-font-semibold);
    color: var(--front-palette-475569);
}

.p2p-offer-pill:hover {
    border-color: rgba(var(--front-color-primary-rgb), 0.35);
    background: var(--front-palette-edf1ff);
}

.p2p-offer-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.p2p-offer-pill__check {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1px solid var(--front-palette-cbd5f5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--front-color-white);
    color: var(--front-color-white);
    flex-shrink: 0;
}

.p2p-offer-pill__check i {
    font-size: var(--front-font-2xs);
    opacity: 0;
}

.p2p-offer-pill input:checked + .p2p-offer-pill__check {
    background: var(--p2p-primary);
    border-color: var(--p2p-primary);
}

.p2p-offer-pill input:checked + .p2p-offer-pill__check i {
    opacity: 1;
}

.p2p-offer-pill input:checked + .p2p-offer-pill__check + .p2p-offer-pill__text {
    color: var(--p2p-primary-dark);
}

.p2p-offer-muted {
    display: inline-block;
    margin-top: 8px;
    font-size: var(--front-font-xs);
}

.p2p-offer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border: 1px solid var(--front-palette-e2e8f0);
    border-radius: 14px;
    background: var(--front-palette-f8fafc);
    padding: 12px 16px;
}

.p2p-offer-footer__note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--front-font-sm);
    color: var(--front-palette-64748b);
}

.p2p-offer-footer__note i {
    color: var(--front-palette-f59e0b);
}

.p2p-offer-footer__actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.p2p-offer-publish {
    background: var(--front-palette-facc15);
    color: var(--front-palette-1f2937);
    font-weight: var(--front-font-bold);
    border-radius: 10px;
    padding: 0 18px;
}

.p2p-offer-publish:hover {
    background: var(--front-palette-fbbf24);
    color: var(--front-palette-1f2937);
}

.p2p-ui-modal {
    --p2p-buy: var(--main-color);
    --p2p-sell: var(--hover-color);
}

.p2p-ui-modal .p2p-order-modal {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--front-palette-e5e7eb);
    box-shadow: 0 20px 60px rgba(var(--front-rgb-15-23-42), 0.14);
}

.p2p-ui-modal .modal-dialog {
    max-width: 640px;
}

.p2p-ui-modal .p2p-order-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: var(--front-color-white);
}

.p2p-ui-modal .p2p-order-modal__title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.p2p-ui-modal .p2p-order-side-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-black);
    border: 1px solid var(--front-palette-e2e8f0);
    background: var(--front-palette-f8fafc);
    color: var(--front-palette-0f172a);
    flex-shrink: 0;
}

.p2p-ui-modal .p2p-order-side-badge--buy {
    border-color: rgba(var(--front-color-primary-rgb), 0.32);
    background: rgba(var(--front-color-primary-rgb), 0.12);
    color: var(--front-palette-324db7);
}

.p2p-ui-modal .p2p-order-side-badge--sell {
    border-color: rgba(var(--front-rgb-53-76-140), 0.42);
    background: rgba(var(--front-rgb-53-76-140), 0.14);
    color: var(--front-palette-2d3f76);
}

.p2p-ui-modal .p2p-order-modal__title-icon {
    font-size: var(--front-font-lg);
    color: var(--front-palette-64748b);
}

.p2p-ui-modal .p2p-order-modal__title {
    margin: 0;
    font-size: var(--front-font-2xl);
    font-weight: var(--front-font-black);
    color: var(--front-palette-0f172a);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.p2p-ui-modal .p2p-order-modal__subhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 18px 14px 18px;
    background: var(--front-color-white);
}

.p2p-ui-modal .p2p-order-seller {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.p2p-ui-modal .p2p-order-seller__avatar {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--front-palette-e2e8f0);
    background: var(--front-palette-f1f5f9);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--front-font-black);
    color: var(--front-palette-334155);
    flex-shrink: 0;
    overflow: hidden;
}

.p2p-ui-modal .p2p-order-seller__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.p2p-ui-modal .p2p-order-seller__name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.p2p-ui-modal .p2p-order-seller__name {
    font-weight: var(--front-font-black);
    color: var(--front-palette-0f172a);
    text-decoration: none;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 260px;
}

.p2p-ui-modal .p2p-order-seller__name:hover {
    text-decoration: underline;
}

.p2p-ui-modal .p2p-order-seller__stats {
    margin-top: 2px;
    font-size: var(--front-font-sm);
    font-weight: var(--front-font-bold);
    color: var(--front-palette-94a3b8);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.p2p-ui-modal .p2p-order-rate {
    font-size: var(--front-font-base);
    font-weight: var(--front-font-extrabold);
    color: var(--front-palette-64748b);
    white-space: nowrap;
}

.p2p-ui-modal .modal-body {
    background: var(--front-palette-f8fafc);
    padding: 16px 18px;
}

.p2p-ui-modal .p2p-order-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.p2p-ui-modal .p2p-order-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.p2p-ui-modal .p2p-order-card {
    background: linear-gradient(180deg, rgba(var(--front-color-white-rgb), 0.92), rgba(var(--front-color-white-rgb), 1));
    border: 1px solid var(--front-palette-e2e8f0);
    border-radius: 16px;
    padding: 14px 14px;
    min-width: 0;
}

.p2p-ui-modal .p2p-order-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.p2p-ui-modal .p2p-order-card__title {
    font-size: var(--front-font-md);
    font-weight: var(--front-font-black);
    color: var(--front-palette-0f172a);
}

.p2p-ui-modal .p2p-order-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-black);
    background: rgba(var(--front-rgb-34-197-94), 0.12);
    border: 1px solid rgba(var(--front-rgb-34-197-94), 0.25);
    color: var(--front-palette-166534);
}

.p2p-ui-modal .p2p-order-convert {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.p2p-ui-modal .p2p-order-input,
.p2p-ui-modal .p2p-order-output {
    min-height: 48px;
}

.p2p-ui-modal .p2p-order-input {
    display: flex;
    align-items: stretch;
    background: var(--front-color-white);
    border: 1px solid var(--front-palette-cbd5e1);
    border-radius: 12px;
    overflow: hidden;
    min-width: 0;
}

.p2p-ui-modal .p2p-order-input__control {
    border: 0;
    box-shadow: none;
    outline: none;
    font-weight: var(--front-font-black);
    font-size: var(--front-font-xl);
    color: var(--front-palette-0f172a);
    padding: 0 16px;
    min-width: 0;
    flex: 1 1 auto;
    height: 48px;
    line-height: 1.2;
    background: transparent;
}

.p2p-ui-modal .p2p-order-input__unit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border-left: 1px solid var(--front-palette-e2e8f0);
    font-weight: var(--front-font-black);
    color: var(--front-palette-334155);
    background: var(--front-palette-f1f5f9);
    min-width: 72px;
}

.p2p-ui-modal .p2p-order-swap {
    width: 44px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--front-palette-e2e8f0);
    background: var(--front-color-white);
    color: var(--front-palette-64748b);
}

.p2p-ui-modal .p2p-order-output {
    display: flex;
    align-items: stretch;
    background: var(--front-color-white);
    border: 1px solid var(--front-palette-cbd5e1);
    border-radius: 12px;
    overflow: hidden;
    min-width: 0;
}

.p2p-ui-modal .p2p-order-output__value {
    flex: 1 1 auto;
    padding: 0 16px;
    font-size: var(--front-font-xl);
    font-weight: var(--front-font-black);
    color: var(--front-palette-0f172a);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.p2p-ui-modal .p2p-order-output__ccy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border-left: 1px solid var(--front-palette-e2e8f0);
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-black);
    color: var(--front-palette-64748b);
    background: var(--front-palette-f1f5f9);
    min-width: 72px;
}

.p2p-ui-modal .p2p-order-note {
    margin-top: 10px;
    font-size: var(--front-font-sm);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.p2p-ui-modal .p2p-order-totals {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.p2p-ui-modal .p2p-payment-pill--select {
    appearance: none;
    cursor: pointer;
    outline: none;
}

.p2p-ui-modal .p2p-payment-pill--select:hover {
    border-color: rgba(var(--front-color-primary-rgb), 0.7);
}

.p2p-ui-modal .p2p-payment-pill--select.is-active {
    border-color: var(--main-color);
    box-shadow: 0 0 0 3px rgba(var(--front-color-primary-rgb), 0.18);
}

.p2p-ui-modal .p2p-order-payment-selectwrap {
    position: relative;
}

.p2p-ui-modal .p2p-order-payment-selecticon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--front-palette-64748b);
    pointer-events: none;
}

.p2p-ui-modal .p2p-order-payment-select {
    padding-left: 36px;
    border: 1px solid var(--main-color);
    border-radius: 14px;
    min-height: 46px;
    height: 46px;
    line-height: 46px;
    font-weight: var(--front-font-black);
    color: var(--front-palette-0f172a);
}

.p2p-ui-modal .p2p-order-summary-card {
    background: linear-gradient(180deg, rgba(var(--front-color-white-rgb), 0.92), rgba(var(--front-color-white-rgb), 1));
}

.p2p-ui-modal .p2p-order-summary-rows {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--front-palette-e2e8f0);
    border-radius: 16px;
    padding: 12px 12px;
    background: var(--front-color-white);
}

.p2p-ui-modal .p2p-order-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.p2p-ui-modal .p2p-order-summary-row__left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.p2p-ui-modal .p2p-order-terms-agree {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--front-font-sm);
    font-weight: var(--front-font-extrabold);
    color: var(--front-palette-0f172a);
}

.p2p-ui-modal .p2p-order-terms-agree .form-check-input {
    width: 20px;
    height: 20px;
    margin-top: 0;
    border-radius: 6px;
    border-color: var(--main-color);
}

.p2p-ui-modal .p2p-order-terms-agree .form-check-input:checked {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.p2p-ui-modal .p2p-order-instructions {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px dashed var(--front-palette-cbd5e1);
    background: var(--front-palette-f8fafc);
    color: var(--front-palette-334155);
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-semibold);
    white-space: pre-wrap;
}

.p2p-ui-modal .p2p-order-terms__list {
    margin: 10px 0 0 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.p2p-ui-modal .p2p-order-terms__list li {
    font-size: var(--front-font-xs);
    color: var(--front-palette-475569);
    font-weight: var(--front-font-semibold);
    line-height: 1.4;
}

.p2p-ui-modal .p2p-order-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.p2p-ui-modal .p2p-order-summary {
    background: var(--front-color-white);
    border: 1px solid var(--front-palette-e2e8f0);
    border-radius: 16px;
    padding: 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.p2p-ui-modal .p2p-order-summary__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.p2p-ui-modal .p2p-order-summary__foot {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px dashed var(--front-palette-e2e8f0);
    font-size: var(--front-font-xs);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.p2p-ui-modal .p2p-order-modal__footer {
    padding: 14px 18px;
    background: var(--front-color-white);
    border-top: 1px solid var(--front-palette-eef2f7);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.p2p-ui-modal .p2p-order-footer-release {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--front-palette-334155);
}

.p2p-ui-modal .p2p-order-footer-release__label {
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-extrabold);
    color: var(--front-palette-64748b);
}

.p2p-ui-modal .p2p-order-footer-release__value {
    font-size: var(--front-font-base);
    font-weight: var(--front-font-black);
    color: var(--front-palette-0f172a);
}

.p2p-ui-modal .p2p-order-footer-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.p2p-ui-modal .p2p-order-cancel,
.p2p-ui-modal .p2p-order-submit {
    flex: 1 1 50%;
    min-height: 44px;
    height: 44px;
    border-radius: 12px;
    font-weight: var(--front-font-black);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.p2p-ui-modal .p2p-order-footer-note {
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-bold);
    color: var(--front-palette-64748b);
    text-align: center;
    grid-column: 1 / -1;
}

.p2p-ui-modal .p2p-order-submit {
    border: 0;
    color: var(--front-color-white);
}

.p2p-ui-modal .p2p-order-submit:hover {
    color: var(--front-color-white);
    filter: brightness(0.96);
}

.p2p-ui-modal .p2p-order-cancel {
    border-color: rgba(var(--front-color-primary-rgb), 0.35);
    color: var(--main-color);
}

.p2p-ui-modal .p2p-order-cancel:hover {
    border-color: var(--main-color);
    background: var(--front-palette-edf1ff);
    color: var(--main-color);
}

.p2p-ui-modal .p2p-order-submit--buy {
    background: var(--p2p-buy);
}

.p2p-ui-modal .p2p-order-submit--sell {
    background: var(--p2p-sell);
}

.p2p-ui .p2p-card-main {
    padding: 24px 28px;
}

.single-form-card.p2p-ui .card-title {
    padding: 12px 20px;
}

.p2p-ui .p2p-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.p2p-ui .p2p-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.p2p-ui .p2p-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.p2p-ui .p2p-page-title {
    font-size: var(--front-font-2xl);
    font-weight: var(--front-font-bold);
    color: var(--front-palette-1e293b);
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
}

.p2p-ui .p2p-header-tabs {
    margin-bottom: 0 !important;
}

.p2p-ui .form-label,
.p2p-ui-modal .form-label {
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-semibold);
    color: var(--muted-color);
    margin-bottom: 6px;
}

.btn-compact,
.p2p-ui .p2p-btn-xs,
.p2p-ui-modal .p2p-btn-xs {
    line-height: 30px !important;
    padding: 0 16px !important;
    font-size: var(--front-font-base) !important;
}

/* Normalize button sizing inside P2P (global .btn uses line-height:40px which makes P2P buttons too tall) */
.p2p-ui .btn,
.p2p-ui-modal .btn {
}

.p2p-ui .btn-sm,
.p2p-ui-modal .btn-sm {
}

/* Re-enable outline borders inside P2P (theme sets .btn { border:0 }) */
.p2p-ui .btn-outline-primary {
}

.p2p-ui-modal .btn-outline-primary {
}

.p2p-ui .btn-outline-secondary {
}

.p2p-ui-modal .btn-outline-secondary {
}

.p2p-ui .btn-outline-success {
}

.p2p-ui-modal .btn-outline-success {
}

.p2p-ui .btn-outline-danger {
}

.p2p-ui-modal .btn-outline-danger {
}

.p2p-ui .btn-outline-warning {
}

.p2p-ui-modal .btn-outline-warning {
}

.p2p-ui .btn-link,
.p2p-ui-modal .btn-link {
    line-height: normal;
    padding: 0;
    border: 0;
}

.p2p-ui .form-control,
.p2p-ui .form-select,
.p2p-ui-modal .form-control,
.p2p-ui-modal .form-select,
.p2p-ui .modal-content,
.p2p-ui-modal .modal-content,
.p2p-ui .alert {
    border-radius: 10px;
}

.p2p-ui .nav-pills {
    gap: 0;
    margin-bottom: 0 !important;
}

.p2p-ui .nav-pills .nav-link {
    border: 1px solid var(--front-palette-d1d5db);
    color: var(--front-palette-4b5563);
    font-weight: var(--front-font-semibold);
    font-size: var(--front-font-sm);
    padding: 6px 20px;
    border-radius: 0;
    background: var(--front-color-white);
    line-height: 1.4;
}

.p2p-ui .nav-pills .nav-item:first-child .nav-link {
    border-radius: 8px 0 0 8px;
}

.p2p-ui .nav-pills .nav-item:last-child .nav-link {
    border-radius: 0 8px 8px 0;
    border-left: 0;
}

.p2p-ui .nav-pills .nav-link.active {
    background: var(--main-color);
    border-color: var(--main-color);
    color: var(--front-color-white);
    box-shadow: none;
}

.p2p-ui .nav-pills .nav-link.p2p-tab-buy.active {
    background: var(--p2p-buy);
    border-color: var(--p2p-buy);
    box-shadow: none;
}

.p2p-ui .nav-pills .nav-link.p2p-tab-sell.active {
    background: var(--p2p-sell);
    border-color: var(--p2p-sell);
    box-shadow: none;
}

.p2p-ui .p2p-resume-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--front-palette-eef2ff) 0%, var(--front-palette-eaf0ff) 100%);
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.24);
    color: var(--front-palette-1f2a44);
}

.p2p-ui .p2p-resume-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.p2p-ui .p2p-resume-icon-wrap {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--front-color-white);
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.p2p-ui .p2p-resume-icon {
    color: var(--main-color);
    font-size: var(--front-font-sm);
}

.p2p-ui .p2p-resume-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.p2p-ui .p2p-resume-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.p2p-ui .p2p-resume-title {
    font-size: var(--front-font-sm);
    font-weight: var(--front-font-bold);
    color: var(--front-palette-1f2a44);
}

.p2p-ui .p2p-resume-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--front-font-2xs);
    font-weight: var(--front-font-extrabold);
    border: 1px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.p2p-ui .p2p-resume-status.is-pending {
    background: rgba(var(--front-rgb-245-158-11), 0.12);
    border-color: rgba(var(--front-rgb-245-158-11), 0.3);
    color: var(--front-palette-92400e);
}

.p2p-ui .p2p-resume-status.is-paid {
    background: rgba(var(--front-color-success-rgb), 0.12);
    border-color: rgba(var(--front-color-success-rgb), 0.3);
    color: var(--front-palette-166534);
}

.p2p-ui .p2p-resume-status.is-disputed {
    background: rgba(var(--front-color-danger-rgb), 0.12);
    border-color: rgba(var(--front-color-danger-rgb), 0.3);
    color: var(--front-palette-b91c1c);
}

.p2p-ui .p2p-resume-order-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.p2p-ui .p2p-resume-order-row strong {
    font-size: var(--front-font-sm);
    font-weight: var(--front-font-extrabold);
    color: var(--front-palette-111827);
}

.p2p-ui .p2p-resume-updated {
    font-size: var(--front-font-xs);
    color: var(--front-palette-5f6f91);
}

.p2p-ui .p2p-resume-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.p2p-ui .p2p-resume-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.18);
    background: rgba(var(--front-color-white-rgb), 0.85);
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-semibold);
    color: var(--front-palette-334155);
    line-height: 1.2;
}

.p2p-ui .p2p-resume-chip i {
    color: var(--main-color);
    font-size: var(--front-font-2xs);
}

.p2p-ui .p2p-resume-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--main-color) !important;
    color: var(--front-color-white) !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 0 14px !important;
    min-height: 36px;
    line-height: 36px !important;
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-bold);
    white-space: nowrap;
    flex-shrink: 0;
}

.p2p-ui .p2p-resume-link:hover {
    background: var(--hover-color) !important;
    color: var(--front-color-white) !important;
}

.p2p-ui .p2p-filterbar {
    padding: 12px 16px;
    border: 1px solid var(--front-palette-d9e2f3);
    border-radius: 12px;
    background: var(--front-palette-fdfdff);
    margin-bottom: 10px;
    box-shadow: 0 2px 6px rgba(var(--front-rgb-15-23-42), 0.04);
}

.p2p-ui .p2p-filter-toggle {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--front-palette-d6d9e4);
    border-radius: 10px;
    background: var(--front-palette-f7f9fc);
    color: var(--front-palette-334155);
    font-weight: var(--front-font-bold);
    cursor: pointer;
    user-select: none;
}

.p2p-ui .p2p-filter-toggle .p2p-filter-chevron {
    transition: transform 0.18s ease;
}

.p2p-ui .p2p-filter-toggle:not(.collapsed) .p2p-filter-chevron {
    transform: rotate(180deg);
}

.p2p-ui .p2p-filter-row.p2p-filter-row--compact {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(260px, 1.45fr) minmax(220px, 260px);
    gap: 12px;
    align-items: end;
}

.p2p-ui .p2p-filter-row.p2p-filter-row--compact .p2p-filter-field {
    min-width: 0;
}

.p2p-ui .p2p-filter-row.p2p-filter-row--compact .p2p-filter-field--submit {
    min-width: 0;
}

.p2p-ui .p2p-search-solid {
    border-radius: 10px !important;
    border: 0 !important;
    background: var(--p2p-buy) !important;
    min-height: 40px;
    height: 40px;
    line-height: 40px !important;
    padding: 0 20px !important;
    font-weight: var(--front-font-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.p2p-ui .p2p-filter-row.p2p-filter-row--compact .form-select-sm,
.p2p-ui .p2p-filter-row.p2p-filter-row--compact .form-control-sm {
    min-height: 40px;
    height: 40px;
    border-radius: 10px;
    padding-left: 14px;
    padding-right: 44px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid var(--front-palette-d6d9e4);
    background: var(--front-palette-f7f9fc);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.p2p-ui .p2p-filter-control {
    position: relative;
    min-width: 0;
}

.p2p-ui .p2p-filter-control > i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--front-font-base);
    color: var(--front-palette-5b6c8f);
    pointer-events: none;
    z-index: 2;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.p2p-ui .p2p-filter-control .form-select-sm,
.p2p-ui .p2p-filter-control .form-control-sm {
    padding-left: 40px !important;
    padding-right: 44px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 40px;
}

.p2p-ui .p2p-filter-field--range {
    min-width: 0;
}

.p2p-ui .p2p-filter-control--range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.p2p-ui .p2p-filter-control--range .p2p-range-input {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 40px !important;
    padding-right: 14px !important;
}

.p2p-ui .p2p-filter-control--range .p2p-range-input--max {
    padding-left: 14px !important;
}

.p2p-ui .p2p-filter-control--range .p2p-range-sep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    min-width: 12px;
    font-weight: var(--front-font-semibold);
    color: var(--front-palette-94a3b8);
}

.p2p-ui .p2p-filter-control .form-select-sm {
    background-position: right 12px center;
    background-size: 12px 8px;
}

.p2p-ui .p2p-filter-control .form-select-sm:focus,
.p2p-ui .p2p-filter-control .form-control-sm:focus {
    border-color: var(--main-color);
    box-shadow: 0 0 0 3px rgba(var(--front-color-primary-rgb), 0.18);
}

.p2p-ui .p2p-filter-row--advanced {
    margin-top: 12px;
    gap: 12px;
}

.p2p-ui .p2p-filter-row.p2p-filter-row--advanced {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(180px, 220px);
    align-items: end;
}

.p2p-ui .p2p-filter-row.p2p-filter-row--advanced .form-select-sm {
    min-height: 40px;
    height: 40px;
    border-radius: 10px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid var(--front-palette-d6d9e4);
    background: var(--front-palette-f7f9fc);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.p2p-ui .p2p-filter-row.p2p-filter-row--advanced .btn {
    min-height: 40px;
    height: 40px;
    border-radius: 10px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: var(--front-font-semibold);
}

.p2p-ui .p2p-filter-submit-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

}

.p2p-ui .p2p-filter-submit-group .p2p-search-solid {
    flex: 1 1 auto;
}

.p2p-ui .p2p-advanced-icon {
    width: 44px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.26);
    background: var(--front-palette-f5f7ff);
    color: var(--p2p-primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, background 0.18s ease;
    cursor: pointer;
}

.p2p-ui .p2p-advanced-icon i {
    font-size: var(--front-font-lg);
    color: currentColor;
    transition: inherit;
}

.p2p-ui .p2p-advanced-icon:hover {
    border-color: var(--main-color);
    color: var(--main-color);
    background: var(--front-palette-edf1ff);
}

.p2p-ui .p2p-advanced-icon.active {
    border-color: var(--main-color);
    background: var(--front-palette-e6ecff);
    color: var(--main-color);
}

.p2p-ui .p2p-advanced-icon:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--front-color-primary-rgb), 0.22);
}

.p2p-ui .p2p-filter-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.p2p-ui .p2p-filter-field {
    flex: 1 1 140px;
    min-width: 120px;
}

.p2p-ui .p2p-filter-field--wide {
    flex: 1.6 1 180px;
}

.p2p-ui .p2p-filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

.p2p-ui .p2p-search-btn {
    border-radius: 20px !important;
    padding: 0 20px !important;
    line-height: 34px !important;
    font-size: var(--front-font-sm);
    font-weight: var(--front-font-semibold);
}

.p2p-ui .p2p-filter-reset {
    display: inline-flex;
    align-items: center;
    font-size: var(--front-font-sm);
    color: var(--front-color-muted);
    text-decoration: none;
    font-weight: var(--front-font-medium);
    gap: 4px;
}

.p2p-ui .p2p-filter-reset:hover {
    color: var(--front-palette-1e293b);
}

.p2p-ui .p2p-filterbar .btn {
    font-weight: var(--front-font-semibold);
}

.p2p-ui .p2p-offers-panel {
    border: 1px solid var(--front-palette-e5e7eb);
    border-radius: 12px;
    background: var(--front-color-white);
    overflow: hidden;
}

.p2p-ui .p2p-offers-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--front-palette-f0f4ff);
    border-bottom: 1px solid var(--front-palette-e2e8f0);
}

.p2p-ui .p2p-offers-panel__head h6 {
    font-size: var(--front-font-base);
    font-weight: var(--front-font-bold);
    color: var(--front-palette-334155);
}

.p2p-ui .p2p-offers-panel__body {
    padding: 12px 12px;
    background: var(--front-palette-f8fafc);
}

.p2p-ui .p2p-offers-panel--marketplace {
    display: flex;
    flex-direction: column;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offers-panel__body {
    max-height: min(68vh, 720px);
    overflow-y: auto;
    overscroll-behavior-y: auto;
    scrollbar-gutter: stable;
}

.p2p-ui .p2p-offers-panel__status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 10px 4px;
    color: var(--front-palette-64748b);
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-semibold);
}

.p2p-ui .p2p-offer-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px 8px;
    margin-bottom: 6px;
    border: 1px solid var(--front-palette-e5e7eb);
    border-radius: 12px;
    background: var(--front-color-white);
    box-shadow: 0 8px 20px rgba(var(--front-rgb-15-23-42), 0.05);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.p2p-ui .p2p-offer-card.p2p-offer-card--sponsored {
    border-color: rgba(var(--front-rgb-255-193-7), 0.55);
    box-shadow: 0 12px 28px rgba(var(--front-rgb-255-193-7), 0.10);
}

.p2p-ui .p2p-offer-card.p2p-offer-card--highlighted {
    border-color: rgba(var(--p2p-card-accent-rgb, 37, 99, 235), 0.28);
    background: linear-gradient(180deg, rgba(var(--p2p-card-accent-rgb, 37, 99, 235), 0.035) 0%, var(--front-color-white) 180px);
    box-shadow: 0 18px 40px rgba(var(--front-rgb-15-23-42), 0.10), 0 0 0 1px rgba(var(--p2p-card-accent-rgb, 37, 99, 235), 0.08);
}

.p2p-ui .p2p-offer-card.p2p-offer-card--highlighted::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, rgba(var(--p2p-card-accent-rgb, 37, 99, 235), 0.95) 0%, rgba(var(--p2p-card-accent-rgb, 37, 99, 235), 0.28) 100%);
    z-index: 0;
}

.p2p-ui .p2p-offer-card.p2p-offer-card--highlighted::after {
    content: "";
    position: absolute;
    top: -56px;
    right: -36px;
    width: 148px;
    height: 148px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(var(--p2p-card-accent-rgb, 37, 99, 235), 0.22) 0%, rgba(var(--p2p-card-accent-rgb, 37, 99, 235), 0) 72%);
    pointer-events: none;
    z-index: 0;
}

.p2p-ui .p2p-offer-card--accent-gold {
    --p2p-card-accent-rgb: 217, 119, 6;
}

.p2p-ui .p2p-offer-card--accent-blue {
    --p2p-card-accent-rgb: 37, 99, 235;
}

.p2p-ui .p2p-offer-card--accent-red {
    --p2p-card-accent-rgb: 220, 38, 38;
}

.p2p-ui .p2p-offer-card:hover {
    background: var(--front-palette-f8fafc);
    box-shadow: 0 14px 30px rgba(var(--front-rgb-15-23-42), 0.10);
}

.p2p-ui .p2p-offer-card.p2p-offer-card--sponsored:hover {
    box-shadow: 0 16px 34px rgba(var(--front-rgb-255-193-7), 0.14);
}

.p2p-ui .p2p-offer-card.p2p-offer-card--highlighted:hover {
    background: linear-gradient(180deg, rgba(var(--p2p-card-accent-rgb, 37, 99, 235), 0.055) 0%, var(--front-color-white) 180px);
    transform: translateY(-1px);
    box-shadow: 0 22px 48px rgba(var(--front-rgb-15-23-42), 0.12), 0 0 0 1px rgba(var(--p2p-card-accent-rgb, 37, 99, 235), 0.14);
}

.p2p-ui .p2p-offer-card:last-child {
    margin-bottom: 0;
}

.p2p-ui .p2p-offer-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.p2p-ui .p2p-offer-card--highlighted .p2p-offer-card__head {
    padding: 12px 12px 8px;
    margin: -8px -8px 0;
    background: linear-gradient(135deg, rgba(var(--p2p-card-accent-rgb, 37, 99, 235), 0.16) 0%, rgba(var(--p2p-card-accent-rgb, 37, 99, 235), 0.05) 52%, rgba(var(--front-color-white-rgb), 0.96) 100%);
    border-bottom: 1px solid rgba(var(--p2p-card-accent-rgb, 37, 99, 235), 0.14);
}

.p2p-ui .p2p-offer-card__head .p2p-available-badge {
    margin-left: auto;
}

.p2p-ui .p2p-offer-card__badges {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.p2p-ui .p2p-offer-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-extrabold);
    line-height: 1;
    white-space: nowrap;
}

.p2p-ui .p2p-offer-chip--promoted {
    background: var(--front-palette-fff7ed);
    border: 1px solid var(--front-palette-fed7aa);
    color: var(--front-palette-c2410c);
}

.p2p-ui .p2p-offer-chip--featured {
    background: var(--front-palette-ecfdf5);
    border: 1px solid var(--front-palette-a7f3d0);
    color: var(--front-palette-047857);
}

.p2p-ui .p2p-offer-card--highlighted .p2p-offer-chip--promoted {
    background: rgba(var(--p2p-card-accent-rgb, 37, 99, 235), 0.12);
    border-color: rgba(var(--p2p-card-accent-rgb, 37, 99, 235), 0.22);
    color: rgba(var(--p2p-card-accent-rgb, 37, 99, 235), 1);
}

.p2p-ui .p2p-offer-card--highlighted .p2p-offer-chip--featured {
    background: rgba(var(--front-rgb-15-23-42), 0.06);
    border-color: rgba(var(--front-rgb-15-23-42), 0.10);
    color: var(--front-palette-0f172a);
}

.p2p-ui .p2p-offer-card__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 2px;
    position: relative;
    z-index: 1;
}

.p2p-ui .p2p-offer-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.p2p-ui .p2p-offer-body__left {
    min-width: 0;
}

.p2p-ui .p2p-offer-body__right {
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    min-width: 0;
}

.p2p-ui .p2p-data-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 12px;
    border-bottom: 1px solid var(--front-palette-f1f5f9);
}

.p2p-ui .p2p-data-card:last-child {
    border-bottom: 0;
}

.p2p-ui .p2p-data-card:hover {
    background: var(--front-palette-f8fafc);
}

.p2p-ui .p2p-data-card__left {
    flex: 1 1 auto;
    min-width: 0;
}

.p2p-ui .p2p-data-card__title {
    font-size: var(--front-font-base);
    font-weight: var(--front-font-extrabold);
    color: var(--front-palette-0f172a);
    line-height: 1.25;
}

.p2p-ui .p2p-data-card__sub {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-semibold);
    color: var(--front-palette-64748b);
}

.p2p-ui .p2p-data-card__sub strong {
    font-weight: var(--front-font-extrabold);
    color: var(--front-palette-334155);
}

.p2p-ui .p2p-data-card__right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.p2p-ui .p2p-offer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.p2p-ui .p2p-offer-row--sub {
    margin-top: 6px;
    flex-wrap: wrap;
}

.p2p-ui .p2p-offer-asset__code {
    font-weight: var(--front-font-extrabold);
    color: var(--front-palette-0f172a);
    font-size: var(--front-font-md);
}

.p2p-ui .p2p-offer-asset__price {
    font-size: var(--front-font-xs);
    color: var(--front-color-muted);
    font-weight: var(--front-font-medium);
}

.p2p-ui .p2p-available-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-bold);
    background: var(--front-palette-eef2ff);
    border: 1px solid var(--front-palette-e0e7ff);
    color: var(--front-palette-0f172a);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.p2p-ui .p2p-offer-card--highlighted .p2p-available-badge {
    background: rgba(var(--p2p-card-accent-rgb, 37, 99, 235), 0.10);
    border-color: rgba(var(--p2p-card-accent-rgb, 37, 99, 235), 0.18);
}

.p2p-ui .p2p-offer-card--highlighted .p2p-offer-price-number,
.p2p-ui .p2p-offer-card--highlighted .p2p-offer-price-fiat {
    color: rgba(var(--p2p-card-accent-rgb, 37, 99, 235), 1);
}

.p2p-ui .p2p-offer-card--highlighted .p2p-offer-limit__value {
    color: var(--front-palette-0f172a);
    font-weight: var(--front-font-extrabold);
}

.p2p-ui .p2p-available-badge__label {
    font-weight: var(--front-font-bold);
    color: var(--front-palette-64748b);
}

.p2p-ui .p2p-available-badge__value {
    font-weight: var(--front-font-black);
    color: var(--front-palette-0f172a);
}

.p2p-ui .p2p-offer-card--highlighted .p2p-advertiser__avatar {
    box-shadow: 0 0 0 4px rgba(var(--p2p-card-accent-rgb, 37, 99, 235), 0.10);
    border-color: rgba(var(--p2p-card-accent-rgb, 37, 99, 235), 0.20);
}

.p2p-ui .p2p-offer-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    min-width: 144px;
}

.p2p-ui .p2p-seller-badge--verified {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--front-palette-eff6ff);
    border: 1px solid var(--front-palette-dbeafe);
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-black);
    color: var(--front-palette-2563eb);
}

.p2p-ui .p2p-seller-badge--verified i {
    color: var(--front-color-success);
}

.p2p-ui .p2p-asset-icon {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-extrabold);
    margin-right: 8px;
    background: var(--front-palette-e2e8f0);
    color: var(--front-palette-0f172a);
    flex-shrink: 0;
}

.p2p-ui .p2p-asset-logo {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    object-fit: cover;
    display: block;
    margin-right: 8px;
    background: var(--front-color-white);
    border: 1px solid var(--front-palette-e2e8f0);
    flex-shrink: 0;
}

.p2p-ui .p2p-asset-icon--usdt {
    background: rgba(var(--front-color-success-rgb), 0.14);
    color: var(--front-palette-166534);
}

.p2p-ui .p2p-asset-icon--btc {
    background: rgba(var(--front-rgb-249-115-22), 0.16);
    color: var(--front-palette-9a3412);
}

.p2p-ui .p2p-asset-icon--eth {
    background: rgba(var(--front-rgb-99-102-241), 0.16);
    color: var(--front-palette-3730a3);
}

.p2p-ui .p2p-offer-limit,
.p2p-ui .p2p-offer-payment {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.p2p-ui .p2p-offer-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    min-width: 0;
}

.p2p-ui .p2p-advertiser__stats {
    margin-top: 2px;
    font-size: var(--front-font-sm);
    font-weight: var(--front-font-semibold);
    color: var(--front-palette-94a3b8);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.p2p-ui .p2p-dot {
    color: var(--front-palette-cbd5e1);
    font-weight: var(--front-font-black);
}

.p2p-ui .p2p-offer-body {
    margin-top: 0;
    padding: 7px 9px;
    border-radius: 12px;
    background: var(--front-palette-f8fafc);
    border: 1px solid var(--front-palette-e2e8f0);
}

.p2p-ui .p2p-offer-body .p2p-offer-limit {
    margin-top: 6px;
}

.p2p-ui .p2p-offer-price-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.p2p-ui .p2p-offer-price-base {
    font-size: var(--front-font-2xl);
    font-weight: var(--front-font-black);
    color: var(--front-palette-0f172a);
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.p2p-ui .p2p-offer-price-arrow {
    font-size: var(--front-font-lg);
    font-weight: var(--front-font-black);
    color: var(--front-palette-94a3b8);
    margin: 0 4px;
    display: inline-flex;
    align-items: center;
    align-self: center;
    line-height: 1;
}

.p2p-ui .p2p-offer-price-number {
    font-size: var(--front-font-3xl);
    font-weight: var(--front-font-black);
    color: var(--front-palette-0f172a);
    line-height: 1.05;
}

.p2p-ui .p2p-offer-price-fiat {
    font-size: var(--front-font-xl);
    font-weight: var(--front-font-extrabold);
    color: var(--front-palette-64748b);
}

.p2p-ui .p2p-offer-price-per {
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-bold);
    color: var(--front-palette-94a3b8);
}

.p2p-ui .p2p-offer-payment-row {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid var(--front-palette-e2e8f0);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.p2p-ui .p2p-payment-pills {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    cursor: pointer;
    user-select: none;
}

.p2p-ui .p2p-payment-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--front-palette-e2e8f0);
    background: var(--front-color-white);
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-extrabold);
    color: var(--front-palette-334155);
    line-height: 1.2;
    white-space: nowrap;
}

.p2p-ui .p2p-payment-pill__logo {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
}

.p2p-ui .p2p-payment-pill__fallback {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--front-font-2xs);
    font-weight: var(--front-font-black);
    background: var(--front-palette-e2e8f0);
    color: var(--front-palette-0f172a);
    flex-shrink: 0;
}

.p2p-ui .p2p-payment-pill__text {
    display: inline-block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.p2p-ui.p2p-accounts .p2p-accounts-banner,
.p2p-ui.p2p-accounts .p2p-accounts-panel,
.p2p-ui.p2p-accounts .p2p-accounts-side {
    border-radius: 16px;
    border: 1px solid rgba(var(--front-rgb-148-163-184), 0.18);
    box-shadow: none;
}

.p2p-ui.p2p-accounts .p2p-accounts-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 18px;
    background: linear-gradient(90deg, var(--front-palette-4a62ea) 0%, var(--front-palette-5d74f2) 100%);
    border-color: transparent;
    position: relative;
    overflow: hidden;
}

.p2p-ui.p2p-accounts .p2p-accounts-banner::before,
.p2p-ui.p2p-accounts .p2p-accounts-banner::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: rgba(var(--front-color-white-rgb), 0.08);
    pointer-events: none;
}

.p2p-ui.p2p-accounts .p2p-accounts-banner::before {
    width: 210px;
    height: 210px;
    right: 24%;
    top: -142px;
}

.p2p-ui.p2p-accounts .p2p-accounts-banner::after {
    width: 280px;
    height: 170px;
    right: 9%;
    bottom: -118px;
}

.p2p-ui.p2p-accounts .p2p-accounts-banner > * {
    position: relative;
    z-index: 1;
}

.p2p-ui.p2p-accounts .p2p-accounts-banner__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(var(--front-color-white-rgb), 0.16);
    color: var(--front-color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--front-font-sm);
    flex-shrink: 0;
}

.p2p-ui.p2p-accounts .p2p-accounts-banner__content {
    flex: 1 1 auto;
}

.p2p-ui.p2p-accounts .p2p-accounts-banner__content h5 {
    font-size: var(--front-font-size-px-17);
    font-weight: var(--front-font-semibold);
    color: var(--front-color-white);
    line-height: 1.2;
}

.p2p-ui.p2p-accounts .p2p-accounts-banner__content p {
    font-size: var(--front-font-xs);
    line-height: 1.4;
    color: rgba(var(--front-color-white-rgb), 0.78);
}

.p2p-ui.p2p-accounts .p2p-accounts-banner__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    background: linear-gradient(180deg, var(--front-color-white) 0%, var(--front-palette-f6f8ff) 100%);
    color: var(--front-palette-4b60eb);
    border: 1px solid rgba(var(--front-color-white-rgb), 0.52);
    font-weight: var(--front-font-semibold);
    font-size: var(--front-font-sm);
    border-radius: 13px;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(var(--front-rgb-24-34-102), 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.p2p-ui.p2p-accounts .p2p-accounts-banner__button:hover,
.p2p-ui.p2p-accounts .p2p-accounts-banner__button:focus {
    color: var(--front-palette-3f53df);
    background: var(--front-color-white);
    box-shadow: 0 16px 30px rgba(var(--front-rgb-24-34-102), 0.22);
    transform: translateY(-1px);
}

.p2p-ui.p2p-accounts .p2p-my-ads-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.p2p-ui.p2p-accounts .p2p-summary-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 76px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(var(--front-rgb-148-163-184), 0.14);
    background: linear-gradient(180deg, var(--front-color-white) 0%, var(--front-palette-fbfcff) 100%);
    box-shadow: 0 4px 16px rgba(var(--front-rgb-15-23-42), 0.035);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: hidden;
}

.p2p-ui.p2p-accounts .p2p-summary-card:hover {
    border-color: rgba(var(--front-rgb-91-109-241), 0.18);
    box-shadow: 0 8px 18px rgba(var(--front-rgb-15-23-42), 0.04);
}

.p2p-ui.p2p-accounts .p2p-summary-card::before {
    content: "";
    position: absolute;
    left: -15px;
    bottom: -23px;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(var(--front-rgb-91-109-241), 0.045);
    pointer-events: none;
}

.p2p-ui.p2p-accounts .p2p-summary-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.p2p-ui.p2p-accounts .p2p-summary-card__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 0;
    position: relative;
    z-index: 1;
}

.p2p-ui.p2p-accounts .p2p-summary-card__label {
    min-height: 0;
    font-size: var(--front-font-xs);
    line-height: 1.25;
    margin: 0;
    font-weight: var(--front-font-medium);
}

.p2p-ui.p2p-accounts .p2p-summary-card__metric {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.p2p-ui.p2p-accounts .p2p-summary-card__value {
    font-size: var(--front-font-2xl);
    font-weight: var(--front-font-bold);
    line-height: 1;
    letter-spacing: -0.02em;
}

.p2p-ui.p2p-accounts .p2p-summary-card__suffix {
    font-size: var(--front-font-xs);
    line-height: 1.1;
    font-weight: var(--front-font-semibold);
    color: var(--front-palette-64748b);
    padding-bottom: 1px;
}

.p2p-ui.p2p-accounts .p2p-accounts-panel__head {
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 14px 18px;
}

.p2p-ui.p2p-accounts .p2p-accounts-panel__lead {
    min-width: 0;
    width: 100%;
}

.p2p-ui.p2p-accounts .p2p-accounts-panel__title-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 0;
}

.p2p-ui.p2p-accounts .p2p-accounts-panel__title-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--front-palette-edf3ff);
    color: var(--front-palette-4b60eb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--front-font-sm);
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(var(--front-rgb-75-96-235), 0.08);
}

.p2p-ui.p2p-accounts .p2p-accounts-panel__title-icon--spark {
    background: var(--front-palette-eef2ff);
    color: var(--front-palette-5f73ef);
}

.p2p-ui.p2p-accounts .p2p-accounts-panel__title-copy {
    min-width: 0;
}

.p2p-ui.p2p-accounts .p2p-accounts-panel__title-copy .p2p-offers-panel__title {
    font-size: var(--front-font-base);
    font-weight: var(--front-font-semibold);
    line-height: 1.2;
    color: var(--front-palette-203050);
}

.p2p-ui.p2p-accounts .p2p-accounts-panel__badge {
    display: none;
}

.p2p-ui.p2p-accounts .p2p-accounts-panel__subtitle {
    margin: 2px 0 0;
    font-size: var(--front-font-xs);
    line-height: 1.5;
    color: var(--front-palette-64748b);
    max-width: 320px;
    min-height: 0;
}

.p2p-ui.p2p-accounts .p2p-accounts-panel__note {
    display: none;
}

.p2p-ui.p2p-accounts .p2p-accounts-panel__note i {
    display: none;
}

.p2p-ui.p2p-accounts .p2p-accounts-panel__body {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
    align-items: start;
    align-content: start;
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding: 16px 10px 12px 12px;
}

.p2p-ui.p2p-accounts .p2p-accounts-methods {
    display: grid;
    gap: 10px;
    min-height: 500px;
    max-height: 560px;
    overflow: auto;
    align-content: start;
    padding: 16px 10px 12px 12px;
}

.p2p-ui.p2p-accounts .p2p-account-card {
    background: var(--front-color-white);
    border: 1px solid rgba(var(--front-rgb-148-163-184), 0.18);
    border-radius: 14px;
    padding: 14px;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    box-shadow: none;
}

.p2p-ui.p2p-accounts .p2p-account-card:hover {
    border-color: rgba(var(--front-rgb-79-104-240), 0.28);
    box-shadow: none;
}

.p2p-ui.p2p-accounts .p2p-account-card__top,
.p2p-ui.p2p-accounts .p2p-account-card__summary,
.p2p-ui.p2p-accounts .p2p-accounts-method {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.p2p-ui.p2p-accounts .p2p-account-card__top {
    align-items: flex-start;
}

.p2p-ui.p2p-accounts .p2p-account-card__summary {
    align-items: center;
    margin: 12px 0 11px;
}

.p2p-ui.p2p-accounts .p2p-account-card__meta-badges {
    display: inline-flex;
}

.p2p-ui.p2p-accounts .p2p-account-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(var(--front-rgb-16-185-129), 0.12);
    color: var(--front-palette-047857);
    font-size: var(--front-font-2xs);
    font-weight: var(--front-font-semibold);
}

.p2p-ui.p2p-accounts .p2p-method-logo {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    object-fit: cover;
    border: 1px solid rgba(var(--front-rgb-148-163-184), 0.2);
    background: var(--front-color-white);
    flex-shrink: 0;
}

.p2p-ui.p2p-accounts .p2p-method-fallback {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--sky-color);
    color: var(--main-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--front-font-semibold);
    font-size: var(--front-font-sm);
    flex-shrink: 0;
}

.p2p-ui.p2p-accounts .p2p-account-label {
    font-weight: var(--front-font-semibold);
    color: var(--front-palette-0f172a);
    font-size: var(--front-font-sm);
    line-height: 1.35;
}

.p2p-ui.p2p-accounts .p2p-account-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 3px;
    font-size: var(--front-font-xs);
    color: var(--front-palette-64748b);
    line-height: 1.5;
}

.p2p-ui.p2p-accounts .p2p-account-card__title {
    font-size: var(--front-font-base);
    font-weight: var(--front-font-semibold);
    line-height: 1.35;
    color: var(--front-palette-0f172a);
}

.p2p-ui.p2p-accounts .p2p-account-card__value {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 9px;
    background: var(--sky-color);
    color: var(--front-palette-0f172a);
    font-size: var(--front-font-2xs);
    font-weight: var(--front-font-medium);
    line-height: 1.4;
    text-align: right;
    max-width: 148px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.p2p-ui.p2p-accounts .p2p-account-details {
    display: grid;
    gap: 7px;
    background: var(--front-palette-f8fbff);
    border: 1px solid rgba(var(--front-rgb-148-163-184), 0.14);
    border-radius: 12px;
    padding: 10px 11px;
}

.p2p-ui.p2p-accounts .p2p-account-details__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.p2p-ui.p2p-accounts .p2p-account-details__label {
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-medium);
    color: var(--front-palette-64748b);
    line-height: 1.5;
}

.p2p-ui.p2p-accounts .p2p-account-value {
    max-width: 58%;
    font-weight: var(--front-font-medium);
    color: var(--front-palette-0f172a);
    font-size: var(--front-font-xs);
    line-height: 1.5;
    text-align: right;
    word-break: break-word;
}

.p2p-ui.p2p-accounts .p2p-account-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    justify-content: flex-end;
}

.p2p-ui.p2p-accounts .p2p-account-card__actions > .btn,
.p2p-ui.p2p-accounts .p2p-account-card__actions > form {
    flex: 0 0 auto;
}

.p2p-ui.p2p-accounts .p2p-account-card__actions form {
    margin: 0;
}

.p2p-ui.p2p-accounts .p2p-account-card__actions .btn {
    width: auto;
}

.p2p-ui.p2p-accounts .p2p-account-card__actions .p2p-action-btn {
    min-width: 112px;
}

.p2p-ui.p2p-accounts .p2p-accounts-panel,
.p2p-ui.p2p-accounts .p2p-accounts-side {
    background: var(--front-color-white);
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.p2p-ui.p2p-accounts .p2p-accounts-panel .p2p-offers-panel__head,
.p2p-ui.p2p-accounts .p2p-accounts-side .p2p-offers-panel__head {
    min-height: 70px;
    align-items: center;
}

.p2p-ui.p2p-accounts .p2p-accounts-panel .p2p-offers-panel__body,
.p2p-ui.p2p-accounts .p2p-accounts-side .p2p-offers-panel__body {
    flex: 1 1 auto;
    border-top: 1px solid rgba(var(--front-rgb-148-163-184), 0.14);
    background: linear-gradient(180deg, var(--front-color-white) 0%, var(--front-palette-fbfdff) 100%);
}

.p2p-ui.p2p-accounts .p2p-accounts-method {
    align-items: center;
    gap: 9px;
    min-height: 54px;
}

.p2p-ui.p2p-accounts .p2p-accounts-method {
    align-items: center;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(var(--front-rgb-148-163-184), 0.18);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    background: var(--front-color-white);
}

.p2p-ui.p2p-accounts .p2p-accounts-method .p2p-method-logo,
.p2p-ui.p2p-accounts .p2p-accounts-method .p2p-method-fallback {
    width: 30px;
    height: 30px;
    border-radius: 9px;
}

.p2p-ui.p2p-accounts .p2p-accounts-method .p2p-account-label {
    font-size: var(--front-font-xs);
    line-height: 1.3;
}

.p2p-ui.p2p-accounts .p2p-accounts-method .p2p-account-meta {
    margin-top: 2px;
    font-size: var(--front-font-2xs);
    line-height: 1.3;
}

.p2p-ui.p2p-accounts .p2p-accounts-method:hover {
    border-color: rgba(var(--front-rgb-79-104-240), 0.3);
    background: var(--front-palette-f8fbff);
    box-shadow: 0 6px 14px rgba(var(--front-rgb-79-104-240), 0.05);
}

.p2p-ui.p2p-accounts .p2p-accounts-method__cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-semibold);
    color: var(--main-color);
    white-space: nowrap;
}

.p2p-ui.p2p-accounts .p2p-accounts-side__count {
    display: none;
}

.p2p-ui.p2p-accounts .p2p-empty-state {
    min-height: 100%;
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.p2p-ui.p2p-accounts .p2p-empty-state__card,
.p2p-ui.p2p-accounts .p2p-accounts-complete {
    border: 1.5px dashed rgba(var(--front-rgb-148-163-184), 0.34);
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    background: var(--front-color-white);
    width: 100%;
    max-width: none;
    box-shadow: 0 6px 16px rgba(var(--front-rgb-15-23-42), 0.02);
}

.p2p-ui.p2p-accounts .p2p-empty__actions {
    display: grid;
    gap: 8px;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
}

.p2p-ui.p2p-accounts .p2p-empty-state__icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, var(--front-palette-edf2ff) 0%, var(--front-palette-dfe8ff) 100%);
    color: var(--front-palette-4b60eb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--front-font-size-px-19);
    box-shadow: inset 0 2px 0 rgba(var(--front-color-white-rgb), 0.75);
}

.p2p-ui.p2p-accounts .p2p-empty-state__icon-plus {
    display: none;
}

.p2p-ui.p2p-accounts .p2p-empty-state__title {
    margin-bottom: 9px;
    font-size: var(--front-font-size-px-17);
    font-weight: var(--front-font-semibold);
    line-height: 1.25;
    color: var(--front-palette-0f172a);
}

.p2p-ui.p2p-accounts .p2p-empty-state__text {
    margin: 0 auto 16px;
    max-width: 380px;
    font-size: var(--front-font-xs);
    line-height: 1.75;
    color: var(--front-palette-64748b);
}

.p2p-ui.p2p-accounts .p2p-empty__actions .btn {
    display: inline-flex;
    align-items: center;
    width: 100%;
    min-height: 36px;
    justify-content: center;
    font-weight: var(--front-font-semibold);
    border-radius: 10px;
}

.p2p-ui.p2p-accounts .p2p-accounts-side__notice {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 14px 16px;
    padding: 16px 18px;
    border: 1px solid rgba(var(--front-rgb-91-109-241), 0.14);
    border-radius: 16px;
    background: linear-gradient(135deg, var(--front-palette-f7f9ff) 0%, var(--front-palette-eef3ff) 100%);
    box-shadow: 0 12px 30px rgba(var(--front-rgb-15-23-42), 0.05);
    color: var(--front-palette-334155);
}

.p2p-ui.p2p-accounts .p2p-accounts-side__notice-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--front-color-white);
    color: var(--front-palette-4b60eb);
    font-size: var(--front-font-md);
    font-weight: var(--front-font-bold);
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(var(--front-rgb-75-96-235), 0.12);
    flex-shrink: 0;
}

.p2p-ui.p2p-accounts .p2p-accounts-side__notice-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.p2p-ui.p2p-accounts .p2p-accounts-side__notice-label {
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--front-palette-4b60eb);
}

.p2p-ui.p2p-accounts .p2p-accounts-side__notice-text {
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-medium);
    line-height: 1.6;
    color: var(--front-palette-334155);
}

.p2p-ui.p2p-accounts .p2p-accounts-side__notice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(var(--front-rgb-75-96-235), 0.08);
    color: var(--front-palette-4b60eb);
    font-size: var(--front-font-base);
    flex-shrink: 0;
}

.p2p-ui.p2p-accounts .p2p-accounts-panel__body::-webkit-scrollbar,
.p2p-ui.p2p-accounts .p2p-accounts-methods::-webkit-scrollbar {
    width: 6px;
}

.p2p-ui.p2p-accounts .p2p-accounts-panel__body::-webkit-scrollbar-thumb,
.p2p-ui.p2p-accounts .p2p-accounts-methods::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(var(--front-rgb-91-109-241), 0.28);
}

.p2p-ui .p2p-offer-lines .p2p-offer-payment__value,
.p2p-ui .p2p-offer-lines .p2p-offer-limit__value {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.p2p-ui .p2p-offer-limit__label,
.p2p-ui .p2p-offer-payment__label {
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-bold);
    color: var(--front-palette-64748b);
}

.p2p-ui .p2p-offer-limit__value,
.p2p-ui .p2p-offer-payment__value {
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-semibold);
    color: var(--front-palette-334155);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.p2p-ui .p2p-offer-action-btn {
    border-radius: 10px !important;
    padding: 0 16px !important;
    min-height: 36px;
    line-height: 36px !important;
    font-size: var(--front-font-xs) !important;
    font-weight: var(--front-font-bold);
    letter-spacing: 0.2px;
    border: 0;
    color: var(--front-color-white);
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.p2p-ui .p2p-offer-action-btn:hover {
    color: var(--front-color-white);
    filter: brightness(0.96);
    box-shadow: 0 8px 16px rgba(var(--front-color-primary-rgb), 0.24);
}

.p2p-ui .p2p-offer-action-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--front-color-primary-rgb), 0.22);
}

.p2p-ui .p2p-offer-action-btn__text {
    display: block;
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.p2p-ui .p2p-offer-action-btn--lg {
    min-width: 132px;
    border-radius: 10px !important;
}

.p2p-ui .p2p-offer-cta .p2p-offer-action-btn {
    width: 100%;
}

.p2p-ui .p2p-operation-time {
    margin-top: 0;
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-semibold);
    color: var(--front-palette-64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.p2p-ui .p2p-operation-time i {
    font-size: var(--front-font-xs);
    color: var(--front-palette-94a3b8);
}

.p2p-ui .p2p-offer-action-btn--buy {
    background: var(--p2p-buy) !important;
}

.p2p-ui .p2p-offer-action-btn--sell {
    background: var(--p2p-sell) !important;
}

.p2p-ui .p2p-offer-action-btn--asset-btc {
    background: var(--p2p-primary-dark) !important;
}

.p2p-ui .p2p-offer-action-btn--asset-eth {
    background: var(--p2p-buy) !important;
}

.p2p-ui .p2p-offer-action-btn--self {
    background: var(--bs-primary) !important;
    border: 1px solid var(--bs-primary);
    color: var(--front-color-white);
}

.p2p-ui .p2p-offer-action-btn--self:hover {
    color: var(--front-color-white);
    filter: brightness(0.94);
    box-shadow: 0 8px 16px rgba(var(--front-rgb-13-110-253), 0.24);
}

.p2p-ui .p2p-offer-action-btn--self.is-disabled,
.p2p-ui .p2p-offer-action-btn--self:disabled {
    background: var(--bs-warning) !important;
    border: 1px solid var(--bs-warning);
    color: var(--front-color-white);
    box-shadow: none;
    opacity: 0.9;
}

.p2p-ui .p2p-operation-time--warning {
    color: var(--front-palette-b45309);
    white-space: normal;
    text-align: center;
}

.p2p-ui .p2p-operation-time--warning i {
    color: var(--front-color-warning);
}

.p2p-ui .p2p-offer-action-btn:disabled {
    opacity: 0.65;
}

.p2p-ui .p2p-cta-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid var(--front-palette-e5e7eb);
    background: var(--front-color-white);
}

.p2p-ui .p2p-cta-card__title {
    font-size: var(--front-font-base);
    font-weight: var(--front-font-extrabold);
    color: var(--front-palette-0f172a);
}

.p2p-ui .p2p-cta-card__text {
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-medium);
    color: var(--front-color-muted);
    margin-top: 2px;
}

.p2p-ui .p2p-cta-card--offer {
    background: linear-gradient(135deg, rgba(var(--front-color-primary-rgb), 0.1) 0%, rgba(var(--front-color-white-rgb), 1) 55%);
}

.p2p-ui .p2p-cta-card--trades {
    background: linear-gradient(135deg, rgba(var(--front-rgb-53-76-140), 0.1) 0%, rgba(var(--front-color-white-rgb), 1) 55%);
}

.p2p-ui .table-responsive {
    border: 1px solid var(--front-palette-e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    background: var(--front-color-white);
}

.p2p-ui .table {
    margin-bottom: 0;
}

.p2p-ui .table > thead {
    background: var(--front-palette-f0f4ff);
}

.p2p-ui .table > thead th {
    font-size: var(--front-font-sm);
    letter-spacing: 0;
    color: var(--front-palette-64748b);
    font-weight: var(--front-font-medium);
    text-transform: none;
    padding: 14px 20px;
    border-bottom: 1px solid var(--front-palette-e2e8f0);
    border-top: 0;
    white-space: nowrap;
}

.p2p-ui .table > tbody td {
    padding: 18px 20px;
    vertical-align: middle;
    border-bottom: 1px solid var(--front-palette-f1f5f9);
}

.p2p-ui .table > tbody tr:last-child td {
    border-bottom: 0;
}

.p2p-ui .table td.text-end {
    white-space: nowrap;
}

.p2p-ui .table > tbody tr:hover {
    background: var(--front-palette-f8fafc);
}

.p2p-ui .badge {
    font-weight: var(--front-font-semibold);
    letter-spacing: 0.2px;
    padding: 6px 10px;
    border-radius: 999px;
}

.p2p-ui .badge.bg-success {
    background: rgba(var(--front-color-success-rgb), 0.12) !important;
    border: 1px solid rgba(var(--front-color-success-rgb), 0.2);
    color: var(--p2p-buy) !important;
}

.p2p-ui .badge.bg-danger {
    background: rgba(var(--front-color-danger-rgb), 0.12) !important;
    border: 1px solid rgba(var(--front-color-danger-rgb), 0.2);
    color: var(--p2p-sell) !important;
}

.p2p-ui .badge.bg-warning {
    background: rgba(var(--front-rgb-240-185-11), 0.16) !important;
    border: 1px solid rgba(var(--front-rgb-240-185-11), 0.24);
    color: var(--front-palette-111827) !important;
}

.p2p-ui .badge.bg-secondary {
    background: rgba(var(--front-color-muted-rgb), 0.12) !important;
    border: 1px solid rgba(var(--front-color-muted-rgb), 0.2);
    color: var(--front-color-text) !important;
}

.p2p-ui .badge.bg-info {
    background: rgba(var(--front-rgb-14-165-233), 0.12) !important;
    border: 1px solid rgba(var(--front-rgb-14-165-233), 0.2);
    color: var(--front-palette-0369a1) !important;
}

.p2p-ui .badge.bg-dark {
    background: rgba(var(--front-rgb-17-24-39), 0.12) !important;
    border: 1px solid rgba(var(--front-rgb-17-24-39), 0.2);
    color: var(--front-palette-111827) !important;
}

.p2p-ui .p2p-action-btn {
    min-width: 90px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: var(--front-font-semibold);
    border-radius: 20px !important;
    padding: 0 24px !important;
    line-height: 36px !important;
    font-size: var(--front-font-base);
    letter-spacing: 0.2px;
}

.p2p-ui .p2p-action-btn.btn-primary,
.p2p-ui .p2p-action-btn.btn-primary:hover,
.p2p-ui .p2p-action-btn.btn-primary:focus {
    background: var(--main-color);
    border-color: var(--main-color);
    color: var(--front-color-white);
}

.p2p-ui .p2p-action-btn.btn-success,
.p2p-ui .p2p-action-btn.btn-success:hover,
.p2p-ui .p2p-action-btn.btn-success:focus {
    background: var(--p2p-buy);
    border-color: var(--p2p-buy);
}

.p2p-ui .p2p-action-btn.btn-danger,
.p2p-ui .p2p-action-btn.btn-danger:hover,
.p2p-ui .p2p-action-btn.btn-danger:focus {
    background: var(--p2p-sell);
    border-color: var(--p2p-sell);
}

.p2p-ui .p2p-action-btn.btn-warning,
.p2p-ui .p2p-action-btn.btn-warning:hover,
.p2p-ui .p2p-action-btn.btn-warning:focus {
    background: var(--front-palette-f0b90b);
    border-color: var(--front-palette-f0b90b);
    color: var(--front-palette-111827);
}

.p2p-ui .p2p-link-muted {
    color: var(--muted-color);
    text-decoration: none;
}

.p2p-ui .p2p-link-muted:hover {
    color: var(--heading-color);
    text-decoration: underline;
}

.p2p-ui .p2p-offer-card .p2p-advertiser {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.p2p-ui .p2p-advertiser__avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--front-font-bold);
    font-size: var(--front-font-xs);
    letter-spacing: 0.5px;
    color: var(--front-palette-1e40af);
    background: var(--front-palette-dbeafe);
    border: 1px solid var(--front-palette-bfdbfe);
    flex-shrink: 0;
    margin: 0;
}

.p2p-ui .p2p-advertiser__meta {
    min-width: 0;
}

.p2p-ui .p2p-advertiser__details {
    margin-top: 6px;
    min-width: 0;
}

.p2p-ui .p2p-advertiser__details .p2p-offer-row {
    justify-content: flex-start;
}

.p2p-ui .p2p-advertiser__name {
    font-weight: var(--front-font-semibold);
    color: var(--front-palette-111827);
    font-size: var(--front-font-base);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
    flex: 1 1 auto;
}

.p2p-ui .p2p-advertiser__name-link {
    color: inherit;
    text-decoration: none;
}

.p2p-ui .p2p-advertiser__name-link:hover {
    text-decoration: underline;
}

.p2p-ui .p2p-advertiser__name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.p2p-ui .p2p-advertiser__avatar--img {
    padding: 0;
    overflow: hidden;
    background: var(--front-color-white);
    border-color: var(--front-palette-e5e7eb);
    margin: 0;
}

.p2p-ui .p2p-advertiser__avatar--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.p2p-ui .p2p-seller-badges {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    row-gap: 5px;
}

.p2p-ui .p2p-seller-badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--front-font-2xs);
    line-height: 1.4;
    font-weight: var(--front-font-extrabold);
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.p2p-ui .p2p-seller-badge--trusted {
    background: rgba(var(--front-color-success-rgb), 0.12);
    border-color: rgba(var(--front-color-success-rgb), 0.20);
    color: var(--front-palette-166534);
}

.p2p-ui .p2p-seller-badge--verified {
    background: rgba(var(--front-rgb-59-130-246), 0.12);
    border-color: rgba(var(--front-rgb-59-130-246), 0.20);
    color: var(--front-palette-1d4ed8);
}

.p2p-ui .p2p-seller-badge--volume {
    background: rgba(var(--front-rgb-249-115-22), 0.14);
    border-color: rgba(var(--front-rgb-249-115-22), 0.22);
    color: var(--front-palette-9a3412);
}

.p2p-ui.p2p-trader-profile {
    --p2p-trader-accent: var(--main-color);
    --p2p-trader-accent-hover: var(--hover-color);
    --p2p-trader-accent-soft: rgba(var(--front-color-primary-rgb), 0.08);
    --p2p-trader-accent-border: rgba(var(--front-color-primary-rgb), 0.18);
    --p2p-trader-ink: var(--front-palette-1a2240);
    --p2p-trader-copy: var(--front-palette-5a6785);
    --p2p-trader-muted: var(--front-palette-8693ac);
    --p2p-trader-line: var(--front-palette-e6eaf5);
    --p2p-trader-surface-soft: var(--front-palette-f7f9ff);
}

.p2p-ui.p2p-trader-profile .card-main.p2p-card-main {
    display: grid;
    gap: 12px;
}

.p2p-ui.p2p-trader-profile .p2p-trader-hero {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--p2p-trader-line);
    background: linear-gradient(180deg, var(--front-color-white) 0%, var(--p2p-trader-surface-soft) 100%);
    box-shadow: 0 10px 26px rgba(var(--front-color-primary-rgb), 0.05);
}

.p2p-ui.p2p-trader-profile .p2p-trader-hero__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
    gap: 14px;
    align-items: stretch;
}

.p2p-ui.p2p-trader-profile .p2p-trader-hero__identity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.p2p-ui.p2p-trader-profile .p2p-trader-hero__avatar {
    width: 58px;
    height: 58px;
    font-size: var(--front-font-xl);
    border-width: 2px;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(var(--front-color-primary-rgb), 0.14);
}

.p2p-ui.p2p-trader-profile .p2p-trader-hero__copy {
    display: grid;
    gap: 5px;
    min-width: 0;
    flex: 1 1 auto;
}

.p2p-ui.p2p-trader-profile .p2p-trader-hero__eyebrow,
.p2p-ui.p2p-trader-profile .p2p-trader-section__eyebrow {
    display: inline-block;
    font-size: var(--front-font-2xs);
    font-weight: var(--front-font-extrabold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--p2p-trader-muted);
}

.p2p-ui.p2p-trader-profile .p2p-trader-hero__name {
    margin: 0;
    font-size: clamp(18px, 2.2vw, 22px);
    line-height: 1.2;
    font-weight: var(--front-font-extrabold);
    letter-spacing: -0.02em;
    color: var(--p2p-trader-ink);
    word-break: break-word;
}

.p2p-ui.p2p-trader-profile .p2p-trader-hero__badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.p2p-ui.p2p-trader-profile .p2p-trader-hero__meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-semibold);
    color: var(--p2p-trader-muted);
}

.p2p-ui.p2p-trader-profile .p2p-trader-hero__meta i {
    font-size: var(--front-font-2xs);
    color: var(--p2p-trader-accent);
}

.p2p-ui.p2p-trader-profile .p2p-trader-hero__trust {
    display: grid;
    gap: 8px;
    align-content: center;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--p2p-trader-accent-border);
    background: linear-gradient(180deg, var(--p2p-trader-accent-soft) 0%, rgba(var(--front-color-white-rgb), 0.55) 100%);
}

.p2p-ui.p2p-trader-profile .p2p-trader-hero__trust-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.p2p-ui.p2p-trader-profile .p2p-trader-hero__trust-label {
    font-size: var(--front-font-2xs);
    font-weight: var(--front-font-extrabold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--p2p-trader-muted);
}

.p2p-ui.p2p-trader-profile .p2p-trader-hero__trust-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: var(--front-font-2xs);
    font-weight: var(--front-font-extrabold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--front-color-white);
    color: var(--p2p-trader-accent);
    border: 1px solid var(--p2p-trader-accent-border);
}

.p2p-ui.p2p-trader-profile .p2p-trader-hero__trust-chip.is-trusted {
    background: rgba(var(--front-rgb-34-197-94), 0.12);
    color: var(--front-palette-15803d);
    border-color: rgba(var(--front-rgb-34-197-94), 0.28);
}

.p2p-ui.p2p-trader-profile .p2p-trader-hero__trust-chip.is-verified {
    background: rgba(var(--front-rgb-59-130-246), 0.12);
    color: var(--front-palette-1d4ed8);
    border-color: rgba(var(--front-rgb-59-130-246), 0.28);
}

.p2p-ui.p2p-trader-profile .p2p-trader-hero__trust-chip.is-growing {
    background: rgba(var(--front-rgb-245-158-11), 0.12);
    color: var(--front-palette-b45309);
    border-color: rgba(var(--front-rgb-245-158-11), 0.28);
}

.p2p-ui.p2p-trader-profile .p2p-trader-hero__trust-score {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-size: var(--front-font-3xl);
    line-height: 1;
    font-weight: var(--front-font-extrabold);
    letter-spacing: -0.03em;
    color: var(--p2p-trader-ink);
}

.p2p-ui.p2p-trader-profile .p2p-trader-hero__trust-score small {
    font-size: var(--front-font-sm);
    font-weight: var(--front-font-bold);
    color: var(--p2p-trader-muted);
}

.p2p-ui.p2p-trader-profile .p2p-trader-hero__trust-bar {
    position: relative;
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(var(--front-color-primary-rgb), 0.12);
}

.p2p-ui.p2p-trader-profile .p2p-trader-hero__trust-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--p2p-trader-accent) 0%, var(--p2p-trader-accent-hover) 100%);
}

.p2p-ui.p2p-trader-profile .p2p-trader-hero__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.p2p-ui.p2p-trader-profile .p2p-trader-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--p2p-trader-line);
    background: var(--front-color-white);
}

.p2p-ui.p2p-trader-profile .p2p-trader-stat__icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--p2p-trader-accent-soft);
    color: var(--p2p-trader-accent);
    font-size: var(--front-font-sm);
}

.p2p-ui.p2p-trader-profile .p2p-trader-stat__body {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.p2p-ui.p2p-trader-profile .p2p-trader-stat__label {
    font-size: var(--front-font-2xs);
    font-weight: var(--front-font-extrabold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--p2p-trader-muted);
}

.p2p-ui.p2p-trader-profile .p2p-trader-stat__value {
    font-size: var(--front-font-lg);
    line-height: 1.15;
    font-weight: var(--front-font-extrabold);
    letter-spacing: -0.02em;
    color: var(--p2p-trader-ink);
}

.p2p-ui.p2p-trader-profile .p2p-trader-stat__note {
    font-size: var(--front-font-size-px-105);
    color: var(--p2p-trader-muted);
}

.p2p-ui.p2p-trader-profile .p2p-trader-section {
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--p2p-trader-line);
    background: var(--front-color-white);
    height: 100%;
}

.p2p-ui.p2p-trader-profile .p2p-trader-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.p2p-ui.p2p-trader-profile .p2p-trader-section__head--inline {
    width: 100%;
    margin-bottom: 0;
}

.p2p-ui.p2p-trader-profile .p2p-trader-section__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.p2p-ui.p2p-trader-profile .p2p-trader-section__title {
    margin: 4px 0 0;
    font-size: var(--front-font-lg);
    line-height: 1.2;
    font-weight: var(--front-font-extrabold);
    letter-spacing: -0.02em;
    color: var(--p2p-trader-ink);
}

.p2p-ui.p2p-trader-profile .p2p-trader-section__subtitle {
    margin: 4px 0 0;
    font-size: var(--front-font-size-px-115);
    line-height: 1.5;
    color: var(--p2p-trader-copy);
}

.p2p-ui.p2p-trader-profile .p2p-trader-section__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--p2p-trader-accent-border);
    background: var(--p2p-trader-accent-soft);
    color: var(--p2p-trader-accent);
    font-size: var(--front-font-2xs);
    font-weight: var(--front-font-extrabold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.p2p-ui.p2p-trader-profile .p2p-trader-reviews {
    display: grid;
    gap: 8px;
}

.p2p-ui.p2p-trader-profile .p2p-trader-review-card {
    display: grid;
    gap: 6px;
    padding: 12px 13px;
    border-radius: 12px;
    border: 1px solid var(--p2p-trader-line);
    background: var(--p2p-trader-surface-soft);
}

.p2p-ui.p2p-trader-profile .p2p-trader-review-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.p2p-ui.p2p-trader-profile .p2p-trader-review-card__name {
    margin: 0;
    font-size: var(--front-font-sm);
    font-weight: var(--front-font-bold);
    color: var(--p2p-trader-ink);
}

.p2p-ui.p2p-trader-profile .p2p-trader-review-card__time {
    font-size: var(--front-font-size-px-105);
    color: var(--p2p-trader-muted);
}

.p2p-ui.p2p-trader-profile .p2p-trader-review-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
    color: var(--front-palette-cbd5e1);
    font-size: var(--front-font-size-px-105);
    font-weight: var(--front-font-bold);
}

.p2p-ui.p2p-trader-profile .p2p-trader-review-card__rating .is-active {
    color: var(--front-palette-f59e0b);
}

.p2p-ui.p2p-trader-profile .p2p-trader-review-card__comment {
    margin: 0;
    font-size: var(--front-font-xs);
    line-height: 1.55;
    color: var(--p2p-trader-copy);
}

.p2p-ui.p2p-trader-profile .p2p-trader-empty {
    display: grid;
    gap: 6px;
    place-items: center;
    padding: 22px 16px;
    text-align: center;
    border-radius: 12px;
    border: 1px dashed var(--p2p-trader-accent-border);
    background: var(--p2p-trader-accent-soft);
}

.p2p-ui.p2p-trader-profile .p2p-trader-empty__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--front-color-white);
    color: var(--p2p-trader-accent);
    font-size: var(--front-font-lg);
}

.p2p-ui.p2p-trader-profile .p2p-trader-empty__title {
    margin: 0;
    font-size: var(--front-font-base);
    font-weight: var(--front-font-extrabold);
    color: var(--p2p-trader-ink);
}

.p2p-ui.p2p-trader-profile .p2p-trader-empty__text {
    max-width: 340px;
    margin: 0;
    font-size: var(--front-font-size-px-115);
    line-height: 1.55;
    color: var(--p2p-trader-copy);
}

.p2p-ui.p2p-trader-profile .p2p-trader-tips {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.p2p-ui.p2p-trader-profile .p2p-trader-tips li {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--p2p-trader-line);
    background: var(--p2p-trader-surface-soft);
    font-size: var(--front-font-xs);
    line-height: 1.55;
    color: var(--p2p-trader-copy);
}

.p2p-ui.p2p-trader-profile .p2p-trader-tips__icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--p2p-trader-accent-soft);
    color: var(--p2p-trader-accent);
    font-size: var(--front-font-2xs);
    font-weight: var(--front-font-bold);
    flex-shrink: 0;
}

.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel {
    margin-top: 0;
    overflow: hidden;
    border-radius: 20px;
}

.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-offers-panel__head {
    padding: 16px 18px;
    border-radius: 20px 20px 0 0;
    border-bottom: 1px solid var(--front-palette-edf2f9);
    background: radial-gradient(circle at top right, rgba(var(--front-rgb-240-185-11), 0.12), transparent 30%),
    linear-gradient(180deg, var(--front-color-white) 0%, var(--front-palette-f8fbff) 100%);
}

.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-offers-panel__body,
.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel__body {
    padding: 10px 0 0;
    width: 100%;
    max-height: none;
    overflow: visible;
    margin-right: 0;
    padding-right: 0;
    background: linear-gradient(180deg, var(--front-color-white) 0%, var(--front-palette-fbfdff) 100%);
}

.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-offer-card--profile {
    gap: 8px;
    padding: 9px;
    border-radius: 16px;
    box-shadow: 0 14px 28px rgba(var(--front-rgb-15-23-42), 0.04);
}

.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-offer-card--profile .p2p-offer-card__head {
    min-height: 0;
    row-gap: 6px;
}

.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-offer-card__seller--profile {
    align-items: center;
}

.p2p-ui.p2p-trader-profile .p2p-offer-profile-context {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.p2p-ui.p2p-trader-profile .p2p-offer-profile-context__side {
    flex-shrink: 0;
}

.p2p-ui.p2p-trader-profile .p2p-offer-profile-context__copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.p2p-ui.p2p-trader-profile .p2p-offer-profile-context__title {
    font-size: var(--front-font-base);
    font-weight: var(--front-font-bold);
    line-height: 1.2;
    color: var(--front-palette-1f2d5c);
}

.p2p-ui.p2p-trader-profile .p2p-offer-profile-context__meta {
    font-size: var(--front-font-xs);
    color: var(--front-palette-7280a7);
}

.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-offer-chip,
.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-offer-card__promo-row .p2p-seller-badge--compact,
.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-available-badge--compact,
.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-payment-pill {
    padding: 4px 9px;
    font-size: var(--front-font-2xs);
}

.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-offer-card__promo-row {
    min-height: 0;
}

.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-offer-body {
    padding: 11px 12px;
    gap: 10px;
    border-radius: 14px;
}

.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-offer-price-base {
    font-size: var(--front-font-lg);
}

.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-offer-price-number {
    font-size: var(--front-font-2xl);
}

.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-offer-price-fiat {
    font-size: var(--front-font-lg);
}

.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-offer-price-per,
.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-offer-limit__label,
.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-offer-payment__label,
.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-offer-compact-meta__label {
    font-size: var(--front-font-2xs);
}

.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-offer-limit__value,
.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-offer-payment__value,
.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-offer-compact-meta__value {
    font-size: var(--front-font-xs);
}

.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-offer-payment-row {
    margin-top: 8px;
    padding-top: 10px;
}

.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-offer-compact-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-offer-compact-meta__item {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 8px 9px;
    border-radius: 10px;
    border: 1px solid var(--front-palette-edf1f7);
    background: var(--front-palette-fbfcff);
}

.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-offer-compact-meta__label {
    font-weight: var(--front-font-extrabold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--front-palette-7b879d);
}

.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-offer-compact-meta__value {
    color: var(--front-palette-41506f);
    line-height: 1.45;
}

.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-offer-cta {
    min-width: 132px;
    gap: 4px;
}

.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-offer-action-btn {
    min-height: 36px;
    line-height: 36px !important;
    padding: 0 13px !important;
    border-radius: 12px !important;
    font-size: var(--front-font-xs) !important;
    box-shadow: 0 10px 22px rgba(var(--front-rgb-63-127-232), 0.14);
}

.p2p-ui.p2p-trader-profile .p2p-trader-ads-panel .p2p-operation-time {
    justify-content: flex-start;
    font-size: var(--front-font-2xs);
}

.p2p-ui .p2p-offer-payment__value[data-bs-toggle="popover"] {
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.p2p-ui .p2p-advertiser__sub {
    font-size: var(--front-font-xs);
    color: var(--muted-color);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.p2p-ui .p2p-side-badge {
    font-size: var(--front-font-2xs);
    padding: 2px 7px;
    line-height: 1.4;
}

.p2p-ui .p2p-price {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.p2p-ui .p2p-price__value {
    font-weight: var(--front-font-bold);
    color: var(--front-palette-1e293b);
    font-size: var(--front-font-size-px-17);
    line-height: 1.2;
}

.p2p-ui .p2p-price__ccy {
    font-size: var(--front-font-xs);
    color: var(--muted-color);
    font-weight: var(--front-font-normal);
}

.p2p-ui .p2p-limit__range {
    font-weight: var(--front-font-medium);
    color: var(--front-color-text);
    font-size: var(--front-font-base);
    line-height: 1.5;
}

.p2p-ui .p2p-payment-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.p2p-ui .p2p-payment-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--front-font-sm);
    color: var(--front-color-text);
    line-height: 1.4;
}

.p2p-ui .p2p-payment-tag {
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--tag-color, var(--front-palette-f0b90b));
    flex-shrink: 0;
}

.p2p-ui .p2p-payment-name {
    white-space: nowrap;
}

.p2p-ui .p2p-action-cell {
    vertical-align: middle;
}

.p2p-ui .p2p-action-wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* ---- Desktop: hide mobile card cell, show filter toggle ---- */
.p2p-ui .p2p-td-mobile-card {
    display: none;
}

.single-form-card .money-history-card-main .single-select-inner .current {
    font-weight: var(--front-font-medium);
}

.summery-list {
    margin: 0;
    padding: 0;
}

.summery-list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 8px 0;
}

.summery-list li + li {
    border-top: 1px dashed var(--front-palette-7085ff);
}

.history-table .table-list {
    margin: 0;
    padding: 0;
}

.history-table .table-list .list-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: var(--front-palette-f1f3ff);
    padding: 13px 20px;
    border-radius: 8px;
    font-weight: var(--front-font-medium);
}

.history-table .table-list .list-header li {
    list-style: none;
    font-weight: var(--front-font-medium);
    flex: 1;
    text-align: left;
}

/* Content Row Styles */
.history-table .table-list .list-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border: 1px solid var(--border-color);
    padding: 13px 20px;
    border-radius: 8px;
    margin-top: 10px;
    font-size: var(--front-font-base);
}

.history-table .table-list .list-content li {
    list-style: none;
    font-size: var(--front-font-base);
    flex: 1;
    text-align: left;
}

.history-table .table-list .list-content li .badge {
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: var(--front-font-medium);
}

.history-table .table-list .list-content li .badge {
    background: var(--front-palette-ebf3ef);
    color: var(--front-palette-34865b);
}

.history-table .table-list .list-content li .badge.red {
    background: var(--front-palette-fbeaec);
    color: var(--front-palette-d52e46);
}

.history-table .table-list .list-content li .badge.yellow {
    background: var(--front-palette-fff7e5);
    color: var(--front-palette-ffac00);
}

.checkbox-slide-check {
    display: inline-block;
    position: relative;
    padding-left: 50px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-top: -20px;
}

.checkbox-slide-check input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkbox-slide-check input:checked ~ .checkbox__checkmark {
    background-color: var(--main-color);
}

.checkbox-slide-check input:checked ~ .checkbox__checkmark:after {
    left: 21px;
}

.checkbox-slide-check:hover input ~ .checkbox__checkmark {
    background-color: var(--front-palette-e0e4fc);
}

.checkbox-slide-check:hover input:checked ~ .checkbox__checkmark {
    background-color: var(--main-color);
}

.checkbox-slide-check .checkbox__checkmark {
    position: absolute;
    top: -15px;
    left: 0;
    height: 22px;
    width: 40px;
    background-color: var(--front-palette-e0e4fc);
    -webkit-transition: background-color 0.25s ease;
    transition: background-color 0.25s ease;
    border-radius: 11px;
}

.checkbox-slide-check .checkbox__checkmark:after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 16px;
    height: 16px;
    display: block;
    background-color: var(--front-color-white);
    border-radius: 50%;
    -webkit-transition: left 0.25s ease;
    transition: left 0.25s ease;
}

.checkbox-slide-check .checkbox__body {
    color: var(--front-palette-333);
    line-height: 1.4;
    font-size: var(--front-font-lg);
    -webkit-transition: color 0.25s ease;
    transition: color 0.25s ease;
}

.left-menu-box-card .logo {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
    margin-bottom: 25px;
    display: block;
}

.left-menu-box-mobile {
    margin: 0;
    padding: 0;
}

.left-menu-box-mobile li {
    display: block;
}

.left-menu-box-mobile li + li {
    margin-top: 8px;
}

.left-menu-box-mobile li a {
    display: block;
    padding: 4px 0;
    border-radius: 8px;
}

.left-menu-box-mobile li a img {
    margin-top: -4px;
    margin-right: 5px;
}

.left-menu-box-mobile li a i {
    float: right;
    margin-top: 5px;
}

.left-menu-box-mobile li a svg {
    float: right;
    margin-top: 5px;
}

.left-menu-box-mobile li a:hover {
    color: var(--main-color);
}

.left-menu-box-mobile li a:hover img {
    -webkit-filter: invert(31%) sepia(69%) saturate(7492%) hue-rotate(236deg) brightness(102%) contrast(101%);
    filter: invert(31%) sepia(69%) saturate(7492%) hue-rotate(236deg) brightness(102%) contrast(101%);
}

.sidebar-copyright {
    position: absolute;
    left: 0;
    bottom: 0;
    border-top: 1px solid var(--border-color);
    margin: 18px;
    padding-top: 15px;
    width: 100%;
    right: 0;
}

.avatar-upload {
    position: relative;
    max-width: 100%;
}

.avatar-upload .avatar-edit {
    position: absolute;
    right: 12px;
    z-index: 1;
    top: 10px;
}

.avatar-upload .avatar-edit input {
    display: none;
}

.avatar-upload .avatar-edit input + label svg {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-bottom: 0;
    border-radius: 100%;
    background: var(--bg);
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: var(--front-font-normal);
    transition: all 0.2s ease-in-out;
}

.avatar-upload .avatar-edit input + label svg:hover {
    background: var(--sky-color);
    border-color: var(--gray-border);
}

.avatar-upload .avatar-preview {
    height: 100px;
    position: relative;
    border-radius: 2%;
    border: 1px dashed var(--border-color);
}

.avatar-upload .avatar-preview > div {
    height: 100%;
    border-radius: 2%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.checkboxes-item.style-border .checkbox-slide-check input:checked ~ .checkbox__checkmark {
    border: 1px solid var(--front-palette-6c767c);
    background: transparent;
}

.checkboxes-item.style-border .checkbox-slide-check input:checked ~ .checkbox__checkmark:after {
    background: var(--front-palette-6c767c);
    top: 2px;
}

.checkboxes-item.style-light-border .checkbox-slide-check input:checked ~ .checkbox__checkmark {
    border: 1px solid var(--front-palette-b5bbbd);
    background: transparent;
}

.checkboxes-item.style-light-border .checkbox-slide-check input:checked ~ .checkbox__checkmark:after {
    background: var(--front-palette-b5bbbd);
    top: 2px;
}

.checkboxes-item.style-light-base .checkbox-slide-check input:checked ~ .checkbox__checkmark {
    background: var(--front-palette-8ca0ff);
}

.checkboxes-item.style-light-base .checkbox-slide-check input:checked ~ .checkbox__checkmark:after {
    background: var(--front-color-white);
}

/*pagination css*/
.pagination-list {
    margin: 0;
    padding: 0;
}

.pagination-list li {
    display: inline-block;
}

.pagination-list li a {
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    background: var(--front-palette-f3f7fb);
    border: 1px solid var(--border-color);
    display: inline-block;
    font-weight: var(--front-font-medium);
    color: var(--front-color-text-soft);
    border-radius: 6px;
}

.pagination-list li a.no-bg {
    background: transparent;
    border: 0;
}

.pagination-list li a:hover {
    background: var(--main-color);
    color: var(--front-color-white);
}

.pagination-list li a.prev {
    width: auto;
    padding: 0 16px;
    background: transparent;
}

.pagination-list li a.prev:hover {
    background: var(--main-color);
}

.pagination-list li a.next {
    width: auto;
    padding: 0 16px;
    background: transparent;
}

.pagination-list li a.next:hover {
    background: var(--main-color);
}

.pagination-list li a.active {
    background: var(--main-color);
    color: var(--front-color-white);
}

.pagination-list li + li {
    margin-left: 5px;
}

.check-card-area {
    background: var(--front-palette-e1ede6);
    color: var(--front-palette-34865b);
    padding: 20px;
    max-width: 280px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.check-card-area svg {
    width: 50px;
    margin-top: 3px;
}

.check-card-area p {
    margin-left: 10px;
    margin-bottom: 0;
    color: var(--front-palette-34865b);
}

.refund-table ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    margin: 0;
    padding: 0;
    margin-bottom: 15px;
}

.refund-table ul li {
    list-style: none;
    position: relative;
}

.refund-table ul li h6 {
    font-size: var(--front-font-sm);
    color: var(--front-color-heading);
    margin-bottom: 2px;
}

.refund-table ul li p {
    margin-bottom: 0;
    color: var(--front-color-text-soft);
    font-size: var(--front-font-2xs);
}

.refund-table ul li:first-child {
    padding-left: 50px;
}

.refund-table ul li:first-child svg {
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 35px;
    margin-top: -5px;
}

.refund-table ul li a:hover svg rect {
    stroke: var(--main-color);
}

.refund-table ul li a:hover svg circle {
    fill: var(--main-color);
}

.refund-table ul.bg-light-yellow li .btn {
    background: rgba(var(--front-rgb-255-172-11), 0.1882352941);
    color: var(--front-palette-ffac0b);
}

.refund-table ul.bg-light-yellow li .btn:hover {
    background: var(--front-palette-ffac0b);
    color: var(--front-color-white);
}

.refund-table ul.bg-light-blue li .btn {
    background: rgba(var(--front-rgb-54-205-236), 0.1882352941);
    color: var(--front-palette-36cdec);
}

.refund-table ul.bg-light-blue li .btn:hover {
    background: var(--front-palette-36cdec);
    color: var(--front-color-white);
}

.single-element-tab {
    border-color: var(--border-color);
    display: inline-block;
    margin-bottom: 20px;
}

.single-element-tab li {
    display: inline-block;
}

.single-element-tab li a {
    color: var(--heading-color) !important;
    border: 0 !important;
    background: transparent !important;
    padding: 10px 0;
}

.single-element-tab li a svg {
    color: var(--main-color);
    margin-top: -3px;
    margin-right: 2px;
    height: 16px;
    width: 16px;
}

.single-element-tab li a.active {
    border-bottom: 2px solid var(--main-color) !important;
}

.single-element-tab li + li {
    margin-left: 20px;
}

.nav-tabs .nav-link {
    border: none;
    color: var(--front-palette-666);
    font-size: var(--front-font-lg);
    margin-right: 10px;
}

.nav-tabs .nav-link:hover {
    border: none;
    color: var(--main-color);
}

.nav-tabs .nav-link.active {
    color: var(--main-color);
    border-bottom: 2px solid var(--main-color);
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--main-color);
    background-color: transparent;
}

.action-bar-area {
    display: inline-block;
}

.action-bar-area ul {
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.action-bar-area ul li {
    list-style: none;
}

.action-bar-area ul li + li {
    margin-left: 20px;
}

.action-bar-area ul li .single-select {
    height: 40px !important;
    line-height: 40px !important;
    padding-right: 48px !important;
}

.action-bar-area ul li .single-select .list {
    display: block;
}

.action-bar-area ul li .single-select .list li {
    display: block;
    margin-left: 0;
}

.action-bar-area ul li .action-btn {
    height: 40px;
    width: 48px;
    line-height: 40px;
    display: inline-block;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.action-bar-area ul li .action-btn:hover {
    background: var(--main-color);
}

.action-bar-area ul li .action-btn:hover svg path {
    stroke: var(--front-color-white);
}

.action-bar-area ul li.search {
    padding-right: 20px;
    border-right: 1px solid var(--border-color);
    cursor: pointer;
}

.input-group-form-left input {
    height: 44px;
}

.input-group-form-left span {
    height: 44px;
    padding: 0 20px;
    border-radius: 5px 0 0 5px;
}

.input-group-form-right input {
    height: 44px;
}

.input-group-form-right span {
    height: 44px;
    padding: 0 20px;
    border-radius: 0 5px 5px 0;
}

.badge-area {
    background: var(--front-palette-05202b);
    padding: 35px;
}

.badge-area .border-bottom-1 {
    border-color: rgba(var(--front-color-white-rgb), 0.0862745098);
}

.all-badge-inner ul {
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.all-badge-inner ul li {
    list-style: none;
    display: inline-block;
    position: relative;
    width: 198px;
    height: 218px;
}

.all-badge-inner ul li .border-img {
    position: absolute;
    left: -9px;
    top: -9px;
    visibility: hidden;
    opacity: 0;
}

.all-badge-inner ul li .lock-img {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 2;
    margin-left: -10px;
    margin-top: -10px;
    visibility: visible;
    opacity: 1;
    width: 35px;
}

.all-badge-inner ul li + li {
    margin-left: 10px;
}

.all-badge-inner ul li.active .single-badge-inner {
    background: var(--main-color);
}

.all-badge-inner ul li.active .single-badge-inner:after {
    display: none;
}

.all-badge-inner ul li.active .single-badge-inner p {
    color: var(--front-palette-d5d5d5);
}

.all-badge-inner ul li.active .border-img {
    visibility: visible;
    opacity: 1;
}

.all-badge-inner ul li.active .lock-img {
    visibility: hidden;
    opacity: 0;
}

.single-badge-inner {
    background: var(--front-color-black);
    display: inline-block;
    width: 180px;
    height: 200px;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    mask-image: url('../../general/static/rank/badge-bg.png');
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
}

.single-badge-inner:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(var(--front-color-black-rgb), 0.8);
}

.single-badge-inner .badge-wrap img {
    margin-bottom: 13px;
    width: 40px;
}

.single-badge-inner .badge-wrap h6 {
    font-size: var(--front-font-xl);
}

.single-badge-inner .badge-wrap p {
    padding: 0 30px;
    font-size: var(--front-font-base);
    color: var(--front-palette-d5d5d5);
    line-height: 1.3;
    margin-bottom: 0;
}

.single-badge-inner.active {
    background: var(--front-palette-1b3249);
}

/*--------------------------------------------------
    Mobile Bottom Tab Bar — premium native-app feel.
    Container: fixed, glassy white with subtle top border
    + safe-area-inset bottom padding for iPhone home bar.
    Tabs: icon + persistent label, muted gray when idle,
    brand-coloured with top accent indicator when active.
    The .icon / <svg> inherits colour via `color` alone
    (icons ship with fill/stroke="currentColor") — no
    brightness hacks.
---------------------------------------------------*/
.footer-area-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(var(--front-color-white-rgb), 0.96);
    -webkit-backdrop-filter: saturate(150%) blur(16px);
    backdrop-filter: saturate(150%) blur(16px);
    border-top: 1px solid rgba(var(--front-rgb-15-23-42), 0.07);
    box-shadow: 0 -6px 20px rgba(var(--front-rgb-15-23-42), 0.05);
    z-index: 999;
}

.footer-area-mobile ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 2px;
}

.footer-area-mobile ul li {
    flex: 1 1 0;
    min-width: 0;
    list-style: none;
    text-align: center;
    position: relative;
    background: transparent;
    border-radius: 12px;
    transition: background 0.2s ease;
}

/* Neutralise the legacy "fill tab with brand colour" hover/active look. */
.footer-area-mobile ul li:hover,
.footer-area-mobile ul li.active {
    background: transparent;
}

.footer-area-mobile ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    padding: 7px 4px 5px;
    position: relative;
    color: var(--front-palette-7a8599);
    text-decoration: none;
    border-radius: 12px;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease, transform 0.15s ease;
}

/* Icon — always 22px, inherits colour from the <a>. */
.footer-area-mobile ul li a svg,
.footer-area-mobile ul li a .icon {
    width: 22px;
    height: 22px;
    margin: 0;
    display: block;
    color: inherit;
    transition: transform 0.2s ease;
}

/* Label — always visible for clarity on a financial app. */
.footer-area-mobile ul li a span {
    display: block;
    opacity: 1;
    margin-top: 2px;
    font-size: var(--front-font-size-px-105);
    font-weight: var(--front-font-semibold);
    letter-spacing: 0.005em;
    line-height: 1.1;
    color: inherit;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

/* Active + hover + keyboard focus — brand colour + top accent. */
.footer-area-mobile ul li.active a,
.footer-area-mobile ul li a:hover,
.footer-area-mobile ul li a:focus-visible {
    color: var(--main-color);
    outline: none;
    background: transparent;
}

.footer-area-mobile ul li.active a span,
.footer-area-mobile ul li a:hover span,
.footer-area-mobile ul li a:focus-visible span {
    color: var(--main-color);
    font-size: var(--front-font-size-px-105);
    opacity: 1;
}

.footer-area-mobile ul li.active a svg,
.footer-area-mobile ul li a:hover svg,
.footer-area-mobile ul li a:focus-visible svg {
    color: var(--main-color);
    filter: none;
}

/* Top accent indicator for the active tab. */
.footer-area-mobile ul li.active a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--main-color);
}

.footer-area-mobile ul li.active a svg {
    transform: translateY(-1px);
}

/* Tap feedback. */
.footer-area-mobile ul li a:active {
    transform: scale(0.96);
}

/* Phone-specific polish — tighter spacing on very small screens. */
@media (max-width: 360px) {
    .footer-area-mobile {
        padding: 5px 3px calc(5px + env(safe-area-inset-bottom, 0px));
    }

    .footer-area-mobile ul li a {
        padding: 6px 2px 4px;
    }

    .footer-area-mobile ul li a svg,
    .footer-area-mobile ul li a .icon {
        width: 20px;
        height: 20px;
    }

    .footer-area-mobile ul li a span {
        font-size: var(--front-font-2xs);
    }
}

.svg-hover:hover svg path {
    fill: var(--front-palette-eff1ff);
}

.copy-icon {
    cursor: pointer;
    z-index: 10;
    position: relative;
    padding: 5px;
}

.bg-primary {
    background-color: var(--main-color) !important;
}

.form-select,
.form-control {
    border: 1px solid var(--border-color);
    border-radius: 5px;
    height: 45px;
    line-height: 45px;
    padding: 0 20px;
}

.text-primary {
    color: var(--main-color) !important;
}

.refund-table .header-row {
    font-weight: bold;
    background-color: var(--sky-color);
    padding: 10px;
    border-radius: 5px;
}

/* Styles for each wallet row */
.table-info .table-details {
    display: flex;
    align-items: center;
    gap: 8px;
}

.table-img {
    width: 40px;
    height: 30px;
    border-radius: 5%;
    object-fit: cover;
    vertical-align: middle;
}

.avatar-md {
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--front-font-size-rem-1);
    object-fit: contain;
}

.table-info h6, .table-info p {
    margin: 0;
    line-height: 1.2;
}

.force-left-align {
    text-align: left !important;
}

body.modal-open {
    padding-right: 0 !important;
}

.table thead th {
    border-bottom: 2px solid var(--border-color) !important;
}

.table {
    font-family: var(--body-font);
    font-size: var(--front-font-size-rem-0875); /* 14px font for table content */
    color: var(--paragraph-color);
}

.table-hover tbody tr:hover {
    background-color: var(--sky-color);
}

.table thead th {
    background-color: var(--sky-color);
    color: var(--heading-color);
    border-color: var(--border-color);
    font-size: var(--front-font-size-rem-09375);
    font-weight: var(--front-font-semibold);
}

.table tbody td {
    border-color: var(--border-color);
    font-size: var(--front-font-size-rem-0875);
}

.table td, .table th {
    padding: 0.75rem 1rem;
}

.fw-semibold {
    font-weight: var(--front-font-medium);
    color: var(--heading-color);
}

.text-muted {
    color: var(--front-palette-6c757d);
}

.badge {
    font-size: var(--front-font-size-rem-08);
    font-weight: var(--front-font-medium);
}

.card-header {
    background-color: var(--main-color);
    font-weight: var(--front-font-semibold);
}

.btn-light {
    color: var(--main-color);
    font-size: var(--front-font-size-rem-08);
}

.small, small {
    font-size: var(--front-font-size-em-0795);
}

.single-input-inner .input-group {
    border-radius: 5px;
    transition: box-shadow 0.2s ease;
}

.single-input-inner .input-group:focus-within {
    box-shadow: 0 0 0 1px rgba(var(--front-color-primary-rgb), 0.12);
}

.single-input-inner .input-group .form-control {
    border-radius: 5px 0 0 5px !important;
    border-color: var(--main-color);
}

.single-input-inner .input-group .form-control:focus {
    box-shadow: none;
}

.single-input-inner .input-group .form-control + .input-group-text {
    margin-left: -1px;
    padding: 0 16px;
    background: linear-gradient(180deg, var(--front-palette-f4f7ff) 0%, var(--front-palette-f4f7ff) 100%);
    color: var(--front-palette-3f7fe8);
    font-weight: var(--front-font-semibold);
    border-color: var(--front-palette-dce5f7);
    border-radius: 0 5px 5px 0 !important;
    box-shadow: inset 1px 0 0 rgba(var(--front-color-white-rgb), 0.85);
}

.input-group-text {
    border-color: var(--border-color);
}

.span-consistent {
    margin-top: 0.2rem;
    display: block;
}

.bg-transparent {
    background: transparent !important;
}

.transaction-item {
    border-radius: 10px;
    border: 1px solid var(--border-color) !important;
    transition: background-color 0.2s ease-in-out;

}

.transaction-item:hover {
    background-color: var(--front-palette-f8f9fa);
}

.transaction-icon {
    width: 50px;
    height: 50px;
    font-size: var(--front-font-size-rem-15);
    display: flex;
}

.transaction-details {
    font-size: var(--front-font-base);
    line-height: 1.5;
}

.fw-bold {
    font-weight: var(--front-font-semibold);
}

.badge {
    border-radius: 10px;
    font-size: var(--front-font-xs);
}

.text-dark {
    color: var(--front-color-heading);
}

.text-muted {
    color: var(--front-palette-6c757d);
}

/*---------------------------------------
    ## trx details
---------------------------------------*/

.user-dashboard .ud-trx-modal__dialog {
    max-width: 748px;
}

.user-dashboard .ud-trx-modal__content {
    position: relative;
    max-height: calc(100vh - 34px);
    border: 1px solid rgba(var(--front-rgb-217-226-241), 0.92);
    border-radius: 28px;
    padding: 0;
    overflow: hidden;
    background: radial-gradient(circle at top left, rgba(var(--front-color-primary-rgb), 0.08), transparent 26%),
    radial-gradient(circle at top right, rgba(var(--front-rgb-16-185-129), 0.08), transparent 22%),
    linear-gradient(180deg, var(--front-palette-fbfdff) 0%, var(--front-palette-f2f6ff) 100%);
    box-shadow: 0 28px 72px rgba(var(--front-rgb-15-23-42), 0.16);
}

.user-dashboard .ud-trx-modal__content::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(var(--front-color-white-rgb), 0.24), transparent 40%),
    linear-gradient(180deg, transparent 72%, rgba(var(--front-color-primary-rgb), 0.035));
}

.user-dashboard .ud-trx-modal__close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    padding: 8px;
    border-radius: 999px;
    background-color: rgba(var(--front-color-white-rgb), 0.94);
    box-shadow: 0 12px 22px rgba(var(--front-rgb-15-23-42), 0.08);
}

.user-dashboard .ud-trx-modal__body {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 15px;
    overflow-x: clip;
    overflow-y: auto;
}

.user-dashboard .ud-trx-modal__grabber {
    display: none;
    width: 44px;
    height: 5px;
    justify-self: center;
    border-radius: 999px;
    background: rgba(var(--front-rgb-123-137-161), 0.32);
}

.user-dashboard .ud-trx-modal__hero {
    position: relative;
    display: grid;
    gap: 9px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(var(--front-rgb-221-230-243), 0.92);
    background: radial-gradient(circle at top right, rgba(var(--front-color-primary-rgb), 0.08), transparent 34%),
    linear-gradient(145deg, var(--front-color-white) 0%, var(--front-palette-eef4ff) 100%);
    box-shadow: inset 0 1px 0 rgba(var(--front-color-white-rgb), 0.88), 0 14px 32px rgba(var(--front-rgb-15-23-42), 0.05);
    overflow: hidden;
}

.user-dashboard .ud-trx-modal__hero::before {
    content: "";
    position: absolute;
    inset: auto -64px -82px auto;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--front-color-primary-rgb), 0.12), transparent 72%);
    pointer-events: none;
}

.user-dashboard .ud-trx-modal__hero-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding-right: 40px;
}

.user-dashboard .ud-trx-modal__hero-brand {
    display: flex;
    align-items: center;
    min-width: 0;
}

.user-dashboard .ud-trx-modal__hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
    align-items: center;
}

.user-dashboard .ud-trx-modal__hero-badges .ud-trx-chip {
    max-width: 100%;
    padding: 3px 7px;
    font-size: var(--front-font-size-px-75);
    letter-spacing: 0.08em;
    text-align: center;
}

.user-dashboard .ud-trx-modal__eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(var(--front-color-white-rgb), 0.88);
    border: 1px solid rgba(var(--front-rgb-193-206-227), 0.92);
    color: var(--main-color);
    font-size: var(--front-font-size-px-8);
    font-weight: var(--front-font-extrabold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.user-dashboard .ud-trx-modal__title {
    margin: 0;
    color: var(--front-palette-10203c);
    font-size: var(--front-font-xl);
    font-weight: var(--front-font-extrabold);
    letter-spacing: -0.025em;
    line-height: 1.04;
}

.user-dashboard .ud-trx-modal__hero-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(198px, 222px);
    gap: 10px;
    align-items: center;
}

.user-dashboard .ud-trx-modal__identity {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 9px;
    align-items: center;
}

.user-dashboard .ud-trx-modal__hero-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: inline-grid;
    place-items: center;
    color: var(--main-color);
    background: linear-gradient(145deg, rgba(var(--front-color-primary-rgb), 0.14) 0%, rgba(var(--front-color-primary-rgb), 0.07) 100%);
    box-shadow: inset 0 1px 0 rgba(var(--front-color-white-rgb), 0.84), 0 14px 22px rgba(var(--front-color-primary-rgb), 0.1);
}

.user-dashboard .ud-trx-modal__hero-icon svg,
.user-dashboard .ud-trx-modal__hero-icon .icon {
    width: 18px;
    height: 18px;
}

.user-dashboard .ud-trx-modal__hero-icon.deposit {
    background: rgba(var(--front-color-success-rgb), 0.14);
    color: var(--front-palette-15803d);
}

.user-dashboard .ud-trx-modal__hero-icon.withdraw {
    background: rgba(var(--front-rgb-220-38-38), 0.14);
    color: var(--front-palette-b91c1c);
}

.user-dashboard .ud-trx-modal__hero-icon.send-money {
    background: rgba(var(--front-rgb-59-130-246), 0.14);
    color: var(--front-palette-1d4ed8);
}

.user-dashboard .ud-trx-modal__hero-icon.receive-money {
    background: rgba(var(--front-rgb-168-85-247), 0.14);
    color: var(--front-palette-7e22ce);
}

.user-dashboard .ud-trx-modal__hero-icon.request-money {
    background: rgba(var(--front-rgb-20-184-166), 0.14);
    color: var(--front-palette-0f766e);
}

.user-dashboard .ud-trx-modal__hero-icon.exchange-money {
    background: rgba(var(--front-rgb-251-146-60), 0.16);
    color: var(--front-palette-c2410c);
}

.user-dashboard .ud-trx-modal__hero-icon.reward {
    background: rgba(var(--front-rgb-234-179-8), 0.16);
    color: var(--front-palette-a16207);
}

.user-dashboard .ud-trx-modal__hero-icon.receive-payment {
    background: rgba(var(--front-rgb-14-165-233), 0.14);
    color: var(--front-palette-0369a1);
}

.user-dashboard .ud-trx-modal__identity-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.user-dashboard .ud-trx-modal__subtitle {
    margin: 0;
    color: var(--front-palette-52627d);
    font-size: var(--front-font-size-px-115);
    line-height: 1.45;
    word-break: break-word;
}

.user-dashboard .ud-trx-modal__amount-panel {
    display: grid;
    align-content: start;
    gap: 7px;
    padding: 12px 13px;
    border-radius: 15px;
    background: linear-gradient(155deg, var(--front-palette-0f172a) 0%, var(--front-palette-15253e) 58%, var(--front-palette-1d3f63) 100%);
    box-shadow: 0 18px 34px rgba(var(--front-rgb-15-23-42), 0.18);
}

.user-dashboard .ud-trx-modal__amount-label {
    font-size: var(--front-font-size-px-8);
    font-weight: var(--front-font-extrabold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(var(--front-color-white-rgb), 0.68);
}

.user-dashboard .ud-trx-modal__amount {
    font-size: var(--front-font-2xl);
    font-weight: var(--front-font-black);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: var(--front-color-white);
    word-break: break-word;
}

.user-dashboard .ud-trx-modal__amount.text-success {
    color: var(--front-palette-4ade80);
}

.user-dashboard .ud-trx-modal__amount.text-danger {
    color: var(--front-palette-f87171);
}

.user-dashboard .ud-trx-modal__amount-note {
    display: block;
    font-size: var(--front-font-size-px-88);
    line-height: 1.35;
    color: rgba(var(--front-color-white-rgb), 0.74);
    word-break: break-word;
}

.user-dashboard .ud-trx-modal__ledger {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 0.86fr);
    gap: 12px;
    align-items: start;
}

.user-dashboard .ud-trx-modal__panel,
.user-dashboard .ud-trx-modal__action-panel {
    min-width: 0;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(var(--front-rgb-216-224-239), 0.95);
    background: linear-gradient(180deg, rgba(var(--front-color-white-rgb), 0.98) 0%, rgba(var(--front-rgb-247-250-255), 0.98) 100%);
    box-shadow: 0 14px 28px rgba(var(--front-rgb-15-23-42), 0.05);
}

.user-dashboard .ud-trx-modal__panel--accent {
    background: linear-gradient(180deg, rgba(var(--front-rgb-247-251-255), 0.99) 0%, rgba(var(--front-rgb-235-243-255), 0.98) 100%);
}

.user-dashboard .ud-trx-modal__panel--note,
.user-dashboard .ud-trx-modal__action-panel {
    grid-column: 1 / -1;
}

.user-dashboard .ud-trx-modal__panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.user-dashboard .ud-trx-modal__panel-eyebrow,
.user-dashboard .ud-trx-modal__detail-label {
    font-size: var(--front-font-size-px-95);
    font-weight: var(--front-font-extrabold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--front-palette-70809a);
}

.user-dashboard .ud-trx-modal__panel-title {
    margin: 4px 0 0;
    color: var(--front-palette-11233f);
    font-size: var(--front-font-base);
    font-weight: var(--front-font-extrabold);
    line-height: 1.25;
}

.user-dashboard .ud-trx-modal__detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.user-dashboard .ud-trx-modal__detail-card {
    min-width: 0;
    display: grid;
    gap: 6px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(var(--front-rgb-223-230-243), 0.96);
    background: rgba(var(--front-color-white-rgb), 0.86);
    box-shadow: inset 0 1px 0 rgba(var(--front-color-white-rgb), 0.9);
}

.user-dashboard .ud-trx-modal__detail-value {
    min-width: 0;
    color: var(--front-palette-11233f);
    font-size: var(--front-font-sm);
    font-weight: var(--front-font-extrabold);
    line-height: 1.45;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.user-dashboard .ud-trx-modal__detail-value--mono {
    font-family: var(--front-font-mono);
    font-size: var(--front-font-size-px-115);
}

.user-dashboard .ud-trx-modal__money-list {
    display: grid;
    gap: 7px;
}

.user-dashboard .ud-trx-modal__money-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 14px;
    background: rgba(var(--front-color-white-rgb), 0.84);
    border: 1px solid rgba(var(--front-rgb-215-223-238), 0.92);
}

.user-dashboard .ud-trx-modal__money-row span {
    font-size: var(--front-font-size-px-95);
    font-weight: var(--front-font-extrabold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--front-palette-738199);
}

.user-dashboard .ud-trx-modal__money-row strong {
    font-size: var(--front-font-sm);
    font-weight: var(--front-font-black);
    line-height: 1.35;
    color: var(--front-palette-11233f);
    text-align: right;
    word-break: break-word;
}

.user-dashboard .ud-trx-modal__money-row--strong {
    background: linear-gradient(135deg, rgba(var(--front-color-primary-rgb), 0.1) 0%, rgba(var(--front-color-white-rgb), 0.92) 100%);
    border-color: rgba(var(--front-rgb-171-187-255), 0.84);
}

.user-dashboard .ud-trx-modal__note-copy,
.user-dashboard .ud-trx-modal__action-text {
    margin: 0;
    font-size: var(--front-font-xs);
    line-height: 1.7;
    color: var(--front-palette-56667f);
    white-space: pre-line;
    word-break: break-word;
}

.user-dashboard .ud-trx-modal__action-panel {
    display: grid;
    gap: 10px;
}

.user-dashboard .ud-trx-modal__textarea {
    min-height: 88px;
    border-radius: 14px;
    border-color: rgba(var(--front-rgb-199-211-230), 0.95);
    background: var(--front-palette-fbfdff);
    box-shadow: none;
}

.user-dashboard .ud-trx-modal__textarea:focus {
    border-color: rgba(var(--front-color-primary-rgb), 0.48);
    box-shadow: 0 0 0 4px rgba(var(--front-color-primary-rgb), 0.08);
}

.user-dashboard .ud-trx-modal__action-buttons,
.user-dashboard .ud-trx-modal__footer {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.user-dashboard .ud-trx-modal__action-btn,
.user-dashboard .ud-trx-modal__download,
.user-dashboard .ud-trx-modal__dismiss {
    min-height: 42px;
    border-radius: 12px;
    font-weight: var(--front-font-extrabold);
}

.user-dashboard .ud-trx-modal__action-btn {
    flex: 1 1 calc(50% - 5px);
}

.user-dashboard .ud-trx-modal__download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-inline: 14px;
    background: linear-gradient(135deg, var(--front-palette-4b68ff) 0%, var(--front-palette-6f8cff) 100%);
    border: 0;
    color: var(--front-color-white);
    box-shadow: 0 14px 22px rgba(var(--front-rgb-75-104-255), 0.22);
}

.user-dashboard .ud-trx-modal__dismiss {
    padding-inline: 14px;
    border-color: rgba(var(--front-rgb-203-214-232), 0.95);
    color: var(--front-palette-546277);
    background: rgba(var(--front-color-white-rgb), 0.85);
}

.user-dashboard .ud-trx-modal__footer {
    justify-content: space-between;
    gap: 8px;
    padding-top: 2px;
    border-top: 1px solid rgba(var(--front-rgb-221-230-243), 0.9);
}

/* All Wallet Cards */
.wallet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 14px;
    padding: 14px;
}

.wallet-grid__empty {
    grid-column: 1 / -1;
}

.wallet-card {
    position: relative;
    min-height: 158px;
    overflow: hidden;
    border: 1px solid rgba(var(--front-rgb-203-214-232), 0.72) !important;
    border-radius: 13px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(180deg, rgba(var(--front-rgb-248-250-252), 0.9), rgba(var(--front-color-white-rgb), 0)),
        var(--front-color-white, #ffffff);
    box-shadow: none;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.wallet-card:hover {
    border-color: rgba(var(--front-rgb-203-214-232), 0.95) !important;
    background: var(--front-color-white, #ffffff);
}

.wallet-card > * {
    position: relative;
    z-index: 1;
}

.wallet-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: flex-start;
}

.wallet-currency-info {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.wallet-currency-img-wrap {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid rgba(var(--front-rgb-203-214-232), 0.82);
    border-radius: 50%;
    background: rgba(var(--front-rgb-248-250-252), 0.9);
    box-shadow: inset 0 1px 0 rgba(var(--front-color-white-rgb), 0.95);
}

.wallet-currency-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.wallet-card__identity {
    min-width: 0;
}

.wallet-card__title-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

.wallet-card__title-row h6 {
    margin: 0;
    color: var(--front-color-heading, #101828);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
}

.wallet-page-action {
    min-height: 34px;
}

.single-form-card .wallet-page-header .user-feature-header__actions {
    flex-wrap: wrap;
}

.wallet-page-action--pin {
    border-color: rgba(var(--front-color-warning-rgb), 0.16) !important;
    color: var(--front-color-heading, #101828) !important;
}

.wallet-page-action--pin i {
    color: var(--front-color-warning, #f59e0b);
}

.wallet-default-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 18px;
    padding: 0 7px;
    border: 1px solid rgba(var(--front-color-success-rgb), 0.14);
    border-radius: 999px;
    background: rgba(var(--front-color-success-rgb), 0.1);
    color: var(--front-color-success);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.wallet-default-pill i {
    font-size: 10px;
    line-height: 1;
}

.wallet-id-chip {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 5px;
    margin: 4px 0 0;
    color: var(--front-color-muted, #667085);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wallet-id-chip span {
    flex: 0 0 auto;
    color: var(--front-color-heading, #101828);
    font-weight: 800;
}

.wallet-id-chip strong {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: inherit;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wallet-id-copy {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border: 1px solid rgba(var(--front-rgb-203-214-232), 0.74);
    border-radius: 7px;
    background: rgba(var(--front-color-white-rgb), 0.86);
    color: var(--main-color, var(--front-color-primary));
    font-size: 10px;
    line-height: 1;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.wallet-id-copy:hover,
.wallet-id-copy:focus-visible {
    border-color: rgba(var(--front-color-primary-rgb), 0.28);
    background: rgba(var(--front-color-primary-rgb), 0.08);
    color: var(--front-color-primary-hover, var(--main-color));
}

.wallet-card__balance-panel {
    min-width: 118px;
    padding: 7px 8px;
    border: 0;
    border-radius: 11px;
    background: rgba(var(--front-rgb-248-250-252), 0.94);
    text-align: right;
}

.wallet-card__balance-panel > span {
    display: block;
    color: var(--front-color-muted, #667085);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

.wallet-balance {
    margin-top: 2px;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--main-color);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.wallet-card__balance-panel p {
    margin: 3px 0 0;
    color: var(--front-color-muted, #667085);
    font-size: 11px;
    line-height: 1.25;
}

.wallet-divider {
    height: 1px;
    background: var(--divider-color);
    margin: 1rem 0;
}

.wallet-card__support-row {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(var(--front-rgb-203-214-232), 0.62);
}

.wallet-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.wallet-role-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--front-color-white-rgb), 0.28);
    border-radius: 7px;
    color: var(--front-color-white);
    font-size: 13px;
    box-shadow: none;
}

.wallet-role-icon svg {
    width: 16px;
    height: 16px;
}

.wallet-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    margin-top: auto;
    padding-top: 10px;
}

.wallet-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
}

.wallet-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.12);
    border-radius: 9px;
    background: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
    color: var(--front-color-white);
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    transition: background 0.18s ease, border-color 0.18s ease;
}

button.wallet-btn-icon {
    padding: 0;
}

.wallet-btn-icon:hover,
.wallet-btn-icon:focus {
    background: var(--dashboard-primary-button-hover, var(--hover-color, var(--front-color-primary-hover)));
    color: var(--front-color-white);
    border-color: rgba(var(--front-color-primary-rgb), 0.2);
}

.wallet-btn-icon svg {
    width: 16px;
    height: 16px;
}

.wallet-transaction-info {
    min-width: 0;
    color: var(--front-color-muted, #667085);
    font-size: 12px;
    line-height: 1.4;
}

.wallet-transaction-info p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wallet-create-modal .modal-dialog {
    max-width: 416px;
}

.wallet-create-modal__content {
    overflow: hidden;
    border: 1px solid rgba(var(--front-rgb-203-214-232), 0.78);
    border-radius: 20px;
    background: var(--front-color-white, #ffffff);
    box-shadow: 0 18px 44px rgba(var(--front-rgb-15-23-42), 0.16);
}

.wallet-create-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 17px 14px;
    border-bottom: 1px solid rgba(var(--front-rgb-203-214-232), 0.68);
    background:
        linear-gradient(135deg, rgba(var(--front-color-primary-rgb), 0.055), rgba(var(--front-rgb-248-250-252), 0)),
        var(--front-color-white, #ffffff);
}

.wallet-create-modal__title {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.wallet-create-modal__mark {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.12);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(var(--front-color-primary-rgb), 0.13), rgba(var(--front-color-primary-rgb), 0.08)),
        var(--front-color-white, #ffffff);
    color: var(--front-color-primary);
}

.wallet-create-modal__title span:not(.wallet-create-modal__mark) {
    display: block;
    margin-bottom: 2px;
    color: var(--front-color-muted, #667085);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

.wallet-create-modal__title h6 {
    margin: 0;
    color: var(--front-color-heading, #101828);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}

.wallet-create-modal__close {
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border-radius: 999px;
    background-size: 11px;
    opacity: 0.7;
}

.wallet-create-modal__body {
    padding: 15px 17px 17px;
    background: linear-gradient(180deg, var(--front-color-white, #ffffff), rgba(var(--front-rgb-248-250-252), 0.72));
}

.wallet-create-modal__form {
    display: grid;
    gap: 13px;
}

.wallet-create-modal__field {
    display: grid;
    gap: 7px;
}

.wallet-create-modal__field .form-label {
    margin: 0;
    color: var(--front-color-heading, #101828);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.wallet-create-modal__select-wrap {
    position: relative;
}

.wallet-create-modal__select-wrap i {
    position: absolute;
    top: 50%;
    left: 13px;
    z-index: 2;
    color: var(--front-color-muted, #667085);
    font-size: 13px;
    transform: translateY(-50%);
}

.wallet-create-modal__select-wrap .form-select {
    min-height: 46px;
    padding-left: 38px;
    border: 1px solid rgba(var(--front-rgb-203-214-232), 0.94);
    border-radius: 13px;
    background-color: var(--front-color-white, #ffffff);
    color: var(--front-color-heading, #101828);
    font-size: 13px;
    font-weight: 800;
    box-shadow: none;
}

.wallet-create-modal__select-wrap .form-select:focus {
    border-color: rgba(var(--front-color-primary-rgb), 0.34);
    box-shadow: 0 0 0 3px rgba(var(--front-color-primary-rgb), 0.08);
}

.wallet-create-modal__preview:empty {
    display: none;
}

.wallet-currency-preview-card {
    display: grid;
    gap: 2px;
    padding: 9px;
    border: 1px solid rgba(var(--front-rgb-203-214-232), 0.78);
    border-radius: 15px;
    background: var(--front-color-white, #ffffff);
}

.wallet-currency-preview-card__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 34px;
    padding: 5px 6px;
    border-radius: 10px;
}

.wallet-currency-preview-card__row:not(:last-child) {
    border-bottom: 1px solid rgba(var(--front-rgb-203-214-232), 0.56);
    border-radius: 0;
}

.wallet-currency-preview-card__row--roles {
    align-items: flex-start;
}

.wallet-currency-preview-card__label {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
    color: var(--front-color-muted, #667085);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.wallet-currency-preview-card__label i {
    width: 21px;
    height: 21px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 7px;
    background: rgba(var(--front-color-primary-rgb), 0.08);
    color: var(--front-color-primary);
    font-size: 10px;
}

.wallet-currency-preview-card strong {
    min-width: 0;
    color: var(--front-color-heading, #101828);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    text-align: right;
}

.wallet-currency-preview-card__live {
    display: inline-flex;
    align-items: center;
    min-height: 17px;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(var(--front-color-danger-rgb), 0.1);
    color: var(--front-color-danger);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
}

.wallet-currency-preview-card__roles {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
    max-width: 190px;
}

.wallet-currency-preview-card__role {
    min-height: 21px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    color: var(--front-color-white);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.wallet-create-modal__preview .single-card-box {
    margin: 0 !important;
    padding: 10px 12px;
    border: 1px solid rgba(var(--front-rgb-203-214-232), 0.72);
    border-radius: 12px;
    background: rgba(var(--front-rgb-248-250-252), 0.82);
    box-shadow: none;
}

.wallet-create-modal__preview .confirm-deposit-box {
    min-height: 0;
    padding: 7px 0;
    border-bottom-color: rgba(var(--front-rgb-203-214-232), 0.62);
    color: var(--front-color-muted, #667085);
    font-size: 12px;
    line-height: 1.25;
}

.wallet-create-modal__preview .confirm-deposit-box:last-child {
    border-bottom: 0;
}

.wallet-create-modal__preview .confirm-deposit-box span:last-child {
    color: var(--front-color-heading, #101828);
    font-weight: 800;
}

.wallet-create-modal__actions {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 10px;
}

.wallet-create-modal__dismiss,
.wallet-create-modal__submit {
    min-height: 41px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.wallet-create-modal__dismiss {
    border: 1px solid rgba(var(--front-rgb-203-214-232), 0.9);
    background: var(--front-color-white, #ffffff);
    color: var(--front-color-muted, #667085);
}

.wallet-create-modal__dismiss:hover,
.wallet-create-modal__dismiss:focus {
    border-color: rgba(var(--front-rgb-203-214-232), 1);
    background: rgba(var(--front-rgb-248-250-252), 0.95);
}

.wallet-create-modal__submit {
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.12);
    background: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
    color: var(--front-color-white);
}

.wallet-create-modal__submit:hover,
.wallet-create-modal__submit:focus {
    background: var(--dashboard-primary-button-hover, var(--front-color-primary-hover, var(--main-color)));
    color: var(--front-color-white);
}

.wallet-create-modal__empty {
    margin: 0;
    border: 0;
    box-shadow: none;
}

.wallet-create-modal__empty.payment-link-empty {
    min-height: 0;
    display: block;
    padding: 18px;
    border: 1px solid rgba(var(--front-rgb-203-214-232), 0.72);
    border-radius: 13px;
    background: rgba(var(--front-rgb-248-250-252), 0.82);
}

.wallet-create-modal__empty.payment-link-empty::before,
.wallet-create-modal__empty .payment-link-empty__orb {
    display: none;
}

.wallet-create-modal__empty .payment-link-empty__visual {
    width: 52px;
    height: 52px;
    margin-bottom: 10px;
}

.wallet-create-modal__empty .payment-link-empty__icon {
    width: 52px;
    height: 52px;
    box-shadow: none;
}

.wallet-create-modal__empty .payment-link-empty__title {
    font-size: 14px;
}

.wallet-create-modal__empty .payment-link-empty__hint {
    font-size: 12px;
}

.wallet-receive-qr-modal .modal-dialog {
    max-width: 424px;
}

.wallet-receive-qr-modal .modal-content {
    overflow: hidden;
    border-radius: 18px;
    background: var(--front-color-white, #ffffff);
    box-shadow: 0 22px 58px rgba(var(--front-rgb-15-23-42), 0.22);
}

.wallet-receive-qr-modal__hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 18px 13px;
    border-bottom: 1px solid rgba(var(--front-color-primary-rgb), 0.1);
    background:
        linear-gradient(135deg, rgba(var(--front-color-primary-rgb), 0.1), rgba(var(--front-color-success-rgb), 0.06)),
        var(--front-color-white, #ffffff);
}

.wallet-receive-qr-modal__hero-copy {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.wallet-receive-qr-modal__mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.12);
    border-radius: 13px;
    background: rgba(var(--front-color-primary-rgb), 0.11);
    color: var(--front-color-primary);
}

.wallet-receive-qr-modal__eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--front-color-primary);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

.wallet-receive-qr-modal .modal-title {
    margin: 0;
    color: var(--front-color-heading, #101828);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}

.wallet-receive-qr-modal__hero small {
    display: block;
    margin-top: 4px;
    color: var(--front-color-muted, #667085);
    font-size: 12px;
    line-height: 1.35;
}

.wallet-receive-qr-modal__close {
    width: 27px;
    height: 27px;
    margin: 0;
    padding: 0;
    border-radius: 999px;
    background-size: 12px;
    opacity: 0.65;
}

.wallet-receive-qr-modal__body {
    padding: 14px 18px 13px;
    text-align: center;
}

.wallet-receive-qr-modal__summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 11px;
}

.wallet-receive-qr-modal__summary > div {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.1);
    border-radius: 13px;
    background: rgba(var(--front-color-primary-rgb), 0.04);
    text-align: left;
}

.wallet-receive-qr-modal__summary span {
    display: block;
    margin-bottom: 4px;
    color: var(--front-color-muted, #667085);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.wallet-receive-qr-modal__summary strong {
    display: block;
    color: var(--front-color-heading, #101828);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wallet-receive-qr-modal__scan-card {
    max-width: 250px;
    margin: 0 auto 11px;
    padding: 11px 10px 9px;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.12);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(var(--front-color-primary-rgb), 0.045), rgba(var(--front-color-success-rgb), 0.03)),
        var(--front-color-white, #ffffff);
}

.wallet-receive-qr-modal__code {
    width: 210px;
    max-width: 100%;
    margin: 0 auto;
    padding: 8px;
    border: 1px solid rgba(var(--front-rgb-15-23-42), 0.08);
    border-radius: 16px;
    background: var(--front-color-white, #ffffff);
    box-shadow:
        0 14px 30px rgba(var(--front-rgb-15-23-42), 0.08),
        inset 0 1px 0 rgba(var(--front-color-white-rgb), 0.9);
}

.wallet-receive-qr-modal__code svg {
    display: block;
    width: 100%;
    height: auto;
}

.wallet-receive-qr-modal__hint {
    max-width: 220px;
    margin: 8px auto 0;
    color: var(--front-color-muted, #667085);
    font-size: 11.5px;
    line-height: 1.45;
}

.wallet-receive-qr-modal__url {
    max-width: 100%;
    overflow: hidden;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.12);
    border-radius: 13px;
    background: var(--front-color-white, #ffffff);
}

.wallet-receive-qr-modal__url .form-control {
    min-height: 36px;
    border: 0;
    background: rgba(var(--front-color-primary-rgb), 0.04);
    color: var(--front-color-heading, #101828);
    font-size: 12px;
}

.wallet-receive-qr-modal__footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 18px 16px;
    border-top: 1px solid rgba(var(--front-color-primary-rgb), 0.1);
}

.wallet-receive-qr-modal__primary,
.wallet-receive-qr-modal__secondary {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-weight: 800;
}

.wallet-qr-page .user-feature-header__actions {
    flex-wrap: wrap;
}

.wallet-qr-page__body {
    padding: 22px;
}

.wallet-qr-page__intro {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px 16px;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.12);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(var(--front-color-primary-rgb), 0.07), rgba(var(--front-color-success-rgb), 0.06)),
        var(--front-color-white, #ffffff);
}

.wallet-qr-page__intro-mark {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: rgba(var(--front-color-primary-rgb), 0.1);
    color: var(--front-color-primary);
    box-shadow: 0 10px 24px rgba(var(--front-rgb-15-23-42), 0.08);
}

.wallet-qr-page__intro-mark i {
    font-size: 18px;
    line-height: 1;
}

.wallet-qr-page__intro span {
    display: block;
    margin-bottom: 4px;
    color: var(--front-color-heading, #101828);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}

.wallet-qr-page__intro p {
    margin: 0;
    color: var(--front-color-muted, #667085);
    font-size: 13px;
    line-height: 1.5;
}

.wallet-qr-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.wallet-qr-card {
    display: grid;
    grid-template-columns: minmax(220px, 282px) minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid rgba(var(--front-rgb-203-214-232), 0.84);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(var(--front-color-primary-rgb), 0.035), rgba(var(--front-color-white-rgb), 0)),
        var(--front-color-white, #ffffff);
    box-shadow: 0 18px 45px rgba(var(--front-rgb-15-23-42), 0.08);
}

.wallet-qr-card__scan {
    display: grid;
    align-content: center;
    gap: 6px;
}

.wallet-qr-card__code {
    display: block;
    width: min(232px, 100%);
    margin: 0 auto;
    padding: 10px;
    border: 1px solid rgba(var(--front-rgb-15-23-42), 0.08);
    border-radius: 19px;
    background: var(--front-color-white, #ffffff);
    box-shadow:
        0 16px 32px rgba(var(--front-rgb-15-23-42), 0.08),
        inset 0 1px 0 rgba(var(--front-color-white-rgb), 0.95);
}

.wallet-qr-card__code svg {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.wallet-qr-card__scan-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: fit-content;
    margin: 0 auto;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(var(--front-color-success-rgb), 0.12);
    color: var(--front-color-success);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 6px 14px rgba(var(--front-rgb-15-23-42), 0.08);
}

.wallet-qr-card__content {
    min-width: 0;
}

.wallet-qr-card__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 13px;
}

.wallet-qr-card__currency {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.wallet-qr-card__flag {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 14px;
    background: rgba(var(--front-color-primary-rgb), 0.08);
}

.wallet-qr-card__flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wallet-qr-card__currency h6,
.wallet-qr-card__balance strong {
    margin: 0;
    color: var(--front-color-heading, #101828);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
}

.wallet-qr-card__currency p,
.wallet-qr-card__balance span {
    display: block;
    margin: 4px 0 0;
    color: var(--front-color-muted, #667085);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.wallet-qr-card__balance {
    min-width: 98px;
    text-align: right;
}

.wallet-qr-card__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.wallet-qr-card__meta > div {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.1);
    border-radius: 13px;
    background: rgba(var(--front-color-primary-rgb), 0.035);
}

.wallet-qr-card__meta span,
.wallet-qr-card__link-box span {
    display: block;
    margin-bottom: 5px;
    color: var(--front-color-muted, #667085);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.wallet-qr-card__meta strong {
    display: block;
    color: var(--front-color-heading, #101828);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wallet-qr-card__link-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 10px;
    align-items: end;
    margin-bottom: 12px;
}

.wallet-qr-card__link-box input {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(var(--front-rgb-203-214-232), 0.9);
    border-radius: 12px;
    background: rgba(var(--front-rgb-248-250-252), 0.95);
    color: var(--front-palette-546277);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wallet-qr-card__link-box button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.14);
    border-radius: 12px;
    background: rgba(var(--front-color-primary-rgb), 0.08);
    color: var(--front-color-primary);
}

.wallet-qr-card__link-box button i {
    font-size: 15px;
    line-height: 1;
}

.wallet-qr-card__actions {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 10px;
}

.wallet-qr-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 13px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.wallet-qr-card__btn i {
    flex: 0 0 auto;
    font-size: 13px;
    line-height: 1;
}

.wallet-qr-card__btn:hover,
.wallet-qr-card__btn:focus {
    transform: translateY(-1px);
}

.wallet-qr-card__btn--primary {
    background: var(--dashboard-primary-button-bg, var(--main-color, var(--front-color-primary)));
    color: var(--front-color-white);
    box-shadow: 0 14px 26px rgba(var(--front-color-primary-rgb), 0.2);
}

.wallet-qr-card__btn--primary:hover,
.wallet-qr-card__btn--primary:focus {
    background: var(--dashboard-primary-button-hover, var(--front-color-primary-hover, var(--main-color, var(--front-color-primary))));
    color: var(--front-color-white);
}

.wallet-qr-card__btn--secondary {
    border-color: rgba(var(--front-color-primary-rgb), 0.16);
    background: rgba(var(--front-color-primary-rgb), 0.08);
    color: var(--front-color-primary);
}

.wallet-qr-card__btn--ghost {
    border-color: rgba(var(--front-rgb-203-214-232), 0.9);
    background: var(--front-color-white, #ffffff);
    color: var(--front-palette-546277);
}

.wallet-qr-card__btn.is-done,
.wallet-qr-card__link-box button.is-done {
    background: var(--front-color-success);
    border-color: var(--front-color-success);
    color: var(--front-color-white);
}

@media (max-width: 767.98px) {
    .wallet-qr-card {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .wallet-qr-card__actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .wallet-receive-qr-modal__hero {
        padding: 14px;
    }

    .wallet-receive-qr-modal__body {
        padding: 12px 14px;
    }

    .wallet-receive-qr-modal__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wallet-receive-qr-modal__footer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wallet-receive-qr-modal__primary,
    .wallet-receive-qr-modal__secondary {
        min-width: 0;
        padding-inline: 8px;
        font-size: 12px;
    }

    .wallet-qr-page__body {
        padding: 16px;
    }

    .wallet-qr-page__intro,
    .wallet-qr-card__meta {
        grid-template-columns: 1fr;
    }

    .wallet-qr-card__top {
        grid-template-columns: 1fr;
    }

    .wallet-qr-card__balance {
        text-align: left;
    }
}

/* Circle Icon */
.circle-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--front-palette-f8f9fa);
    border: 1px solid var(--front-palette-dee2e6);
    flex-shrink: 0;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.circle-icon img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

/*---------------------------------------
    ## Referral Tree
---------------------------------------*/

/* referral tree style */
.referral-tree ul {
    padding-left: 0;
    display: none;
    margin: 0;
}

.referral-tree > ul {
    display: block;
}

.referral-tree li {
    list-style: none;
    position: relative;
    padding: 5px 0 0 20px;
}

.referral-tree li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10px;
    width: 1px;
    height: 100%;
    background: var(--front-palette-ddd);
}

.referral-tree li::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    width: 10px;
    height: 1px;
    background: var(--front-palette-ddd);
}

.referral-tree li:last-child::before {
    height: 10px;
}

.referral-tree li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    background: var(--front-color-white);
    color: var(--front-palette-333);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 5px 10px;
    font-size: var(--front-font-base);
    transition: all 0.2s ease;
    gap: 8px;
}

.referral-tree li a:hover {
    background: var(--front-palette-f8f9fa);
}

.referral-tree li a i {
    color: var(--front-palette-666);
    font-size: var(--front-font-lg);
    transition: transform 0.3s ease;
}

.referral-tree li a:hover i {
    color: var(--front-color-black);
}

.referral-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.referral-info img.avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--front-palette-ddd);
}

.referral-info div {
    font-size: var(--front-font-sm);
}

.referral-info strong {
    font-weight: var(--front-font-semibold);
    display: block;
}

.referral-info span {
    color: var(--front-palette-666);
    font-size: var(--front-font-xs);
}

.referral-tree > ul > li::before,
.referral-tree > ul > li::after {
    display: none;
}

#chat-box {
    max-height: 500px;
    overflow-y: auto;
}

/*---------------------------------------
    ## Notification
---------------------------------------*/
.dropdown-toggle::after {
    border: none !important;
    content: '';
    display: inline-block;
    width: 12px;
    height: 6px;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D'12'%20height%3D'6'%20viewBox%3D'0%200%2012%206'%20fill%3D'none'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%3E%3Cpath%20d%3D'M1.5%200.75L6%205.25L10.5%200.75'%20stroke%3D'%23445375'%20stroke-width%3D'1.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.notification-dropdown {
    min-width: 300px;
    font-size: var(--front-font-base);
    border-radius: 10px;
    background-color: var(--front-color-white);
}

/* Notification Item */
.notification-item {
    transition: background-color 0.2s;
}

.notification-item:hover {
    background-color: var(--front-palette-f8f9fa);
}

/* Divider between notifications */
.notification-divider {
    border-bottom: 1px solid var(--front-palette-eceff1);
}

/* Scrollbar Hidden Until Hover */
.notification-list {
    max-height: 350px;
    overflow-y: auto;
    scrollbar-width: none;
}

.notification-list::-webkit-scrollbar {
    width: 5px;
}

.notification-list:hover::-webkit-scrollbar {
    display: block;
}

.notification-list::-webkit-scrollbar-thumb {
    background-color: var(--front-palette-cfd4da);
    border-radius: 6px;
}

.notification-list::-webkit-scrollbar-track {
    background: transparent;
}

.btn-wrap .icon {
    min-width: 20px !important;
    min-height: 20px !important;
}

.nice-select {
    padding-left: 8px !important;
    padding-right: 10px !important;
}

.chart-icon {
    border: none !important;
    border-radius: 0 !important;
}

.chart-icon:hover {
    border: none !important;
    background: none !important;
}

/*----------------------------------------
Notification Card
----------------------------------------*/
.notification-card {
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background-color: var(--front-color-white);
    overflow: hidden;
}

/* Header */
.notification-header {
    background-color: var(--sky-color);
    padding: 1rem;
}

.notification-header__title {
    margin: 0;
    font-size: var(--front-font-size-rem-125);
    font-weight: var(--front-font-semibold);
    color: var(--heading-color);
}

/* List */
.notification-all-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Each Item */
.notification-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--divider-color);
    transition: background-color 0.2s ease-in-out;
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item:hover {
    background-color: var(--soft-gray);
}

/* Icon */
.notification-item__icon {
    flex-shrink: 0;
    margin-right: 0.75rem;
}

.notification-item__icon-svg {
    display: block;
}

/* Content */
.notification-item__content {
    flex: 1;
    min-width: 0;
}

.notification-item__title {
    font-size: var(--front-font-size-rem-1);
    font-weight: var(--front-font-semibold);
    color: var(--heading-color);
    margin-bottom: 0.25rem;
}

.notification-item__message {
    font-size: var(--front-font-size-rem-09375);
    color: var(--paragraph-color);
    overflow-wrap: break-word;
}

/* Meta (time + mark-read) */
.notification-item__meta {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    margin-left: 1rem;
}

.notification-item__time {
    font-size: var(--front-font-size-rem-085);
    color: var(--muted-color);
    white-space: nowrap;
}

.notification-item__mark-read {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--soft-danger);
    transition: background-color 0.2s ease-in-out;
    text-decoration: none;
}

.notification-item__mark-read i {
    font-size: var(--front-font-size-rem-1);
    color: var(--hover-color);
}

.notification-item__mark-read:hover {
    background-color: var(--soft-warning);
}

/* Footer (pagination) */
.notification-footer {
    padding: 0.5rem 0;
}

.settings-content--panel .notification-settings-page {
    display: grid;
    gap: 12px;
}

.settings-content--panel .notification-preferences-card,
.settings-content--panel .notification-feed-card {
    border-color: rgba(var(--front-color-primary-rgb), 0.11);
    border-radius: 14px;
    background: var(--front-color-white);
    box-shadow: none;
}

.settings-content--panel .notification-header--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    background: linear-gradient(135deg, var(--front-palette-fbfcff), var(--front-color-white));
}

.settings-content--panel .notification-header__copy {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-content--panel .notification-header__icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 10px;
    background: rgba(var(--front-color-primary-rgb), 0.08);
    color: var(--main-color);
    font-size: var(--front-font-size-rem-095);
}

.settings-content--panel .notification-header__subtitle {
    margin: 2px 0 0;
    color: var(--front-palette-667085);
    font-size: var(--front-font-size-rem-078);
    line-height: 1.35;
}

.settings-content--panel .notification-header__pill {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(var(--front-color-success-rgb), 0.1);
    color: var(--front-palette-15803d);
    font-size: var(--front-font-size-rem-075);
    font-weight: var(--front-font-bold);
    line-height: 1;
    white-space: nowrap;
}

.settings-content--panel .notification-header__pill i {
    font-size: 7px;
}

.settings-content--panel .notification-preferences-card__body {
    padding: 12px;
}

.settings-content--panel .notification-preferences-form {
    display: grid;
    gap: 12px;
}

.settings-content--panel .notification-preferences-grid {
    display: grid;
    grid-template-columns: minmax(240px, 0.9fr) minmax(260px, 1.1fr);
    gap: 12px;
    align-items: stretch;
}

.settings-content--panel .notification-toggle-stack {
    display: grid;
    gap: 8px;
}

.settings-content--panel .notification-toggle-card,
.settings-content--panel .notification-tune-card,
.settings-content--panel .notification-custom-tune,
.settings-content--panel .notification-preferences-actions {
    border: 1px solid rgba(var(--front-rgb-136-146-166), 0.14);
    border-radius: 14px;
    background: var(--front-palette-fbfcff);
}

.settings-content--panel .notification-toggle-card {
    position: relative;
    min-height: 58px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
}

.settings-content--panel .notification-toggle-card__input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.settings-content--panel .notification-toggle-card__body {
    min-width: 0;
    grid-column: 1;
    grid-row: 1;
    display: grid;
    gap: 2px;
    cursor: pointer;
}

.settings-content--panel .notification-toggle-switch {
    grid-column: 2;
    grid-row: 1;
    width: 44px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border-radius: 999px;
    background: var(--front-palette-eaecf3);
    box-shadow: inset 0 0 0 1px rgba(var(--front-rgb-136-146-166), 0.12);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.settings-content--panel .notification-toggle-switch span {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--front-color-white);
    box-shadow: 0 2px 6px rgba(var(--front-rgb-15-23-42), 0.14);
    transition: transform 0.2s ease;
}

.settings-content--panel .notification-toggle-card__input:checked ~ .notification-toggle-switch {
    background: linear-gradient(135deg, var(--main-color), var(--front-palette-4d86ff));
    box-shadow: none;
}

.settings-content--panel .notification-toggle-card__input:checked ~ .notification-toggle-switch span {
    transform: translateX(20px);
}

.settings-content--panel .notification-toggle-card:has(.notification-toggle-card__input:checked) {
    border-color: rgba(var(--front-color-primary-rgb), 0.22);
    background: linear-gradient(135deg, rgba(var(--front-color-primary-rgb), 0.08), var(--front-color-white));
}

.settings-content--panel .notification-toggle-card__title {
    color: var(--front-palette-101828);
    font-size: var(--front-font-size-rem-085);
    font-weight: var(--front-font-bold);
    line-height: 1.25;
}

.settings-content--panel .notification-toggle-card__text {
    color: var(--front-palette-667085);
    font-size: var(--front-font-size-rem-074);
    line-height: 1.3;
}

.settings-content--panel .notification-tune-card {
    display: grid;
    align-content: center;
    gap: 7px;
    padding: 12px;
}

.settings-content--panel .notification-tune-card__control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.settings-content--panel .notification-preview-btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 9px;
    font-weight: var(--front-font-semibold);
}

.settings-content--panel .notification-custom-tune {
    padding: 12px;
}

.settings-content--panel .notification-custom-tune__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.settings-content--panel .notification-custom-tune__title {
    color: var(--front-palette-101828);
    font-size: var(--front-font-size-rem-095);
    font-weight: var(--front-font-bold);
    line-height: 1.25;
}

.settings-content--panel .notification-custom-tune__text {
    margin-top: 3px;
    color: var(--front-palette-667085);
    font-size: var(--front-font-size-rem-078);
    line-height: 1.35;
}

.settings-content--panel .notification-custom-tune__badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(var(--front-color-primary-rgb), 0.08);
    color: var(--main-color);
    font-size: var(--front-font-size-rem-075);
    font-weight: var(--front-font-bold);
}

.settings-content--panel .notification-preferences-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
}

.settings-content--panel .notification-preferences-actions__hint {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--front-palette-667085);
    font-size: var(--front-font-size-rem-078);
    line-height: 1.35;
}

.settings-content--panel .notification-preferences-actions__submit {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 9px;
    font-size: var(--front-font-size-rem-085);
    font-weight: var(--front-font-bold);
}

.settings-content--panel .notification-feed-list {
    padding: 6px;
}

.settings-content--panel .notification-feed-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    padding: 10px;
    border: 1px solid rgba(var(--front-rgb-136-146-166), 0.12);
    border-radius: 12px;
    background: var(--front-color-white);
}

.settings-content--panel .notification-feed-item:last-child {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(var(--front-rgb-136-146-166), 0.12);
}

.settings-content--panel .notification-feed-item:hover {
    background: var(--front-palette-fbfcff);
}

.settings-content--panel .notification-feed-item .notification-item__icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    margin-right: 0;
    border-radius: 12px;
    background: rgba(var(--front-color-primary-rgb), 0.07);
}

.settings-content--panel .notification-feed-item .notification-item__title {
    color: var(--front-palette-101828);
    font-size: var(--front-font-size-rem-088);
    font-weight: var(--front-font-bold);
}

.settings-content--panel .notification-feed-item .notification-item__message {
    color: var(--front-palette-667085);
    font-size: var(--front-font-size-rem-08);
    line-height: 1.35;
}

.settings-content--panel .notification-feed-item .notification-item__mark-read {
    width: 28px;
    height: 28px;
    background: rgba(var(--front-color-danger-rgb), 0.12);
}

@media (max-width: 991.98px) {
    .settings-content--panel .notification-preferences-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .settings-content--panel .notification-header--split,
    .settings-content--panel .notification-preferences-actions,
    .settings-content--panel .notification-feed-item {
        align-items: flex-start;
    }

    .settings-content--panel .notification-header--split,
    .settings-content--panel .notification-preferences-actions {
        flex-direction: column;
    }

    .settings-content--panel .notification-tune-card__control,
    .settings-content--panel .notification-feed-item {
        grid-template-columns: 1fr;
    }

    .settings-content--panel .notification-preview-btn,
    .settings-content--panel .notification-preferences-actions__submit {
        width: 100%;
    }

    .settings-content--panel .notification-feed-item .notification-item__meta {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-left: 0;
    }
}

/*---------------------------------------
    ## Feature summery
---------------------------------------*/
.feature-summary-widget {
    position: relative;
    --feature-summary-primary: var(--main-color, var(--front-color-primary));
    --feature-summary-primary-rgb: var(--front-color-primary-rgb, 70, 99, 238);
    --feature-summary-accent: var(--main-color-2, var(--front-color-accent, #17a86a));
    --feature-summary-accent-rgb: var(--front-color-accent-rgb, 23, 168, 106);
}

.feature-summary-widget__panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(var(--feature-summary-primary-rgb), 0.18);
    border-radius: 22px;
    background: radial-gradient(circle at top right, rgba(var(--feature-summary-primary-rgb), 0.14) 0%, rgba(var(--feature-summary-primary-rgb), 0) 34%),
    radial-gradient(circle at bottom left, rgba(var(--feature-summary-accent-rgb), 0.12) 0%, rgba(var(--feature-summary-accent-rgb), 0) 30%),
    linear-gradient(180deg, var(--front-palette-fcfdff) 0%, var(--front-palette-f3f7ff) 100%);
    box-shadow: 0 18px 40px rgba(var(--feature-summary-primary-rgb), 0.06);
}

.feature-summary-widget__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 15px 10px;
    border-bottom: 1px solid rgba(var(--front-rgb-215-225-248), 0.9);
}

.feature-summary-widget__brand {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: linear-gradient(180deg, rgba(var(--feature-summary-primary-rgb), 0.11) 0%, rgba(var(--feature-summary-accent-rgb), 0.1) 100%);
    color: var(--feature-summary-primary);
    box-shadow: inset 0 1px 0 rgba(var(--front-color-white-rgb), 0.78);
}

.feature-summary-widget__brand svg {
    width: 20px;
    height: 20px;
}

.feature-summary-widget__header-main {
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    gap: 3px;
}

.feature-summary-widget__eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    margin-bottom: 7px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(var(--front-rgb-239-243-255), 0.96) 0%, rgba(var(--front-rgb-231-238-255), 0.96) 100%);
    color: var(--front-palette-6a7df0);
    font-size: var(--front-font-2xs);
    font-weight: var(--front-font-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.feature-summary-widget__title {
    margin-bottom: 0;
    color: var(--front-palette-203354);
    font-size: var(--front-font-size-px-21);
    line-height: 1.15;
}

.feature-summary-widget__subtitle {
    margin-bottom: 0;
    color: var(--front-palette-7d8aa5);
    font-size: var(--front-font-xs);
    line-height: 1.45;
}

.feature-summary-widget__header-side {
    flex: 0 0 auto;
}

.feature-summary-widget__meta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--front-palette-e1e8fa);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(var(--front-color-white-rgb), 0.96) 0%, rgba(var(--front-rgb-247-250-255), 0.94) 100%);
    color: var(--front-palette-687792);
    font-size: var(--front-font-2xs);
    font-weight: var(--front-font-semibold);
    white-space: nowrap;
}

.feature-summary-widget__meta-icon,
.feature-summary-widget__toggle-icon,
.feature-summary-widget__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.feature-summary-widget__meta-icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(var(--feature-summary-primary-rgb), 0.1);
    color: var(--feature-summary-primary);
}

.feature-summary-widget__meta-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--feature-summary-accent);
}

.feature-summary-widget__meta-icon svg,
.feature-summary-widget__toggle-icon svg,
.feature-summary-widget__trend svg,
.feature-summary-widget__icon svg {
    width: 16px;
    height: 16px;
}

.feature-summary-widget__toggle {
    margin-top: 10px;
    padding: 9px 11px;
    border: 1px solid var(--front-palette-e1e8fa);
    border-radius: 14px;
    background: rgba(var(--front-color-white-rgb), 0.95);
    color: var(--front-palette-1b2551);
    text-align: left;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.feature-summary-widget__toggle:hover,
.feature-summary-widget__toggle:focus {
    color: var(--front-palette-1b2551);
    border-color: var(--front-palette-d2dcf8);
    background: rgba(var(--front-color-white-rgb), 0.96);
}

.feature-summary-widget__toggle-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.feature-summary-widget__toggle-copy strong {
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-bold);
}

.feature-summary-widget__toggle-label {
    color: var(--front-palette-74819a);
    font-size: var(--front-font-2xs);
    font-weight: var(--front-font-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.feature-summary-widget__toggle-icon {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--front-color-white) 0%, var(--front-palette-f3f6ff) 100%);
    color: var(--feature-summary-primary);
    transition: transform 0.2s ease;
}

.feature-summary-widget__toggle[aria-expanded="true"] .feature-summary-widget__toggle-icon {
    transform: rotate(180deg);
}

.feature-summary-widget__body {
    padding: 8px 14px 14px;
}

.feature-summary-widget__grid {
    --bs-gutter-x: 10px;
    --bs-gutter-y: 10px;
}

.feature-summary-widget__card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 112px;
    padding: 11px 12px 9px;
    border: 1px solid var(--front-palette-e7edf9);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(var(--front-color-white-rgb), 0.98) 0%, rgba(var(--front-rgb-251-252-255), 0.96) 100%);
    box-shadow: 0 6px 14px rgba(var(--front-rgb-39-68-148), 0.03);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-summary-widget__card:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--feature-summary-primary-rgb), 0.22);
    box-shadow: 0 10px 18px rgba(var(--feature-summary-primary-rgb), 0.05);
}

.feature-summary-widget__card--success {
    background: radial-gradient(circle at top right, rgba(var(--feature-summary-accent-rgb), 0.12) 0%, rgba(var(--feature-summary-accent-rgb), 0) 38%),
    linear-gradient(180deg, rgba(var(--front-color-white-rgb), 0.98) 0%, rgba(var(--front-rgb-250-253-251), 0.97) 100%);
    box-shadow: 0 6px 14px rgba(var(--front-rgb-39-68-148), 0.03);
}

.feature-summary-widget__card--info {
    background: radial-gradient(circle at top right, rgba(var(--feature-summary-primary-rgb), 0.12) 0%, rgba(var(--feature-summary-primary-rgb), 0) 38%),
    linear-gradient(180deg, rgba(var(--front-color-white-rgb), 0.98) 0%, rgba(var(--front-rgb-250-251-255), 0.97) 100%);
    box-shadow: 0 6px 14px rgba(var(--front-rgb-39-68-148), 0.03);
}

.feature-summary-widget__card--danger {
    background: radial-gradient(circle at top right, rgba(var(--front-rgb-251-229-233), 0.74) 0%, rgba(var(--front-rgb-251-229-233), 0) 38%),
    linear-gradient(180deg, rgba(var(--front-color-white-rgb), 0.98) 0%, rgba(var(--front-rgb-253-250-251), 0.97) 100%);
    box-shadow: 0 6px 14px rgba(var(--front-rgb-39-68-148), 0.03);
}

.feature-summary-widget__card-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    align-items: center;
    gap: 10px;
}

.feature-summary-widget__metric {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.feature-summary-widget__label {
    display: block;
    margin-bottom: 4px;
    color: var(--front-palette-6f7d98);
    font-size: var(--front-font-2xs);
    font-weight: var(--front-font-semibold);
    line-height: 1.3;
}

.feature-summary-widget__value {
    margin-bottom: 0;
    color: var(--front-palette-24365b);
    font-size: var(--front-font-size-px-26);
    font-weight: var(--front-font-bold);
    line-height: 1;
    letter-spacing: -0.03em;
}

.feature-summary-widget__icon {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: end;
    flex: 0 0 auto;
    line-height: 0;
}

.feature-summary-widget__icon svg {
    width: 17px;
    height: 17px;
    display: block;
    flex: 0 0 auto;
}

.feature-summary-widget__card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 7px;
    margin-top: 6px;
    border-top: 0;
}

.feature-summary-widget__trend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border-radius: 0;
    font-size: var(--front-font-2xs);
    font-weight: var(--front-font-bold);
    line-height: 1;
    white-space: nowrap;
    background: transparent;
}

.feature-summary-widget__context {
    color: var(--front-palette-98a2b7);
    font-size: var(--front-font-2xs);
    font-weight: var(--front-font-semibold);
    text-align: right;
    line-height: 1.3;
}

.feature-summary-widget__icon.success-svg {
    background: linear-gradient(180deg, rgba(var(--feature-summary-accent-rgb), 0.12) 0%, rgba(var(--feature-summary-accent-rgb), 0.18) 100%);
    color: var(--feature-summary-accent);
}

.feature-summary-widget__icon.info-svg {
    background: linear-gradient(180deg, rgba(var(--feature-summary-primary-rgb), 0.1) 0%, rgba(var(--feature-summary-primary-rgb), 0.16) 100%);
    color: var(--feature-summary-primary);
}

.feature-summary-widget__icon.danger-svg {
    background: linear-gradient(180deg, var(--front-palette-fff1f2) 0%, var(--front-palette-ffe9eb) 100%);
    color: var(--front-palette-ef6573);
}

.positive {
    color: var(--feature-summary-accent, var(--front-palette-4ab66d));
}

.negative {
    color: var(--front-palette-ef5a68);
}

.info {
    color: var(--feature-summary-primary, var(--front-palette-5d79ef));
}

.svg-white {
    color: var(--front-color-white);
}

/*---------------------------------------
    ## Login page
---------------------------------------*/
.auth-page {
    min-height: 100vh;
    padding: 1rem;
}

.login-card {
    max-width: 420px;
    width: 100%;
    background-color: var(--front-color-white);
    border-radius: 8px;
}

.login-logo {
    max-width: 120px;
    height: auto;
}

.dropdown-menu .dropdown-item.active {
    background-color: var(--front-palette-e7f1ff);
    color: var(--front-palette-0d6efd);
    font-weight: var(--front-font-semibold);
    position: relative;
    border-radius: 0.375rem;
}

.dropdown-menu .dropdown-item.active::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Pro";
    font-weight: var(--front-font-black);
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--front-font-base);
    color: var(--front-palette-0d6efd);
}

.custom-ticket-form textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

.custom-ticket-form .form-control {
    border-radius: 10px;
}

.custom-ticket-form .file-preview {
    border-radius: 10px;
    font-size: var(--front-font-size-rem-09);
}

.custom-ticket-form .btn {
    border-radius: 10px;
    font-weight: var(--front-font-medium);
}

.custom-ticket-form .button-wrap {
    width: auto;
    flex: 1 1 48%;
}

.remove-btn {
    background: transparent;
    border: none;
    color: var(--front-palette-dc3545);
    font-size: var(--front-font-size-rem-09);
    text-decoration: underline;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.remove-btn:hover,
.remove-btn:focus {
    background-color: rgba(var(--front-rgb-220-53-69), 0.1); /* Light red hover */
    color: var(--front-palette-dc3545);
    text-decoration: none;
}

.user-type-modern .user-type-option {
    border: 1px solid var(--front-palette-d1d5db);
    background-color: var(--front-color-white);
    color: var(--front-palette-1f2937);
    font-weight: var(--front-font-medium);
    padding: 8px 20px;
    border-radius: 10px;
    font-size: var(--front-font-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: all 0.25s ease-in-out;
    box-shadow: 0 0 0 0 transparent;
}

.user-type-modern .user-type-option:hover {
    border-color: var(--front-palette-6366f1);
    background-color: var(--front-palette-f9fafb);
}

.user-type-modern .btn-check:checked + .user-type-option {
    background-color: var(--front-palette-4f46e5);
    color: var(--front-color-white);
    border-color: var(--front-palette-4f46e5);
    box-shadow: 0 2px 8px rgba(var(--front-rgb-79-70-229), 0.2);
}

.user-type-modern .user-type-option i {
    font-size: var(--front-font-lg);
}

.qr-preview-wrapper svg {
    max-width: 100%;
    height: 100px;
}

/* Visa Pro Card  */
.visa-pro-card {
    background: linear-gradient(135deg, var(--front-palette-0a2540) 0%, var(--front-palette-1a5fd1) 100%) !important;
    border-radius: 1.5rem;
    box-shadow: 0 10px 30px rgba(var(--front-rgb-26-95-209), 0.18);
    position: relative;
    overflow: hidden;
}

.visa-pro-card::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -60px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle at 70% 30%, var(--front-color-white) 0%, var(--front-palette-1a5fd1) 80%, transparent 100%);
    opacity: 0.18;
    z-index: 0 !important;
    pointer-events: none !important;
}

.visa-pro-card .fw-bold.fs-4 {
    letter-spacing: 0.12em;
    font-family: var(--front-font-primary);
    font-weight: var(--front-font-bold);
    font-size: var(--front-font-size-rem-13);
}

.visa-pro-card .fs-3 {
    font-family: var(--front-font-mono);
    font-size: var(--front-font-size-rem-118) !important;
    letter-spacing: 0.18em;
    color: var(--front-palette-f5f7fa);
    text-shadow: 0 2px 8px rgba(var(--front-rgb-26-95-209), 0.1);
}

.visa-pro-card .badge {
    background: var(--front-color-white) !important;
    color: var(--front-palette-1a5fd1) !important;
    font-weight: var(--front-font-semibold);
    letter-spacing: 0.09em;
}

.visa-pro-card .small.text-secondary {
    color: var(--front-palette-b0c4e7) !important;
}

.visa-pro-card .text-white-50 {
    color: var(--front-palette-e7e7e7) !important;
}

.visa-pro-card::before {
    z-index: 0 !important;
    pointer-events: none !important; /* overlay won't block clicks */
}

.visa-pro-card .demo-toggle-details,
.visa-pro-card .show-card-details {
    position: relative !important;
    z-index: 2 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    cursor: pointer !important;
}

.visa-pro-card .show-hide-icon {
    z-index: 2 !important;
    position: relative !important;
    font-size: var(--front-font-size-rem-118);
    margin-left: 0.25rem;
    transition: color 0.2s;
    cursor: pointer !important;
}

.visa-pro-card .show-hide-icon:hover {
    color: var(--front-palette-1a5fd1);
}

.show-hide-icon, .demo-toggle-details, .show-card-details, .demo-toggle-details * {
    cursor: pointer !important;
    pointer-events: auto !important;
}

.topup-btn:hover,
.withdraw-btn:hover {
    background: linear-gradient(135deg, var(--front-palette-0a2540), var(--front-palette-1a5fd1)) !important;
    color: var(--front-color-white) !important;
}

/* QR Card */
.qr-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--front-palette-e8eaf0);
    border-radius: 1rem;
    background: var(--front-color-white);
    overflow: hidden;
    height: 100%;
    transition: transform 0.2s, box-shadow 0.2s;
}

.qr-card-main-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
}

.qr-preview-wrapper {
    flex-shrink: 0;
    width: 100px;
    aspect-ratio: 1;
    background: var(--front-palette-f7fafd);
    border: 1px solid var(--front-palette-e3e8ee);
    border-radius: .5rem;
    box-shadow: 0 1px 1px rgba(var(--front-rgb-44-62-80), .03);
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-svg svg {
    max-width: 100%;
    max-height: 100%;
}

.amount-label {
    font-size: var(--front-font-size-rem-11);
    font-weight: var(--front-font-bold);
    color: var(--front-palette-1e266d);
}

.expires-label {
    font-size: var(--front-font-size-rem-09);
    color: var(--front-palette-6c757d);
}

.expired {
    color: var(--front-palette-e74c3c);
    font-weight: var(--front-font-bold);
}

.not-expired {
    color: var(--front-palette-3b4cca);
    font-weight: var(--front-font-bold);
}

.qr-status-badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--front-font-size-rem-08);
    font-weight: var(--front-font-semibold);
    padding: .2em .6em;
    border-radius: 1em;
    margin-top: .5rem;
    border: 1px solid rgba(var(--front-color-black-rgb), 0.05);
}

.qr-status-badge i {
    margin-right: .3em;
}

.qr-link-row {
    padding: 0 .75rem;
    font-size: var(--front-font-size-rem-09);
    word-break: break-all;
}

.qr-link-row .fas {
    margin-right: .3em;
}

.qr-link-row a {
    color: var(--front-palette-3b4cca);
    text-decoration: none;
    transition: color 0.2s;
}

.qr-link-row a:hover {
    color: var(--front-palette-1e266d);
    text-decoration: underline;
}

.card-actions {
    margin-top: auto;
    border-top: 1px solid var(--front-palette-f0f2f7);
    background: var(--front-palette-f9fafc);
    display: flex;
    justify-content: center;
    gap: .5rem;
    padding: .5rem;
}

.card-actions .btn {
    min-width: 80px;
    font-size: var(--front-font-size-rem-09);
    font-weight: var(--front-font-medium);
}

.quick-function-dropdown {
    --quick-menu-theme-primary: var(--main-color, var(--front-color-primary));
    --quick-menu-theme-primary-rgb: var(--front-color-primary-rgb, 37, 99, 235);
    --quick-menu-theme-accent: var(--main-color-2, var(--front-color-accent, #22bdff));
    --quick-menu-theme-accent-rgb: var(--front-color-accent-rgb, 34, 189, 255);
    --quick-menu-theme-gradient: linear-gradient(135deg, var(--quick-menu-theme-primary) 0%, var(--quick-menu-theme-accent) 100%);
    --quick-menu-surface: rgba(var(--front-color-white-rgb), 0.96);
    --quick-menu-border: rgba(var(--front-rgb-226-232-240), 0.9);
    --quick-menu-text: var(--front-palette-111827);
    --quick-menu-muted: var(--front-palette-64748b);
    display: none;
    position: absolute;
    top: 48px;
    right: 0;
    width: min(350px, calc(100vw - 24px));
    min-width: 330px;
    padding: 8px;
    color: var(--quick-menu-text);
    background: var(--quick-menu-surface);
    border: 1px solid var(--quick-menu-border);
    border-radius: 16px;
    box-shadow: 0 22px 50px rgba(var(--front-rgb-15-23-42), 0.16), 0 4px 14px rgba(var(--front-rgb-15-23-42), 0.08);
    backdrop-filter: blur(18px) saturate(160%);
    z-index: 1057;
    overscroll-behavior: contain;
    touch-action: none;
}

.quick-function-dropdown::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 20px;
    width: 12px;
    height: 12px;
    background: var(--quick-menu-surface);
    border-top: 1px solid var(--quick-menu-border);
    border-left: 1px solid var(--quick-menu-border);
    transform: rotate(45deg);
}

.quick-function-dropdown.show {
    display: block;
    animation: quick-function-menu-fade-in 0.18s ease-out;
}

@keyframes quick-function-menu-fade-in {
    from {
        opacity: 0;
        transform: translateY(-7px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.quick-function-menu__header {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 30px;
    gap: 9px;
    align-items: center;
    min-height: 50px;
    padding: 7px;
    background: linear-gradient(135deg, rgba(var(--front-rgb-248-250-252), 0.96) 0%, rgba(var(--front-rgb-239-246-255), 0.9) 100%);
    border: 1px solid rgba(var(--front-rgb-226-232-240), 0.78);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(var(--front-color-white-rgb), 0.86), 0 1px 2px rgba(var(--front-rgb-15-23-42), 0.04);
}

.quick-function-menu__header-mark,
.quick-function-menu__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.quick-function-menu__header-mark {
    width: 36px;
    height: 36px;
    color: var(--front-color-white);
    background: var(--quick-menu-theme-gradient);
    border: 1px solid rgba(var(--front-color-white-rgb), 0.66);
    border-radius: 11px;
    box-shadow: inset 0 1px 0 rgba(var(--front-color-white-rgb), 0.28), 0 9px 18px rgba(var(--quick-menu-theme-primary-rgb), 0.2);
}

.quick-function-menu__heading-group {
    display: grid;
    gap: 2px;
    min-width: 0;
    text-align: left;
}

.quick-function-menu__heading {
    min-width: 0;
    margin: 0;
    color: var(--quick-menu-text);
    font-size: var(--front-font-size-rem-096);
    font-weight: var(--front-font-extrabold);
    line-height: 1.1;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-function-menu__close {
    width: 30px;
    height: 30px;
    color: var(--front-palette-475569);
    background: rgba(var(--front-color-white-rgb), 0.78);
    border: 1px solid rgba(var(--front-rgb-203-213-225), 0.88);
    border-radius: 9px;
    box-shadow: inset 0 1px 0 rgba(var(--front-color-white-rgb), 0.86);
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.quick-function-menu__close:hover,
.quick-function-menu__close:focus-visible {
    color: var(--front-palette-0f172a);
    background: var(--front-color-white);
    box-shadow: inset 0 1px 0 rgba(var(--front-color-white-rgb), 0.86), 0 8px 14px rgba(var(--front-rgb-15-23-42), 0.08);
    transform: translateY(-1px);
}

.quick-function-menu__body {
    max-height: min(390px, calc(100vh - 150px));
    margin-top: 8px;
    padding: 0 2px 2px;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    overscroll-behavior-x: none;
    scroll-behavior: smooth;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
}

.quick-function-menu__body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.quick-function-menu__body::-webkit-scrollbar-track {
    background: transparent;
}

.quick-function-menu__body::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 999px;
}

.quick-function-menu__body:hover,
.quick-function-menu__body:focus-within {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--front-rgb-148-163-184), 0.58) transparent;
}

.quick-function-menu__body:hover::-webkit-scrollbar,
.quick-function-menu__body:focus-within::-webkit-scrollbar {
    width: 6px;
}

.quick-function-menu__body:hover::-webkit-scrollbar-thumb,
.quick-function-menu__body:focus-within::-webkit-scrollbar-thumb {
    background: rgba(var(--front-rgb-148-163-184), 0.58);
    border: 2px solid transparent;
    background-clip: content-box;
}

.quick-function-menu__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    padding-right: 2px;
}

.quick-function-menu__action {
    --quick-menu-accent: var(--quick-menu-theme-primary);
    --quick-menu-accent-soft: rgba(var(--quick-menu-theme-primary-rgb), 0.11);
    --quick-menu-accent-border: rgba(var(--quick-menu-theme-primary-rgb), 0.22);
    --quick-menu-accent-shadow: rgba(var(--quick-menu-theme-primary-rgb), 0.16);
    position: relative;
    display: grid;
    grid-template-rows: 38px 26px;
    gap: 5px;
    align-items: center;
    justify-items: center;
    min-width: 0;
    min-height: 78px;
    padding: 7px 5px 6px;
    color: var(--front-palette-1f2937);
    text-decoration: none;
    background: linear-gradient(180deg, var(--front-color-white) 0%, var(--front-palette-f8fafc) 100%);
    border: 1px solid rgba(var(--front-rgb-226-232-240), 0.86);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(var(--front-rgb-15-23-42), 0.035);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.quick-function-menu__action::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--quick-menu-accent-soft), rgba(var(--front-color-white-rgb), 0));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.quick-function-menu__icon {
    position: relative;
    z-index: 1;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--quick-menu-accent);
    background: var(--quick-menu-accent-soft);
    border: 1px solid var(--quick-menu-accent-border);
    border-radius: 11px;
    box-shadow: inset 0 1px 0 rgba(var(--front-color-white-rgb), 0.78);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.quick-function-menu__icon svg {
    width: 21px;
    height: 21px;
    display: block;
    margin: 0;
}

.quick-function-menu__label {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0;
    color: inherit;
    font-size: var(--front-font-size-rem-068);
    font-weight: var(--front-font-extrabold);
    line-height: 1.12;
    letter-spacing: 0;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.quick-function-menu__action:hover,
.quick-function-menu__action:focus-visible {
    color: var(--quick-menu-accent);
    border-color: var(--quick-menu-accent-border);
    box-shadow: 0 10px 22px rgba(var(--front-rgb-15-23-42), 0.09);
    transform: translateY(-1px);
}

.quick-function-menu__action:hover::after,
.quick-function-menu__action:focus-visible::after {
    opacity: 1;
}

.quick-function-menu__action:hover .quick-function-menu__icon,
.quick-function-menu__action:focus-visible .quick-function-menu__icon {
    box-shadow: inset 0 1px 0 rgba(var(--front-color-white-rgb), 0.78), 0 8px 16px var(--quick-menu-accent-shadow);
    transform: scale(1.035);
}

.quick-function-menu__action[data-accent="emerald"] { --quick-menu-accent: var(--quick-menu-theme-accent); --quick-menu-accent-soft: rgba(var(--quick-menu-theme-accent-rgb), 0.11); --quick-menu-accent-border: rgba(var(--quick-menu-theme-accent-rgb), 0.22); --quick-menu-accent-shadow: rgba(var(--quick-menu-theme-accent-rgb), 0.16); }
.quick-function-menu__action[data-accent="rose"] { --quick-menu-accent: var(--front-palette-e11d48); --quick-menu-accent-soft: rgba(var(--front-rgb-225-29-72), 0.11); --quick-menu-accent-border: rgba(var(--front-rgb-225-29-72), 0.22); --quick-menu-accent-shadow: rgba(var(--front-rgb-225-29-72), 0.16); }
.quick-function-menu__action[data-accent="sky"] { --quick-menu-accent: var(--front-palette-0284c7); --quick-menu-accent-soft: rgba(var(--front-rgb-2-132-199), 0.11); --quick-menu-accent-border: rgba(var(--front-rgb-2-132-199), 0.22); --quick-menu-accent-shadow: rgba(var(--front-rgb-2-132-199), 0.16); }
.quick-function-menu__action[data-accent="amber"] { --quick-menu-accent: var(--front-palette-b45309); --quick-menu-accent-soft: rgba(var(--front-rgb-245-158-11), 0.15); --quick-menu-accent-border: rgba(var(--front-rgb-245-158-11), 0.24); --quick-menu-accent-shadow: rgba(var(--front-rgb-245-158-11), 0.16); }
.quick-function-menu__action[data-accent="violet"] { --quick-menu-accent: var(--front-palette-7c3aed); --quick-menu-accent-soft: rgba(var(--front-rgb-124-58-237), 0.11); --quick-menu-accent-border: rgba(var(--front-rgb-124-58-237), 0.22); --quick-menu-accent-shadow: rgba(var(--front-rgb-124-58-237), 0.16); }
.quick-function-menu__action[data-accent="slate"] { --quick-menu-accent: var(--front-palette-475569); --quick-menu-accent-soft: rgba(var(--front-rgb-71-85-105), 0.09); --quick-menu-accent-border: rgba(var(--front-rgb-71-85-105), 0.2); --quick-menu-accent-shadow: rgba(var(--front-rgb-71-85-105), 0.14); }
.quick-function-menu__action[data-accent="teal"] { --quick-menu-accent: var(--quick-menu-theme-accent); --quick-menu-accent-soft: rgba(var(--quick-menu-theme-accent-rgb), 0.11); --quick-menu-accent-border: rgba(var(--quick-menu-theme-accent-rgb), 0.22); --quick-menu-accent-shadow: rgba(var(--quick-menu-theme-accent-rgb), 0.16); }
.quick-function-menu__action[data-accent="cyan"] { --quick-menu-accent: var(--quick-menu-theme-accent); --quick-menu-accent-soft: rgba(var(--quick-menu-theme-accent-rgb), 0.11); --quick-menu-accent-border: rgba(var(--quick-menu-theme-accent-rgb), 0.22); --quick-menu-accent-shadow: rgba(var(--quick-menu-theme-accent-rgb), 0.16); }
.quick-function-menu__action[data-accent="blue"] { --quick-menu-accent: var(--quick-menu-theme-primary); --quick-menu-accent-soft: rgba(var(--quick-menu-theme-primary-rgb), 0.11); --quick-menu-accent-border: rgba(var(--quick-menu-theme-primary-rgb), 0.22); --quick-menu-accent-shadow: rgba(var(--quick-menu-theme-primary-rgb), 0.16); }
.quick-function-menu__action[data-accent="green"] { --quick-menu-accent: var(--quick-menu-theme-accent); --quick-menu-accent-soft: rgba(var(--quick-menu-theme-accent-rgb), 0.11); --quick-menu-accent-border: rgba(var(--quick-menu-theme-accent-rgb), 0.22); --quick-menu-accent-shadow: rgba(var(--quick-menu-theme-accent-rgb), 0.16); }
.quick-function-menu__action[data-accent="orange"] { --quick-menu-accent: var(--front-palette-ea580c); --quick-menu-accent-soft: rgba(var(--front-rgb-234-88-12), 0.13); --quick-menu-accent-border: rgba(var(--front-rgb-234-88-12), 0.22); --quick-menu-accent-shadow: rgba(var(--front-rgb-234-88-12), 0.16); }
.quick-function-menu__action[data-accent="pink"] { --quick-menu-accent: var(--front-palette-db2777); --quick-menu-accent-soft: rgba(var(--front-rgb-219-39-119), 0.11); --quick-menu-accent-border: rgba(var(--front-rgb-219-39-119), 0.22); --quick-menu-accent-shadow: rgba(var(--front-rgb-219-39-119), 0.16); }
.quick-function-menu__action[data-accent="purple"] { --quick-menu-accent: var(--front-palette-9333ea); --quick-menu-accent-soft: rgba(var(--front-rgb-147-51-234), 0.11); --quick-menu-accent-border: rgba(var(--front-rgb-147-51-234), 0.22); --quick-menu-accent-shadow: rgba(var(--front-rgb-147-51-234), 0.16); }
.quick-function-menu__action[data-accent="indigo"] { --quick-menu-accent: var(--quick-menu-theme-primary); --quick-menu-accent-soft: rgba(var(--quick-menu-theme-primary-rgb), 0.11); --quick-menu-accent-border: rgba(var(--quick-menu-theme-primary-rgb), 0.22); --quick-menu-accent-shadow: rgba(var(--quick-menu-theme-primary-rgb), 0.16); }
.quick-function-menu__action[data-accent="zinc"] { --quick-menu-accent: var(--front-palette-52525b); --quick-menu-accent-soft: rgba(var(--front-rgb-82-82-91), 0.09); --quick-menu-accent-border: rgba(var(--front-rgb-82-82-91), 0.2); --quick-menu-accent-shadow: rgba(var(--front-rgb-82-82-91), 0.14); }

.quick-function-dropdown.quick-function-menu {
    --quick-menu-surface: rgba(var(--front-color-white-rgb), 0.98);
    --quick-menu-border: rgba(var(--front-rgb-203-213-225), 0.72);
    top: 54px;
    width: min(360px, calc(100vw - 24px));
    min-width: min(360px, calc(100vw - 24px));
    padding: 9px;
    border-radius: 16px;
    background: var(--quick-menu-surface);
    border-color: var(--quick-menu-border);
    box-shadow: 0 20px 46px rgba(var(--front-rgb-15-23-42), 0.14), 0 8px 18px rgba(var(--front-rgb-15-23-42), 0.07);
}

.quick-function-dropdown.quick-function-menu::before {
    content: none;
}

.quick-function-dropdown.quick-function-menu.show {
    animation: quick-function-menu-panel-in 0.2s ease-out;
}

@keyframes quick-function-menu-panel-in {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.quick-function-dropdown.quick-function-menu .quick-function-menu__header {
    grid-template-columns: 38px minmax(0, 1fr) 30px;
    min-height: 40px;
    padding: 0;
    gap: 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.quick-function-dropdown.quick-function-menu .quick-function-menu__header-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--quick-menu-theme-gradient);
    box-shadow: 0 12px 22px rgba(var(--quick-menu-theme-primary-rgb), 0.2);
}

.quick-function-dropdown.quick-function-menu .quick-function-menu__header-mark svg {
    width: 20px;
    height: 20px;
}

.quick-function-dropdown.quick-function-menu .quick-function-menu__heading-group {
    align-content: center;
    gap: 3px;
}

.quick-function-dropdown.quick-function-menu .quick-function-menu__heading {
    color: var(--front-palette-0f172a);
    font-size: 1rem;
    font-weight: var(--front-font-bold);
    line-height: 1;
}

.quick-function-menu__subtitle {
    color: var(--front-palette-64748b);
    font-size: var(--front-font-size-rem-074);
    font-weight: var(--front-font-normal);
    line-height: 1.05;
}

.quick-function-dropdown.quick-function-menu .quick-function-menu__close {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: rgba(var(--front-color-white-rgb), 0.78);
    color: var(--front-palette-0f172a);
    font-size: var(--front-font-size-rem-105);
}

.quick-function-dropdown.quick-function-menu .quick-function-menu__body {
    max-height: min(58vh, 410px);
    margin-top: 8px;
    padding: 0 2px 0 0;
}

.quick-function-menu__feature-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px;
    gap: 8px;
    margin-bottom: 8px;
}

.quick-function-menu__wallet-card,
.quick-function-menu__scan,
.quick-function-menu__footer-link {
    text-decoration: none;
}

.quick-function-menu__wallet-card {
    position: relative;
    min-height: 60px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 8px;
    padding: 8px;
    overflow: hidden;
    border: 0;
    border-radius: 13px;
    color: var(--front-color-white);
    background: var(--quick-menu-theme-gradient);
    box-shadow: inset 0 1px 0 rgba(var(--front-color-white-rgb), 0.24);
}

.quick-function-menu__wallet-card:hover,
.quick-function-menu__wallet-card:focus-visible {
    color: var(--front-color-white);
    transform: translateY(-1px);
}

.quick-function-menu__wallet-art {
    position: relative;
    width: 36px;
    height: 32px;
}

.quick-function-menu__wallet-body,
.quick-function-menu__wallet-flap,
.quick-function-menu__wallet-paper {
    position: absolute;
    display: block;
}

.quick-function-menu__wallet-paper {
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    transform: rotate(-8deg);
}

.quick-function-menu__wallet-paper--one {
    left: 6px;
    background: #eef7ff;
}

.quick-function-menu__wallet-paper--two {
    left: 14px;
    background: #ffb31f;
    box-shadow: inset 0 -10px 0 #ff6a3d;
}

.quick-function-menu__wallet-body {
    left: 0;
    bottom: 0;
    width: 34px;
    height: 25px;
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(var(--front-color-white-rgb), 0.36), var(--quick-menu-theme-primary));
    box-shadow: 0 8px 16px rgba(var(--front-rgb-15-23-42), 0.14);
}

.quick-function-menu__wallet-flap {
    right: 1px;
    bottom: 6px;
    width: 18px;
    height: 12px;
    border-radius: 7px;
    background: var(--quick-menu-theme-accent);
}

.quick-function-menu__wallet-flap::after {
    content: "";
    position: absolute;
    right: 5px;
    top: 5px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(var(--front-color-white-rgb), 0.86);
}

.quick-function-menu__wallet-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.quick-function-menu__wallet-label {
    color: rgba(var(--front-color-white-rgb), 0.72);
    font-size: var(--front-font-size-rem-072);
    font-weight: var(--front-font-medium);
    line-height: 1;
}

.quick-function-menu__wallet-amount {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
    color: var(--front-color-white);
    font-size: 1.05rem;
    font-weight: var(--front-font-bold);
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-function-menu__wallet-balance {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: filter 0.16s ease, opacity 0.16s ease;
}

.quick-function-menu__wallet-balance[data-hidden="1"] {
    filter: blur(7px);
    opacity: 0.78;
    user-select: none;
}

.quick-function-menu__wallet-eye {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: rgba(var(--front-color-white-rgb), 0.88);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.quick-function-menu__wallet-eye:hover,
.quick-function-menu__wallet-eye:focus-visible {
    background: rgba(var(--front-color-white-rgb), 0.16);
    color: var(--front-color-white);
    outline: none;
    transform: translateY(-1px);
}

.quick-function-menu__wallet-eye i {
    font-size: var(--front-font-size-rem-078);
    opacity: 0.92;
}

.quick-function-menu__wallet-code {
    color: rgba(var(--front-color-white-rgb), 0.62);
    font-size: 0.6rem;
    font-weight: var(--front-font-semibold);
    text-transform: uppercase;
}

.quick-function-menu__wallet-arrow {
    justify-self: end;
    color: rgba(var(--front-color-white-rgb), 0.9);
    font-size: var(--front-font-size-rem-092);
}

.quick-function-menu__scan {
    min-height: 60px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    padding: 7px;
    border: 1px solid rgba(var(--front-rgb-226-232-240), 0.9);
    border-radius: 13px;
    background: linear-gradient(180deg, var(--front-color-white), var(--front-palette-f8fafc));
    color: var(--front-palette-0f172a);
    box-shadow: 0 1px 2px rgba(var(--front-rgb-15-23-42), 0.04);
    font-size: var(--front-font-size-rem-074);
    font-weight: var(--front-font-semibold);
    line-height: 1;
    text-align: center;
}

.quick-function-menu__scan:hover,
.quick-function-menu__scan:focus-visible {
    color: var(--quick-menu-theme-primary);
    border-color: rgba(var(--quick-menu-theme-primary-rgb), 0.2);
}

.quick-function-menu__scan-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--quick-menu-theme-primary);
    font-size: 1.62rem;
}

.quick-function-dropdown.quick-function-menu .quick-function-menu__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding-right: 0;
}

.quick-function-dropdown.quick-function-menu .quick-function-menu__action {
    grid-template-rows: 32px minmax(20px, auto);
    gap: 4px;
    min-height: 58px;
    padding: 7px 4px 6px;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--front-color-white), var(--front-palette-fbfcff));
    box-shadow: 0 1px 2px rgba(var(--front-rgb-15-23-42), 0.035);
}

.quick-function-dropdown.quick-function-menu .quick-function-menu__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.quick-function-dropdown.quick-function-menu .quick-function-menu__icon svg {
    width: 17px;
    height: 17px;
}

.quick-function-dropdown.quick-function-menu .quick-function-menu__label {
    font-size: var(--front-font-size-rem-066);
    font-weight: var(--front-font-semibold);
    line-height: 1.1;
}

.quick-function-menu__footer-link {
    min-height: 42px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
    padding: 7px 9px;
    border: 1px solid rgba(var(--quick-menu-theme-primary-rgb), 0.08);
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(var(--quick-menu-theme-primary-rgb), 0.1), rgba(var(--quick-menu-theme-accent-rgb), 0.05));
    color: var(--front-palette-0f172a);
}

.quick-function-menu__footer-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: var(--quick-menu-theme-primary);
    font-size: var(--front-font-size-rem-125);
}

.quick-function-menu__footer-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.quick-function-menu__footer-copy strong {
    color: var(--quick-menu-theme-primary);
    font-size: var(--front-font-size-rem-078);
    font-weight: var(--front-font-bold);
    line-height: 1.15;
}

.quick-function-menu__footer-copy span {
    color: var(--front-palette-64748b);
    font-size: var(--front-font-size-rem-066);
    font-weight: var(--front-font-medium);
    line-height: 1.2;
}

.quick-function-menu__footer-arrow {
    color: rgba(var(--quick-menu-theme-primary-rgb), 0.55);
    font-size: var(--front-font-size-rem-105);
}

/* Remove native dropdown border (Chrome/Edge/Opera/Brave) */
select.form-select:focus,
select.form-select:active {
    outline: none !important;
    box-shadow: 0 0 0 0.15rem rgba(var(--front-rgb-0-123-255), .15) !important;
}

/* Normalize select appearance and focus across browsers */
select.form-select {
    -webkit-appearance: none;
    appearance: none;
}

select.form-select:focus {
    outline: none !important;
    box-shadow: 0 0 0 1px rgba(var(--front-color-primary-rgb), 0.12) !important;
}

/* Note: Styling the native dropdown list is not supported consistently across browsers.
   The rules below target the option elements to remove native outlines where possible. */

/* Remove border from the dropdown list itself (all browsers fallback) */
select.form-select option:focus, select.form-select option:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/*---------------------------------------
    ## Merchant List Styles
---------------------------------------*/

/* Merchant List Container */
.merchant-list-container .transaction-list {
    margin-top: 1rem;
}

/* Individual Merchant Card */
.merchant-card-item {
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    background: var(--front-color-white);
    box-shadow: 0 2px 8px rgba(var(--front-color-black-rgb), 0.06);
    overflow: hidden;
    margin-bottom: 1rem;
}

.merchant-card-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(var(--front-color-black-rgb), 0.12);
    border-color: var(--main-color);
}

/* Header Action Buttons */
.merchant-header-actions {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    justify-content: center;
}

.merchant-header-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: var(--front-font-size-rem-0875);
    font-weight: var(--front-font-medium);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    gap: 0.5rem;
}

.merchant-header-btn-payments {
    background: var(--front-palette-e1ede6);
    color: var(--front-palette-34865b);
    border: 1px solid var(--front-palette-c3d9cc);
}

.merchant-header-btn-payments:hover {
    background: var(--front-palette-34865b);
    color: var(--front-color-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(var(--front-rgb-52-134-91), 0.2);
}

.merchant-header-btn-create {
    background: var(--front-palette-e3e8fc);
    color: var(--main-color);
    border: 1px solid var(--front-palette-d1d9f7);
}

.merchant-header-btn-create:hover {
    background: var(--main-color);
    color: var(--front-color-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(var(--front-color-primary-rgb), 0.2);
}

/* Empty State */
.merchant-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    background: linear-gradient(135deg, var(--front-palette-f8f9ff) 0%, var(--front-palette-f1f3ff) 100%);
    border-radius: 16px;
    border: 2px dashed var(--border-color);
}

.merchant-empty-icon {
    font-size: var(--front-font-size-rem-4);
    color: var(--paragraph-color);
    margin-bottom: 1.5rem;
    opacity: 0.6;
}

.merchant-empty-title {
    font-size: var(--front-font-size-rem-15);
    font-weight: var(--front-font-semibold);
    color: var(--heading-color);
    margin-bottom: 0.75rem;
}

.merchant-empty-subtitle {
    font-size: var(--front-font-size-rem-1);
    color: var(--paragraph-color);
    margin-bottom: 2rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.merchant-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--main-color);
    color: var(--front-color-white);
    border: none;
    border-radius: 10px;
    font-size: var(--front-font-size-rem-1);
    font-weight: var(--front-font-medium);
    text-decoration: none;
    transition: all 0.3s ease;
}

.merchant-empty-btn:hover {
    background: var(--hover-color);
    color: var(--front-color-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(var(--front-color-primary-rgb), 0.3);
}

/* Responsive Text Utilities */
.merchant-responsive-text {
    display: inline;
}

/*---------------------------------------
    ## End Merchant List Styles
---------------------------------------*/

/* QR Payment Specific Styles */
.qr-invoice-container {
    width: 100%;
}

.qr-print-section {
    background: var(--front-color-white);
    border: 1px dotted var(--front-palette-ccc);
    border-radius: 8px;
    padding: 12px 12px 10px 12px;
    margin-bottom: 10px;
}

.print-header {
    text-align: center;
    margin-bottom: 10px;
}

.business-name {
    color: var(--front-palette-333);
    font-weight: var(--front-font-semibold);
    margin-bottom: 2px;
}

.business-subtitle {
    color: var(--front-palette-666);
    font-size: var(--front-font-sm);
}

.qr-code-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: var(--front-palette-f8f9fa);
    border-radius: 8px;
    margin: 10px 0 8px 0;
}

.payment-details {
    background: var(--front-palette-f8f9fa);
    border-radius: 6px;
    padding: 8px 10px;
    margin: 8px 0;
    border: 1px dotted var(--front-palette-ccc);
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    padding: 2px 0;
    border-bottom: 1px dotted var(--front-palette-ccc);
}

.detail-label {
    font-weight: var(--front-font-medium);
    color: var(--front-palette-555);
    font-size: var(--front-font-base);
}

.detail-value {
    font-weight: var(--front-font-semibold);
    color: var(--front-palette-333);
    font-size: var(--front-font-base);
}

.print-footer {
    text-align: center;
    padding-top: 8px;
    border-top: 1px dashed var(--front-palette-ccc);
    margin-top: 10px;
}

.scan-instruction {
    font-size: var(--front-font-sm);
    color: var(--front-palette-666);
    margin-bottom: 4px;
}

.security-note {
    font-size: var(--front-font-xs);
    color: var(--front-palette-888);
}

/* Preview Styles */
.preview-container {
    width: 100%;
}

.invoice-preview {
    min-height: 320px;
    padding: 15px !important;
}

.business-header {
    border-bottom: 2px solid var(--front-palette-e0e0e0);
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.qr-placeholder-box {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--front-palette-f8f9fa);
    padding: 10px;
}

.amount-preview {
    background: var(--front-color-white);
    border: 1px solid var(--front-palette-e0e0e0);
    border-radius: 6px;
    padding: 8px 10px;
    margin: 8px 0;
}

.preview-row {
    margin-bottom: 4px;
    padding: 2px 0;
}

.preview-label {
    font-weight: var(--front-font-medium);
    color: var(--front-palette-555);
    font-size: var(--front-font-base);
}

.preview-value {
    font-weight: var(--front-font-semibold);
    color: var(--front-palette-333);
    font-size: var(--front-font-base);
}

.additional-info {
    padding-top: 5px;
    border-top: 1px dashed var(--front-palette-e0e0e0);
    margin-top: 5px;
}

.info-row {
    margin-bottom: 2px;
}

.action-buttons {
    padding: 8px 6px;
    background: var(--front-palette-f8f9fa);
    border-radius: 8px;
}

/* Print-specific styles */
@media print {
    .action-buttons {
        display: none !important;
    }

    .qr-print-section {
        border: 1px dotted var(--front-color-black) !important;
    }
}

/*===== Print Invoice Enhancements =====*/
@media print {
    /* Center invoice on page */
    .qr-print-section {
        width: 650px !important;
        margin: 0 auto !important;
        padding: 25px 30px 20px 30px !important;
        border: 2px dotted var(--front-palette-333) !important;
        border-radius: 0 !important;
    }

    .print-header {
        margin-bottom: 25px !important;
    }

    .print-header .business-name {
        font-size: var(--front-font-size-px-26) !important;
        font-weight: var(--front-font-bold) !important;
        letter-spacing: 0.4px;
    }

    .print-header .business-subtitle {
        font-size: var(--front-font-md) !important;
        color: var(--front-palette-444) !important;
        font-weight: var(--front-font-medium);
    }

    .print-header hr {
        border-top: 2px solid var(--front-color-black) !important;
        margin-top: 18px !important;
    }

    .qr-code-wrapper {
        margin: 25px 0 20px 0 !important;
    }

    .payment-details {
        background: transparent !important;
        border-top: 1px dashed var(--front-palette-bbb) !important;
        border-bottom: 1px dashed var(--front-palette-bbb) !important;
        padding: 12px 0 !important;
        margin: 18px 0 25px 0 !important;
    }

    .detail-row {
        padding: 6px 0 !important;
        margin-bottom: 6px !important;
        font-size: var(--front-font-md) !important;
    }

    .detail-row:last-child {
        margin-bottom: 0 !important;
    }

    .detail-label {
        font-weight: var(--front-font-semibold) !important;
        color: var(--front-color-black) !important;
    }

    .detail-value {
        font-weight: var(--front-font-semibold) !important;
        color: var(--front-color-black) !important;
    }

    .print-footer {
        margin-top: 25px !important;
        border-top: 1px solid var(--front-color-black) !important;
        padding-top: 15px !important;
    }

    .scan-instruction {
        font-size: var(--front-font-base) !important;
        margin-bottom: 6px !important;
    }

    .security-note {
        font-size: var(--front-font-xs) !important;
        color: var(--front-palette-333) !important;
    }
}

/*===== P2P User: Create / Manage Trade Ad =====*/
.p2p-manage-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.p2p-manage-hero {
    border: 1px solid var(--front-palette-dce5f5);
    border-radius: 22px;
    background: linear-gradient(180deg, var(--front-color-white) 0%, var(--front-palette-f7faff) 100%);
    padding: 1.1rem;
    box-shadow: 0 12px 28px rgba(var(--front-rgb-40-64-135), 0.05);
}

.p2p-manage-hero__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.p2p-manage-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .32rem .7rem;
    border-radius: 999px;
    background: var(--front-palette-eef3ff);
    color: var(--front-palette-4261d7);
    font-size: var(--front-font-size-rem-076);
    font-weight: var(--front-font-bold);
    margin-bottom: .75rem;
}

.p2p-manage-hero__title {
    color: var(--front-palette-20315d);
    font-weight: var(--front-font-bold);
    font-size: clamp(1.2rem, 1.25vw, 1.55rem);
    margin-bottom: .4rem;
}

.p2p-manage-hero__subtitle {
    color: var(--front-palette-61719a);
    font-size: var(--front-font-size-rem-09);
    line-height: 1.65;
    max-width: 780px;
    margin-bottom: 0;
}

.p2p-manage-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .55rem;
}

.p2p-manage-hero__actions form {
    display: inline-flex;
}

.p2p-manage-hero__actions form .btn {
    width: 100%;
}

.p2p-manage-hero__stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}

.p2p-manage-stat {
    border: 1px solid var(--front-palette-dfe7f6);
    border-radius: 16px;
    background: var(--front-palette-fbfcff);
    padding: .85rem .9rem;
    min-width: 0;
}

.p2p-manage-stat__label,
.p2p-manage-stat__value,
.p2p-manage-stat__hint {
    display: block;
}

.p2p-manage-stat__label {
    color: var(--front-palette-7b88a8);
    font-size: var(--front-font-size-rem-072);
    font-weight: var(--front-font-bold);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: .4rem;
}

.p2p-manage-stat__value {
    color: var(--front-palette-21305a);
    font-size: var(--front-font-size-rem-1);
    font-weight: var(--front-font-bold);
    line-height: 1.4;
    word-break: break-word;
}

.p2p-manage-stat__hint {
    color: var(--front-palette-68779f);
    font-size: var(--front-font-size-rem-078);
    margin-top: .28rem;
    line-height: 1.45;
}

.p2p-manage-alert {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin-top: .95rem;
    padding: .9rem 1rem;
    border-radius: 16px;
    font-size: var(--front-font-size-rem-085);
    line-height: 1.65;
}

.p2p-manage-alert--warning {
    border: 1px solid var(--front-palette-f1ddb2);
    background: var(--front-palette-fff8eb);
    color: var(--front-palette-8f6300);
}

.p2p-manage-alert--info {
    border: 1px solid var(--front-palette-d9e3f8);
    background: var(--front-palette-f4f8ff);
    color: var(--front-palette-496189);
}

.p2p-offer-builder-fields {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.p2p-offer-builder-fields:disabled {
    opacity: .78;
}

.p2p-terms-textarea {
    min-height: 140px !important;
}

.p2p-manage-shell .p2p-promo-preview {
    border: 1px solid var(--front-palette-dbe2f2);
    background: var(--front-palette-f8faff);
    border-radius: 20px;
    padding: 1.05rem;
}

.p2p-manage-shell .p2p-promo-preview__title {
    color: var(--front-palette-1f315f);
    font-weight: var(--front-font-bold);
    font-size: clamp(1.05rem, 1.15vw, 1.35rem);
    margin-bottom: .8rem;
}

.p2p-manage-shell .p2p-promo-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--front-palette-d1daeb);
    border-radius: 14px;
    overflow: hidden;
    background: var(--front-palette-fdfefe);
}

.p2p-manage-shell .p2p-promo-meta__item {
    padding: .75rem .85rem;
    border-right: 1px solid var(--front-palette-d9e1f0);
}

.p2p-manage-shell .p2p-promo-meta__item:first-child {
    background: var(--front-palette-eef2f8);
}

.p2p-manage-shell .p2p-promo-meta__item:last-child {
    border-right: 0;
}

.p2p-manage-shell .p2p-promo-meta__item small {
    display: block;
    color: var(--front-palette-4a5c86);
    font-size: var(--front-font-size-rem-068);
    margin-bottom: .3rem;
    font-weight: var(--front-font-medium);
}

.p2p-manage-shell .p2p-promo-meta__item strong {
    color: var(--front-palette-1f315f);
    font-size: clamp(.92rem, 1vw, 1.05rem);
    font-weight: var(--front-font-bold);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    line-height: 1.25;
}

.p2p-manage-shell .p2p-promo-meta__item strong i {
    color: var(--front-palette-3556a8);
    font-size: var(--front-font-size-em-095);
}

.p2p-manage-shell .p2p-promo-summary__group {
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px dashed var(--front-palette-d7dfef);
}

.p2p-manage-shell .p2p-promo-group-title {
    color: var(--front-palette-1f315f);
    font-size: clamp(.95rem, 1vw, 1.15rem);
    font-weight: var(--front-font-bold);
    margin-bottom: .65rem;
}

.p2p-manage-shell .p2p-promo-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.p2p-manage-shell .p2p-promo-feature-card {
    border: 1px solid var(--front-palette-d6deed);
    background: var(--front-palette-fbfcff);
    border-radius: 12px;
    padding: .75rem .85rem;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.p2p-manage-shell .p2p-promo-feature-card i {
    color: var(--front-palette-4966bd);
    margin-top: .2rem;
    font-size: var(--front-font-size-rem-095);
}

.p2p-manage-shell .p2p-promo-feature-card strong {
    display: block;
    color: var(--front-palette-1f315f);
    font-size: var(--front-font-size-rem-092);
    line-height: 1.2;
    margin-bottom: .2rem;
}

.p2p-manage-shell .p2p-promo-feature-card small {
    display: block;
    color: var(--front-palette-334a7d);
    font-size: var(--front-font-size-rem-08);
    line-height: 1.4;
}

.p2p-manage-shell .p2p-promo-rules {
    margin-top: .85rem;
    padding-top: .8rem;
    border-top: 1px dashed var(--front-palette-d7dfef);
    color: var(--front-palette-324978);
    font-size: clamp(.82rem, .92vw, .95rem);
    line-height: 1.45;
}

.p2p-manage-shell .p2p-promo-rules__list {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
}

.p2p-manage-shell .p2p-promo-rule-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .65rem;
    border-radius: 999px;
    background: var(--front-palette-f4f7ff);
    border: 1px solid var(--front-palette-dde4f2);
    color: var(--front-palette-29406f);
    font-size: var(--front-font-size-rem-078);
    font-weight: var(--front-font-medium);
    line-height: 1.2;
}

.p2p-manage-shell .p2p-promo-rule-chip--success {
    background: var(--front-palette-edf9f1);
    border-color: var(--front-palette-cfe8da);
    color: var(--front-palette-1f6a3c);
}

.p2p-manage-shell .p2p-promo-rule-chip--warning {
    background: var(--front-palette-fff6e8);
    border-color: var(--front-palette-f2dfb7);
    color: var(--front-palette-946200);
}

.p2p-manage-shell .p2p-promo-rule-chip i {
    color: var(--front-palette-4f67bb);
    font-size: var(--front-font-size-em-085);
}

.p2p-manage-shell .p2p-promo-rule-chip--success i {
    color: var(--front-palette-27935a);
}

.p2p-manage-shell .p2p-promo-rule-chip--warning i {
    color: var(--front-palette-c78900);
}

.p2p-manage-shell .p2p-promo-rule-chip__label {
    color: inherit;
    opacity: .78;
}

.p2p-manage-shell .p2p-promo-rule-chip__value {
    font-weight: var(--front-font-bold);
    color: inherit;
}

.p2p-manage-shell .p2p-promo-empty {
    color: var(--front-palette-6e7ea9);
    font-size: var(--front-font-size-rem-084);
    border: 1px dashed var(--front-palette-cfd8ec);
    border-radius: 12px;
    padding: .75rem .85rem;
    background: var(--front-palette-fcfdff);
}

.p2p-manage-shell .p2p-promo-package-hint {
    font-size: var(--front-font-size-rem-078);
    margin-top: .35rem;
}

.p2p-method-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .85rem;
    padding: .65rem .75rem;
    border: 1px solid var(--front-palette-dbe3f2);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--front-color-white) 0%, var(--front-palette-f8fbff) 100%);
    overflow: hidden;
}

.p2p-method-toolbar__summary {
    display: flex;
    flex-direction: column;
    gap: .38rem;
    min-width: 0;
}

.p2p-method-toolbar__label {
    color: var(--front-palette-22305c);
    font-size: var(--front-font-size-rem-072);
    font-weight: var(--front-font-bold);
    letter-spacing: .04em;
    line-height: 1;
    text-transform: uppercase;
}

.p2p-method-toolbar__stats {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
}

.p2p-method-toolbar__stat {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .28rem .58rem;
    border-radius: 999px;
    border: 1px solid var(--front-palette-dde4f2);
    background: var(--front-color-white);
    color: var(--front-palette-5e6f95);
    font-size: var(--front-font-size-rem-074);
    line-height: 1;
}

.p2p-method-toolbar__stat--active {
    color: var(--front-palette-19744b);
    border-color: var(--front-palette-cfe8da);
    background: var(--front-palette-eefaf3);
}

.p2p-method-toolbar__filters {
    display: grid;
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    align-items: center;
    gap: .55rem;
    min-width: 0;
}

.p2p-method-toolbar__country,
.p2p-method-toolbar__search {
    min-width: 0;
}

.p2p-method-toolbar .input-group-text,
.p2p-method-toolbar .form-select,
.p2p-method-toolbar .form-control {
    border-color: var(--front-palette-dbe3f2);
    background: var(--front-color-white);
    min-height: 40px;
    box-shadow: none;
}

.p2p-method-toolbar .form-select,
.p2p-method-toolbar .form-control {
    font-size: var(--front-font-size-rem-086);
}

.p2p-offer-methods__list {
    max-height: 21.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: .15rem;
}

.p2p-method-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
    min-width: 0;
}

.js-p2p-payment-method-item {
    min-width: 0;
}

.p2p-method-card {
    display: block;
    height: 100%;
    cursor: pointer;
}

.p2p-method-card--disabled {
    cursor: not-allowed;
}

.p2p-method-card .p2p-pm-check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.p2p-method-card__inner {
    display: flex;
    align-items: flex-start;
    gap: .68rem;
    min-height: 100%;
    border: 1px solid var(--front-palette-d9e1ef);
    border-radius: 14px;
    background: linear-gradient(180deg, var(--front-color-white) 0%, var(--front-palette-fbfcff) 100%);
    padding: .78rem .82rem;
    transition: all .18s ease;
    box-shadow: 0 6px 16px rgba(var(--front-rgb-52-71-120), 0.04);
}

.p2p-method-card:not(.p2p-method-card--disabled):hover .p2p-method-card__inner {
    border-color: var(--front-palette-b7c7e8);
    box-shadow: 0 10px 22px rgba(var(--front-rgb-58-85-154), 0.08);
    transform: translateY(-1px);
}

.p2p-method-card--disabled .p2p-method-card__inner {
    opacity: .78;
    background: var(--front-palette-fafbfd);
    box-shadow: none;
}

.p2p-method-card .p2p-pm-check:checked + .p2p-method-card__inner {
    border-color: var(--front-palette-78c39d);
    background: linear-gradient(180deg, var(--front-palette-fcfffd) 0%, var(--front-palette-f0faf4) 100%);
    box-shadow: 0 10px 24px rgba(var(--front-rgb-45-189-118), 0.11);
}

.p2p-method-card__check {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1.5px solid var(--front-palette-ccd6e6);
    background: var(--front-color-white);
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    transition: all .18s ease;
    margin-top: .18rem;
}

.p2p-method-card__check i {
    font-size: var(--front-font-size-rem-058);
}

.p2p-method-card .p2p-pm-check:checked + .p2p-method-card__inner .p2p-method-card__check {
    background: var(--front-palette-1c78e0);
    border-color: var(--front-palette-1c78e0);
    color: var(--front-color-white);
}

.p2p-method-card__brand {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--front-palette-f3f6ff);
    border: 1px solid var(--front-palette-d8e0f3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    overflow: hidden;
    font-size: var(--front-font-size-rem-096);
    font-weight: var(--front-font-bold);
    color: var(--front-palette-2b478c);
}

.p2p-method-card__brand img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p2p-method-card__content {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: .34rem;
}

.p2p-method-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .55rem;
}

.p2p-method-card__title-group {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .28rem;
}

.p2p-method-card__name {
    display: block;
    color: var(--front-palette-22305c);
    font-size: var(--front-font-size-rem-09);
    font-weight: var(--front-font-bold);
    line-height: 1.15;
    word-break: break-word;
}

.p2p-method-card__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .22rem .48rem;
    border-radius: 999px;
    font-size: var(--front-font-size-rem-066);
    font-weight: var(--front-font-bold);
    white-space: nowrap;
    line-height: 1;
    flex-shrink: 0;
}

.p2p-method-card__status-link {
    text-decoration: none;
}

.p2p-method-card__status-link:hover {
    text-decoration: none;
    filter: brightness(.98);
}

.p2p-method-card__status.is-ready {
    background: var(--front-palette-edf9f1);
    color: var(--front-palette-1f7a49);
    border: 1px solid var(--front-palette-ccead7);
}

.p2p-method-card__status.is-missing {
    background: var(--front-palette-fff7eb);
    color: var(--front-palette-a66a00);
    border: 1px solid var(--front-palette-f1dfbd);
}

.p2p-method-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .32rem;
}

.p2p-method-card__tag {
    display: inline-flex;
    align-items: center;
    padding: .2rem .45rem;
    border-radius: 999px;
    background: var(--front-palette-f4f7ff);
    border: 1px solid var(--front-palette-dde4f4);
    color: var(--front-palette-4c618f);
    font-size: var(--front-font-size-rem-064);
    font-weight: var(--front-font-semibold);
    line-height: 1.1;
}

.p2p-method-card__tag--success {
    background: var(--front-palette-edf7ff);
    border-color: var(--front-palette-cfe3fb);
    color: var(--front-palette-185ea7);
}

.p2p-method-card__hint {
    display: block;
    color: var(--front-palette-6b7c9f);
    font-size: var(--front-font-size-rem-073);
    line-height: 1.32;
}

/*===== P2P User: Promote Trade Ad =====*/
.p2p-promo-page .p2p-promo-preview {
    border: 1px solid var(--front-palette-e4e8ff);
    background: linear-gradient(180deg, var(--front-palette-f7f8ff) 0%, var(--front-color-white) 100%);
    border-radius: 14px;
}

.p2p-promo-page .p2p-promo-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 1px solid var(--front-palette-d6dcff);
    background: var(--front-palette-f3f5ff);
    color: var(--front-palette-34458d);
    border-radius: 999px;
    padding: .18rem .55rem;
    font-size: var(--front-font-size-rem-078);
    margin: 0 .35rem .4rem 0;
}

.p2p-promo-page .p2p-promo-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem .85rem;
}

.p2p-promo-page .p2p-promo-meta__item {
    border: 1px solid var(--front-palette-e5eaff);
    background: var(--front-palette-fafbff);
    border-radius: 10px;
    padding: .5rem .65rem;
}

.p2p-promo-page .p2p-promo-meta__item small {
    display: block;
    color: var(--front-palette-7986be);
    line-height: 1.1;
}

.p2p-promo-page .p2p-promo-meta__item strong {
    color: var(--front-palette-2b376f);
    font-size: var(--front-font-size-rem-09);
}

.p2p-promo-page .p2p-promo-summary__group {
    margin-top: .8rem;
    padding-top: .7rem;
    border-top: 1px dashed var(--front-palette-dbe2ff);
}

.p2p-promo-page .p2p-promo-empty {
    color: var(--front-palette-7a85b7);
    font-size: var(--front-font-size-rem-086);
    border: 1px dashed var(--front-palette-d7defe);
    border-radius: 10px;
    padding: .65rem .75rem;
    background: var(--front-palette-f8faff);
}

/*===== P2P User: Marketplace =====*/
.p2p-ui .p2p-offers-panel--marketplace {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    width: 100%;
    overflow: visible;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offers-panel__head {
    padding: 16px 20px;
    background: linear-gradient(180deg, rgba(var(--front-rgb-244-246-255), 0.96) 0%, rgba(var(--front-rgb-239-242-253), 0.96) 100%);
    border-bottom-color: var(--front-palette-dde3f5);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offers-panel__head h6 {
    font-size: var(--front-font-lg);
    font-weight: var(--front-font-bold);
    color: var(--front-palette-334a86);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offers-panel__body {
    padding: 0;
    background: transparent;
    width: calc(100% + 10px);
    max-height: min(68vh, 720px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: auto;
    scrollbar-gutter: auto;
    margin-right: -10px;
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--front-rgb-133-149-184), 0.45) transparent;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offers-panel__body::-webkit-scrollbar {
    width: 8px;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offers-panel__body::-webkit-scrollbar-track {
    background: transparent;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offers-panel__body::-webkit-scrollbar-thumb {
    background: rgba(var(--front-rgb-133-149-184), 0.45);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offers-panel__body::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--front-rgb-112-130-168), 0.6);
    background-clip: content-box;
}

.p2p-ui .p2p-offers-panel--marketplace #p2pOffersItems {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-card {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 9px;
    margin-bottom: 0;
    border: 1px solid var(--front-palette-d9e0f4);
    border-radius: 14px;
    background: linear-gradient(180deg, var(--front-color-white) 0%, var(--front-palette-fafbff) 100%);
    box-shadow: none;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-card:hover {
    background: linear-gradient(180deg, var(--front-color-white) 0%, var(--front-palette-f8faff) 100%);
    box-shadow: none;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-card.p2p-offer-card--accent-soft {
    border-color: rgba(var(--p2p-card-accent-rgb, 37, 99, 235), 0.30);
    box-shadow: 0 0 0 1px rgba(var(--p2p-card-accent-rgb, 37, 99, 235), 0.08);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-card.p2p-offer-card--accent-soft:hover {
    box-shadow: 0 0 0 1px rgba(var(--p2p-card-accent-rgb, 37, 99, 235), 0.12);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-card.p2p-offer-card--highlighted {
    border-color: rgba(var(--p2p-card-accent-rgb, 217, 119, 6), 0.36);
    background: linear-gradient(180deg, rgba(var(--p2p-card-accent-rgb, 217, 119, 6), 0.12) 0%, var(--front-palette-fffdf9) 100%);
    box-shadow: 0 0 0 1px rgba(var(--p2p-card-accent-rgb, 217, 119, 6), 0.08);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-card--highlighted .p2p-offer-card__head {
    padding: 6px 26px;
    margin: 0;
    background: transparent;
    border-bottom: 0;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-card__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: flex-start;
    column-gap: 10px;
    row-gap: 4px;
    min-height: 62px;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-card__seller {
    min-width: 0;
    display: flex;
    align-items: flex-start;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-advertiser {
    align-items: flex-start;
    gap: 9px;
    min-height: 42px;
    margin: 0;
    padding: 14px 0 0 0;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-advertiser__avatar {
    width: 40px;
    height: 40px;
    font-size: var(--front-font-sm);
    color: var(--front-palette-3558c8);
    background: linear-gradient(180deg, var(--front-palette-eef2ff) 0%, var(--front-palette-e4eafb) 100%);
    border-color: var(--front-palette-cfd8f6);
    box-shadow: inset 0 1px 0 rgba(var(--front-color-white-rgb), 0.85);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-advertiser__avatar--img {
    padding: 0;
    background: var(--front-color-white);
    border-color: var(--front-palette-d7ddef);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-advertiser__meta {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1px;
    margin: 0;
    padding: 0;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-advertiser__name {
    font-size: var(--front-font-md);
    font-weight: var(--front-font-bold);
    line-height: 1.2;
    color: var(--front-palette-1f2d5c);
    min-width: 0;
    flex: 0 1 auto;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-advertiser__name-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-advertiser__name-link {
    display: block;
    max-width: 190px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-advertiser__stats {
    margin: 0;
    padding: 0;
    font-size: var(--front-font-size-px-125);
    font-weight: var(--front-font-medium);
    color: var(--front-palette-7280a7);
    gap: 8px;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-seller-badges {
    margin-top: 1px;
    gap: 6px;
    row-gap: 6px;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-seller-badges--inline {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-seller-badge {
    padding: 4px 9px;
    font-size: var(--front-font-size-px-105);
    font-weight: var(--front-font-bold);
    white-space: nowrap;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-card__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px;
    min-height: 62px;
    min-width: 0;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-card__meta-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
    min-height: 30px;
    min-width: 0;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-seller-badge--verified {
    padding: 4px 9px;
    font-size: var(--front-font-size-px-105);
    background: var(--front-palette-eef4ff);
    border-color: var(--front-palette-d7e3ff);
    color: var(--front-palette-2452d1);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-seller-badge--verified i {
    color: var(--front-palette-4caf71);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-available-badge {
    margin-left: 0;
    padding: 6px 12px;
    background: var(--front-palette-f6f7fd);
    border-color: var(--front-palette-e2e6f4);
    color: var(--front-palette-243156);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-card--highlighted .p2p-available-badge {
    background: rgba(var(--front-color-white-rgb), 0.7);
    border-color: rgba(var(--p2p-card-accent-rgb, 217, 119, 6), 0.24);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-available-badge__label {
    color: var(--front-palette-7a85a8);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-available-badge__value {
    font-weight: var(--front-font-extrabold);
    color: var(--front-palette-2d3658);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-card__badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-card__promo-row {
    min-height: 30px;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-chip {
    padding: 6px 12px;
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-bold);
    white-space: nowrap;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-card__promo-row .p2p-seller-badge--compact {
    padding: 6px 12px;
    font-size: var(--front-font-xs);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-chip--promoted {
    background: var(--front-palette-fff3e6);
    border-color: var(--front-palette-f4cfab);
    color: var(--front-palette-de8a0f);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-chip--featured {
    background: var(--front-palette-f5f4ff);
    border-color: var(--front-palette-e0def8);
    color: var(--front-palette-2f396f);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-body {
    padding: 13px 15px;
    gap: 12px;
    border-radius: 14px;
    background: rgba(var(--front-color-white-rgb), 0.78);
    border: 1px solid var(--front-palette-dfe4f3);
    box-shadow: inset 0 1px 0 rgba(var(--front-color-white-rgb), 0.85);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-price-line {
    gap: 6px;
    align-items: center;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-asset-logo,
.p2p-ui .p2p-offers-panel--marketplace .p2p-asset-icon {
    width: 28px;
    height: 28px;
    margin-right: 10px;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-asset-icon {
    font-size: var(--front-font-base);
    background: var(--front-palette-7cbc33);
    color: var(--front-color-white);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-price-base {
    font-size: var(--front-font-size-px-17);
    font-weight: var(--front-font-bold);
    color: var(--front-palette-22305c);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-price-arrow {
    margin: 0 2px;
    font-size: var(--front-font-xl);
    color: var(--front-palette-8c97b7);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-price-number {
    font-size: var(--front-font-size-px-21);
    font-weight: var(--front-font-extrabold);
    color: var(--front-palette-223b90);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-price-fiat {
    font-size: var(--front-font-xl);
    font-weight: var(--front-font-extrabold);
    color: var(--front-palette-223b90);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-card--highlighted .p2p-offer-price-number,
.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-card--highlighted .p2p-offer-price-fiat {
    color: rgba(var(--p2p-card-accent-rgb, 217, 119, 6), 1);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-price-per {
    font-size: var(--front-font-sm);
    font-weight: var(--front-font-semibold);
    color: var(--front-palette-6f7aa1);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-body .p2p-offer-limit {
    margin-top: 8px;
    gap: 8px;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-limit__label,
.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-payment__label {
    font-size: var(--front-font-sm);
    color: var(--front-palette-7782a6);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-limit__value,
.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-payment__value {
    font-size: var(--front-font-base);
    font-weight: var(--front-font-bold);
    color: var(--front-palette-273256);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-payment-row {
    margin-top: 10px;
    padding-top: 12px;
    gap: 10px;
    border-top: 1px solid var(--front-palette-dfe4f2);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-payment-pills {
    gap: 8px;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-payment-pill {
    padding: 6px 12px;
    border-color: var(--front-palette-d9deee);
    background: var(--front-color-white);
    font-size: var(--front-font-size-px-125);
    font-weight: var(--front-font-bold);
    color: var(--front-palette-28345a);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-payment-pill__logo,
.p2p-ui .p2p-offers-panel--marketplace .p2p-payment-pill__fallback {
    width: 16px;
    height: 16px;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-cta {
    gap: 8px;
    min-width: 168px;
    align-items: stretch;
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offer-action-btn {
    min-height: 42px;
    line-height: 42px !important;
    padding: 0 18px !important;
    border-radius: 14px !important;
    font-size: var(--front-font-sm) !important;
    font-weight: var(--front-font-bold);
    box-shadow: 0 12px 24px rgba(var(--front-color-primary-rgb), 0.22);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-operation-time {
    gap: 6px;
    justify-content: flex-end;
    font-size: var(--front-font-xs);
    color: var(--front-palette-6f7aa1);
}

.p2p-ui .p2p-offers-panel--marketplace .p2p-offers-panel__status {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(var(--front-color-white-rgb), 0.78);
    border: 1px solid var(--front-palette-e1e6f4);
    color: var(--front-palette-6b769d);
}

/*===== P2P User: My Trade Ads =====*/
.p2p-ui .p2p-my-ads-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.p2p-ui .p2p-my-ads-subtitle {
    font-size: var(--front-font-sm);
    line-height: 1.6;
    color: var(--front-palette-6f7aa1);
    max-width: 640px;
}

.p2p-ui .p2p-my-ads-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.p2p-ui .p2p-my-ads-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0;
}

.p2p-ui .p2p-summary-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--front-palette-e1e6f4);
    border-radius: 12px;
    background: var(--front-color-white);
    min-width: 0;
}

.p2p-ui .p2p-summary-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: var(--front-font-lg);
    flex-shrink: 0;
}

.p2p-ui .p2p-summary-card__content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.p2p-ui .p2p-summary-card__label {
    display: block;
    font-size: var(--front-font-xs);
    line-height: 1.3;
    color: var(--front-palette-6f7aa1);
    margin-bottom: 1px;
}

.p2p-ui .p2p-summary-card__value {
    display: block;
    font-size: var(--front-font-xl);
    font-weight: var(--front-font-semibold);
    line-height: 1.2;
    color: var(--front-palette-1e2749);
}

.p2p-ui .p2p-summary-card--primary .p2p-summary-card__icon {
    background: var(--front-palette-eef2ff);
    color: var(--front-palette-4566e5);
}

.p2p-ui .p2p-summary-card--success .p2p-summary-card__icon {
    background: var(--front-palette-e9f9ef);
    color: var(--front-palette-23a55a);
}

.p2p-ui .p2p-summary-card--warning .p2p-summary-card__icon {
    background: var(--front-palette-fff4df);
    color: var(--front-palette-e59b19);
}

.p2p-ui .p2p-summary-card--info .p2p-summary-card__icon {
    background: var(--front-palette-eaf5ff);
    color: var(--front-palette-2190e5);
}

.p2p-ui .p2p-summary-card--success-soft .p2p-summary-card__icon {
    background: var(--front-palette-edf8ff);
    color: var(--front-palette-1f8f7a);
}

.p2p-ui .p2p-summary-card--danger .p2p-summary-card__icon {
    background: var(--front-palette-fff0f1);
    color: var(--front-palette-e15063);
}

.p2p-ui .p2p-offers-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.p2p-ui .p2p-offers-panel__title {
    margin: 0;
    font-size: var(--front-font-md);
    font-weight: var(--front-font-semibold);
    color: var(--front-palette-1e2749);
}

.p2p-ui .p2p-offers-panel__toolbar,
.p2p-ui .p2p-my-ads-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.p2p-ui .p2p-my-ads-toolbar .p2p-filter-field {
    flex: 1 1 140px;
    min-width: 120px;
}

.p2p-ui .p2p-my-ads-toolbar .p2p-filter-field--search {
    flex: 1 1 200px;
    min-width: 180px;
}

.p2p-ui .p2p-my-ads-toolbar .p2p-search-solid {
    border-radius: 10px !important;
    border: 0 !important;
    background: var(--p2p-buy) !important;
    color: var(--front-color-white) !important;
    font-weight: var(--front-font-semibold);
    padding: 0 18px;
    height: 40px;
    line-height: 40px;
    min-width: 100px;
}

.p2p-ui .p2p-my-ads-toolbar .p2p-search-solid:hover {
    background: var(--front-palette-1e8449) !important;
}

.p2p-ui .p2p-my-ads-toolbar__view-toggle {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.p2p-ui .p2p-my-ads-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.p2p-ui .p2p-my-ad-card {
    position: relative;
    border: 1px solid var(--front-palette-e1e6f3);
    border-radius: 12px;
    background: var(--front-color-white);
    overflow: hidden;
}

.p2p-ui .p2p-my-ad-card__accent {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--front-palette-8fb2ff) 0%, var(--front-palette-4e72f5) 100%);
}

.p2p-ui .p2p-my-ad-card__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px 14px 20px;
}

.p2p-ui .p2p-my-ad-card__main {
    min-width: 0;
    flex: 1 1 auto;
}

.p2p-ui .p2p-my-ad-card__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.p2p-ui .p2p-my-ad-card__title {
    margin: 0;
    font-size: var(--front-font-md);
    font-weight: var(--front-font-semibold);
    color: var(--front-palette-22305b);
}

.p2p-ui .p2p-my-ad-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.p2p-ui .p2p-my-ad-card__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 10px;
}

.p2p-ui .p2p-my-ad-card__metric {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.p2p-ui .p2p-my-ad-card__metric-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--front-palette-eef2ff);
    color: var(--front-palette-4b6ae8);
    flex-shrink: 0;
    font-size: var(--front-font-size-px-9);
    margin-top: 1px;
}

.p2p-ui .p2p-my-ad-card__metric-label,
.p2p-ui .p2p-my-ad-card__metric-value {
    display: block;
}

.p2p-ui .p2p-my-ad-card__metric-label {
    margin-bottom: 1px;
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-semibold);
    color: var(--front-palette-64739c);
}

.p2p-ui .p2p-my-ad-card__metric-value {
    font-size: var(--front-font-base);
    font-weight: var(--front-font-semibold);
    color: var(--front-palette-23315b);
    line-height: 1.3;
}

.p2p-ui .p2p-my-ad-card__meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--front-palette-edf1fb);
    font-size: var(--front-font-xs);
    color: var(--front-palette-60709a);
    line-height: 1.5;
}

.p2p-ui .p2p-my-ad-card__meta-line i {
    margin-right: 4px;
    font-size: var(--front-font-xs);
}

.p2p-ui .p2p-my-ad-card__cta {
    flex: 0 0 auto;
}

.p2p-ui .p2p-my-ad-card__manage-btn {
    min-width: 130px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: var(--front-font-sm);
}

.p2p-ui .p2p-my-ad-card__manage-icon {
    font-size: var(--front-font-xs);
}

.p2p-ui .p2p-my-ad-card__foot {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 14px;
    font-size: var(--front-font-sm);
    line-height: 1.65;
    border-top: 1px solid var(--front-palette-edf1fb);
}

.p2p-ui .p2p-my-ad-card__foot--warning {
    background: var(--front-palette-fff7e8);
    border: 1px solid var(--front-palette-f3d9a4);
    color: var(--front-palette-8f5e00);
}

.p2p-ui .p2p-my-ads-empty {
    padding: 36px 20px;
}

.p2p-ui .p2p-my-ads-empty__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--front-palette-eef3ff) 0%, var(--front-palette-e5ecff) 100%);
    color: var(--front-palette-4d67df);
    font-size: var(--front-font-3xl);
}

/*===== P2P User: Trade Ad Details =====*/
.p2p-ui .p2p-ad-details-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.p2p-ui .p2p-ad-details-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.p2p-ui .p2p-ad-details-badges,
.p2p-ui .p2p-ad-details-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.p2p-ui .p2p-ad-details-subtitle {
    font-size: var(--front-font-sm);
    line-height: 1.65;
    color: var(--front-palette-67759d);
    max-width: 760px;
}

.p2p-ui .p2p-ad-details-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.p2p-ui .p2p-ad-summary-card {
    padding: 14px 15px;
    border: 1px solid var(--front-palette-e2e7f4);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--front-color-white) 0%, var(--front-palette-f8faff) 100%);
    min-width: 0;
}

.p2p-ui .p2p-ad-summary-card__label {
    display: block;
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-bold);
    color: var(--front-palette-7c87a7);
    margin-bottom: 8px;
}

.p2p-ui .p2p-ad-summary-card__value {
    display: block;
    font-size: var(--front-font-xl);
    line-height: 1.35;
    color: var(--front-palette-23315c);
    word-break: break-word;
}

.p2p-ui .p2p-ad-summary-card__hint {
    display: block;
    margin-top: 5px;
    font-size: var(--front-font-xs);
    color: var(--front-palette-6f7ba0);
}

.p2p-ui .p2p-ad-inline-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 15px;
    border-radius: 16px;
    margin-bottom: 18px;
    font-size: var(--front-font-sm);
    line-height: 1.65;
}

.p2p-ui .p2p-ad-inline-alert--warning {
    background: var(--front-palette-fff7e9);
    border: 1px solid var(--front-palette-f1daad);
    color: var(--front-palette-8a5c00);
}

.p2p-ui .p2p-ad-panel {
    border: 1px solid var(--front-palette-e3e8f4);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(var(--front-rgb-42-64-138), 0.04);
}

.p2p-ui .p2p-ad-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.p2p-ui .p2p-ad-info-item {
    padding: 13px 14px;
    border: 1px solid var(--front-palette-e7ebf6);
    border-radius: 14px;
    background: var(--front-palette-fbfcff);
}

.p2p-ui .p2p-ad-info-item__label {
    display: block;
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-bold);
    color: var(--front-palette-7a86a8);
    margin-bottom: 7px;
}

.p2p-ui .p2p-ad-info-item__value {
    display: block;
    font-size: var(--front-font-md);
    color: var(--front-palette-24325b);
}

.p2p-ui .p2p-ad-section-block + .p2p-ad-section-block {
    margin-top: 18px;
}

.p2p-ui .p2p-ad-section-block__label {
    display: block;
    font-size: var(--front-font-xs);
    font-weight: var(--front-font-bold);
    color: var(--front-palette-7b86a7);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.p2p-ui .p2p-ad-payment-list,
.p2p-ui .p2p-ad-health-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.p2p-ui .p2p-ad-payment-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 13px;
    border: 1px solid var(--front-palette-e6ebf7);
    border-radius: 14px;
    background: var(--front-palette-fafcff);
}

.p2p-ui .p2p-ad-payment-item img,
.p2p-ui .p2p-ad-payment-item__fallback {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.p2p-ui .p2p-ad-payment-item__fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--front-palette-e9efff);
    color: var(--front-palette-4363dd);
    font-size: var(--front-font-sm);
    font-weight: var(--front-font-bold);
}

.p2p-ui .p2p-ad-payment-item strong,
.p2p-ui .p2p-ad-payment-item span,
.p2p-ui .p2p-ad-status-box strong,
.p2p-ui .p2p-ad-status-box span {
    display: block;
}

.p2p-ui .p2p-ad-payment-item span {
    margin-top: 3px;
    font-size: var(--front-font-xs);
    color: var(--front-palette-6e7a9d);
    line-height: 1.55;
}

.p2p-ui .p2p-ad-terms-box,
.p2p-ui .p2p-ad-status-box {
    padding: 14px 15px;
    border: 1px solid var(--front-palette-e4e8f5);
    border-radius: 14px;
    background: var(--front-palette-f8faff);
}

.p2p-ui .p2p-ad-terms-box {
    font-size: var(--front-font-sm);
    line-height: 1.75;
    color: var(--front-palette-4f5d86);
    white-space: pre-line;
}

.p2p-ui .p2p-ad-status-box {
    padding: 13px 14px;
}

.p2p-ui .p2p-ad-status-box span {
    margin-top: 4px;
    font-size: var(--front-font-xs);
    color: var(--front-palette-6e7a9d);
    line-height: 1.6;
}

.p2p-ui .p2p-ad-health-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid var(--front-palette-e7ebf6);
    border-radius: 12px;
    background: var(--front-color-white);
    font-size: var(--front-font-sm);
}

.p2p-ui .p2p-ad-health-item span {
    color: var(--front-palette-6b789f);
}

.p2p-ui .p2p-ad-health-item strong {
    color: var(--front-palette-24315c);
}

.p2p-ui .p2p-ad-review-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--front-palette-edf1fa);
}

.p2p-ui .p2p-ad-review-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.p2p-ui .p2p-ad-review-item:first-child {
    padding-top: 0;
}

.p2p-ui .p2p-ad-review-item__comment {
    margin-top: 5px;
    font-size: var(--front-font-sm);
    line-height: 1.65;
    color: var(--front-palette-54628a);
}

.p2p-ui .p2p-ad-empty {
    padding: 13px 14px;
    border: 1px dashed var(--front-palette-dbe3f3);
    border-radius: 14px;
    background: var(--front-palette-fafcff);
    font-size: var(--front-font-sm);
    line-height: 1.65;
    color: var(--front-palette-6e7a9d);
}

.withdraw-account-field-state {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--front-color-border);
    border-radius: 8px;
    background: var(--front-color-surface);
    color: var(--front-color-muted);
    font-size: var(--front-font-sm);
    font-weight: var(--front-font-semibold);
}

.withdraw-account-field-state.is-error {
    border-color: rgba(var(--front-color-danger-rgb), 0.28);
    background: rgba(var(--front-color-danger-rgb), 0.08);
    color: var(--front-color-danger);
}

.withdraw-account-field-state.is-loading {
    border-color: rgba(var(--front-color-primary-rgb), 0.22);
    background: rgba(var(--front-color-primary-rgb), 0.08);
    color: var(--front-color-primary);
}

/* ============================================================
   Payment Links — Index Card
   Mobile-first vertical stack. Same row order at every breakpoint;
   only spacing + footer arrangement (stats vs actions) shifts on
   wider viewports. Avoids collapsing grid columns.
   ============================================================ */
.payment-link-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 1200px) {
    .payment-link-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

.payment-link-card {
    position: relative;
    background: var(--front-color-card);
    border: 1px solid var(--front-color-border-soft);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(var(--front-color-black-rgb), 0.03);
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
}

.payment-link-card:hover {
    border-color: rgba(var(--front-color-primary-rgb), 0.22);
    box-shadow: 0 4px 14px -8px rgba(var(--front-color-primary-rgb), 0.22);
}

/* Header row: identity (left) + status badge (right) */
.payment-link-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.payment-link-card__identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
}

.payment-link-card__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(var(--front-color-primary-rgb), 0.13), rgba(var(--front-color-primary-rgb), 0.04));
    color: var(--front-color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.payment-link-card__copy {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.payment-link-card__title {
    margin: 0;
    font-size: var(--front-font-md);
    font-weight: var(--front-font-bold);
    color: var(--front-color-heading);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-link-card__meta-line {
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--front-color-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: var(--front-font-semibold);
}

.payment-link-card__currency {
    color: var(--front-color-primary);
    background: rgba(var(--front-color-primary-rgb), 0.10);
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.payment-link-card__separator {
    opacity: 0.5;
}

.payment-link-card__status {
    flex-shrink: 0;
}

.payment-link-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: var(--front-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

.payment-link-card__badge-dot {
    font-size: 6px;
    line-height: 1;
}

/* URL row */
.payment-link-card__url-row {
    min-width: 0;
}

.payment-link-card .payment-link-url-group {
    border-radius: 10px;
    overflow: hidden;
    background: var(--front-color-surface);
    border: 1px solid var(--front-color-border-soft);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.payment-link-card .payment-link-url-group:focus-within {
    border-color: rgba(var(--front-color-primary-rgb), 0.45);
    box-shadow: 0 0 0 3px rgba(var(--front-color-primary-rgb), 0.10);
}

.payment-link-card .payment-link-url-prefix {
    background: transparent;
    border: 0;
    color: var(--front-color-muted);
    padding-left: 10px;
    padding-right: 4px;
    font-size: 11px;
}

.payment-link-card .payment-link-url-input {
    border: 0;
    background: transparent;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    color: var(--front-color-text);
    padding-left: 4px;
    padding-top: 3px;
    padding-bottom: 3px;
    min-width: 0;
    height: 30px;
}

.payment-link-card .payment-link-url-input:focus {
    box-shadow: none;
    background: transparent;
}

.payment-link-card .payment-link-copy-btn {
    border-left: 1px solid var(--front-color-border-soft);
    font-weight: var(--front-font-semibold);
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    border-radius: 0;
    flex-shrink: 0;
    padding: 0 12px;
    font-size: 12px;
    height: 30px;
    line-height: 1;
}

.payment-link-card .payment-link-copy-btn.is-copied {
    color: var(--front-color-white) !important;
    background-color: var(--front-color-success) !important;
    border-color: var(--front-color-success) !important;
}

/* Footer (stats + actions container) */
.payment-link-card__footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Stats row */
.payment-link-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    padding: 0;
    background: transparent;
    align-items: center;
}

.payment-link-card__stat {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.payment-link-card__stat-label {
    font-size: 10px;
    color: var(--front-color-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: var(--front-font-semibold);
}

.payment-link-card__stat-label::after {
    content: ":";
    margin-left: 1px;
}

.payment-link-card__stat-value {
    font-size: 12px;
    color: var(--front-color-heading);
    font-weight: var(--front-font-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Actions row — 2 columns on phones, 4 columns on tablet+ */
.payment-link-card__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

@media (min-width: 576px) {
    .payment-link-card__actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.payment-link-card__actions .payment-link-action-form {
    margin: 0;
    display: contents;
}

.payment-link-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    font-weight: var(--front-font-semibold);
    border-radius: 8px;
    padding: 0 10px;
    line-height: 1;
    font-size: 12px;
    height: 30px;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
}

.payment-link-action > i {
    font-size: 11px;
    line-height: 1;
}

.payment-link-action__label {
    font-size: 12px;
    line-height: 1;
}

/* --- Tonal (soft) button variants — premium fintech style --- */
.payment-link-action.btn-outline-primary {
    background: rgba(var(--front-color-primary-rgb), 0.14);
    color: var(--front-color-primary);
    border-color: transparent;
}
.payment-link-action.btn-outline-primary:hover,
.payment-link-action.btn-outline-primary:focus {
    background: rgba(var(--front-color-primary-rgb), 0.22);
    color: var(--front-color-primary);
    border-color: transparent;
    box-shadow: none;
}

/* Edit (primary action) — softer than the others, no gradient/shadow */
.payment-link-action.btn-primary {
    background: rgba(var(--front-color-primary-rgb), 0.85);
    color: var(--front-color-white);
    border-color: transparent;
    box-shadow: none;
}
.payment-link-action.btn-primary:hover,
.payment-link-action.btn-primary:focus {
    background: var(--front-color-primary);
    color: var(--front-color-white);
    box-shadow: none;
}

.payment-link-action.btn-outline-warning {
    background: rgba(var(--front-color-warning-rgb), 0.14);
    color: var(--front-color-warning);
    border-color: transparent;
}
.payment-link-action.btn-outline-warning:hover,
.payment-link-action.btn-outline-warning:focus {
    background: rgba(var(--front-color-warning-rgb), 0.22);
    color: var(--front-color-warning);
    border-color: transparent;
    box-shadow: none;
}

.payment-link-action.btn-outline-success {
    background: rgba(var(--front-color-success-rgb), 0.14);
    color: var(--front-color-success);
    border-color: transparent;
}
.payment-link-action.btn-outline-success:hover,
.payment-link-action.btn-outline-success:focus {
    background: rgba(var(--front-color-success-rgb), 0.22);
    color: var(--front-color-success);
    border-color: transparent;
    box-shadow: none;
}

.payment-link-action.btn-outline-danger {
    background: rgba(var(--front-color-danger-rgb), 0.12);
    color: var(--front-color-danger);
    border-color: transparent;
}
.payment-link-action.btn-outline-danger:hover,
.payment-link-action.btn-outline-danger:focus {
    background: rgba(var(--front-color-danger-rgb), 0.20);
    color: var(--front-color-danger);
    border-color: transparent;
    box-shadow: none;
}

.payment-link-action:active {
    transform: translateY(0.5px);
}

/* Empty state */
.payment-link-empty {
    --payment-link-empty-primary: var(--main-color, var(--front-color-primary));
    --payment-link-empty-primary-rgb: var(--front-color-primary-rgb, 70, 99, 238);
    --payment-link-empty-accent: var(--main-color-2, var(--front-color-accent, #17a86a));
    --payment-link-empty-accent-rgb: var(--front-color-accent-rgb, 23, 168, 106);
    position: relative;
    overflow: hidden;
    min-height: 320px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
    align-items: center;
    gap: 26px;
    padding: 34px;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.14);
    border-radius: 18px;
    background:
        radial-gradient(circle at 12% 10%, rgba(var(--front-color-primary-rgb), 0.10), transparent 30%),
        radial-gradient(circle at 92% 0%, rgba(34, 189, 255, 0.14), transparent 32%),
        linear-gradient(180deg, var(--front-palette-fbfcff) 0%, var(--front-color-white) 100%);
}

.payment-link-empty--solo {
    grid-template-columns: minmax(0, 1fr);
}

.payment-link-empty--solo .payment-link-empty__content {
    max-width: 560px;
}

.payment-link-list > .user-not-found {
    grid-column: 1 / -1;
    width: min(100%, 820px);
    margin: 24px auto;
}

.payment-link-empty::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px dashed rgba(var(--front-color-primary-rgb), 0.14);
    border-radius: 14px;
    pointer-events: none;
}

.payment-link-empty__content,
.payment-link-empty__preview {
    position: relative;
    z-index: 1;
}

.payment-link-empty__content {
    max-width: 460px;
    margin-inline: auto;
    text-align: center;
}

.payment-link-empty__visual {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
}

.payment-link-empty__orb {
    position: absolute;
    border-radius: 999px;
    background: rgba(var(--front-color-primary-rgb), 0.12);
}

.payment-link-empty__orb--one {
    inset: 0;
}

.payment-link-empty__orb--two {
    width: 58px;
    height: 58px;
    inset-inline-end: -10px;
    inset-block-start: 10px;
    background: rgba(34, 189, 255, 0.14);
}

.payment-link-empty__icon {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: var(--front-color-white);
    color: var(--front-color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    box-shadow: 0 12px 26px rgba(var(--front-color-primary-rgb), 0.14);
}

.payment-link-empty__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(var(--front-color-primary-rgb), 0.09);
    color: var(--front-color-primary);
    font-size: var(--front-font-size-rem-078);
    font-weight: var(--front-font-bold);
    line-height: 1;
}

.payment-link-empty__title {
    color: var(--front-color-heading);
    font-size: var(--front-font-size-rem-125);
    font-weight: var(--front-font-extrabold);
    line-height: 1.25;
    margin: 0 0 7px;
    letter-spacing: 0;
}

.payment-link-empty__hint {
    color: var(--front-color-muted);
    font-size: 0.875rem;
    line-height: 1.6;
    max-width: 390px;
    margin: 0 auto 20px;
}

.payment-link-empty__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.payment-link-empty__primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background: var(--payment-link-empty-primary);
    color: var(--front-color-white);
    font-size: var(--front-font-sm);
    font-weight: var(--front-font-bold);
    line-height: 1;
    box-shadow: 0 10px 20px rgba(var(--payment-link-empty-primary-rgb), 0.18);
}

.payment-link-empty__primary:hover,
.payment-link-empty__primary:focus {
    background: var(--front-color-primary-hover, var(--payment-link-empty-primary));
    color: var(--front-color-white);
    box-shadow: 0 12px 22px rgba(var(--payment-link-empty-primary-rgb), 0.22);
}

.payment-link-empty__secure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--front-palette-5b6577);
    font-size: var(--front-font-size-rem-082);
    font-weight: var(--front-font-semibold);
}

.payment-link-empty__secure i {
    color: var(--front-color-accent);
}

.payment-link-empty__preview {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    max-width: 320px;
    width: 100%;
    margin-inline: auto;
    padding: 20px;
    border: 1px solid rgba(var(--front-color-primary-rgb), 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 18px 48px rgba(var(--front-rgb-17-24-39), 0.08);
}

.payment-link-empty__preview-top {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}

.payment-link-empty__preview-top span {
    height: 8px;
    border-radius: 999px;
    background: rgba(var(--front-color-primary-rgb), 0.18);
}

.payment-link-empty__preview-top span:first-child {
    width: 56px;
}

.payment-link-empty__preview-top span:last-child {
    width: 92px;
}

.payment-link-empty__preview-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(var(--front-rgb-136-146-166), 0.12);
    border-radius: 14px;
    background: var(--front-color-white);
}

.payment-link-empty__preview-row i {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--front-color-primary);
    background: rgba(var(--front-color-primary-rgb), 0.09);
}

.payment-link-empty__preview-row strong,
.payment-link-empty__preview-row small {
    display: block;
}

.payment-link-empty__preview-row strong {
    color: var(--front-color-heading);
    font-size: var(--front-font-size-rem-085);
    font-weight: var(--front-font-bold);
}

.payment-link-empty__preview-row small {
    color: var(--front-color-muted);
    font-size: var(--front-font-size-rem-074);
}

.payment-link-empty__preview-url {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--front-color-primary);
    background: rgba(var(--front-color-primary-rgb), 0.08);
    font-family: var(--front-font-mono);
    font-size: var(--front-font-size-rem-078);
    font-weight: var(--front-font-medium);
}

@media (max-width: 991.98px) {
    .payment-link-empty {
        grid-template-columns: 1fr;
        padding: 28px 22px;
    }

    .payment-link-empty__preview {
        max-width: 420px;
    }
}

@media (max-width: 575.98px) {
    .payment-link-empty {
        min-height: auto;
        padding: 24px 14px;
        border-radius: 16px;
    }

    .payment-link-empty::before {
        inset: 9px;
        border-radius: 12px;
    }

    .payment-link-empty__visual {
        width: 92px;
        height: 92px;
    }

    .payment-link-empty__icon {
        width: 62px;
        height: 62px;
        border-radius: 18px;
        font-size: 24px;
    }

    .payment-link-empty__title {
        font-size: 1.12rem;
    }

    .payment-link-empty__hint {
        font-size: var(--front-font-size-rem-084);
    }

    .payment-link-empty__primary {
        width: 100%;
        justify-content: center;
    }

    .payment-link-empty__preview {
        padding: 14px;
    }
}

/* ============================================================
   Tablet (>= 576px) — a touch more breathing room
   ============================================================ */
@media (min-width: 576px) {
    .payment-link-card {
        padding: 14px 16px;
    }

    .payment-link-card__icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

/* ============================================================
   Wide content (>= 1600px) — within a 2-col grid, each card has
   enough horizontal room to put stats and actions side-by-side.
   Below this each card stays vertically stacked.
   ============================================================ */
@media (min-width: 1600px) {
    .payment-link-card__footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
    }

    .payment-link-card__stats {
        flex: 0 1 auto;
        gap: 14px;
    }

    .payment-link-card__actions {
        grid-template-columns: repeat(4, auto);
        gap: 6px;
        flex: 0 1 auto;
    }

    .payment-link-action {
        padding: 0 11px;
        height: 30px;
    }
}

/* ============================================================
   Very narrow phones (< 380px) — drop labels, icons only
   ============================================================ */
@media (max-width: 380px) {
    .payment-link-action__label {
        display: none;
    }

    .payment-link-action {
        padding: 0 6px;
        gap: 0;
    }
}