body {
    background-color: #000000;
    color: #E0E0E0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    background-image: radial-gradient(circle at 0.1px 0.1px, rgb(255 255 255) 0.4px, transparent 0);
    background-size: 20px 20px;
}

.App {
    width: 100%;
    min-height: 100vh;
}

.hero {
    background: none; /* Remove any previous gradients */
    padding: 2rem 0;
}
ul.nav__menu {
    list-style: none;
    display: flex;
    align-items: center;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

h3.tlt {
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 1rem;
}
.nav__wallet {
    align-content: center;
}
.nav__toggle {
    position: absolute;
}

/* --- Header & Navigation --- */
.header {
    background: rgb(52 52 52 / 9%);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 30px rgb(0 0 0 / 19%);
    border-bottom: 1px solid #1a1a1a;
}

.nav {
    padding: 0rem 1.5rem;
    margin: 0 auto;
    display: flex;
    width: 100%;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

.nav__menu li a {
    color: #a0a0a0;
    text-decoration: none;
    padding: 0.5rem 1rem;
    font-weight: 200;
    transition: color 0.2s;
}

.nav__menu li a:hover {
    color: #ffffff;
}

.nav__menu li a.active {
    color: #ffffff;
    font-weight: 300;
}

/* Wallet Connect Buttons (Keep them dark) */
.wallet-connect__chain,
.wallet-connect__account {
    background-color: #1a1a1a;
    border: 1px solid #333;
    color: #E0E0E0;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
}

.wallet-connect__chain {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.wallet-connect__account {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.wallet-connect__chain:hover,
.wallet-connect__account:hover {
    background-color: #252525;
}
span.wallet-connect__balance {
    /* font-weight: 100; */
    font-size: 11px;
}

/* --- Stat Cards (New "Ghost" Style) --- */
.hero__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.wallet-connect__connected {
    display: flex;
    align-items: stretch; /* This is the key property */
}

button.wallet-connect__account span {
    display: block;
}

.stat-card {
    background: rgb(52 52 52 / 9%);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 30px rgb(0 0 0 / 19%);
    border: 1px solid #1a1a1a;
    border-radius: 12px;
    padding: 1.5rem;
    z-index: -1;
}

/* --- Keep these styles for the text inside --- */
.stat-card__label {
    color: #a0a0a0;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.stat-card__value {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 500;
}

/* --- Progress Bar (Monochrome) --- */
.progress-label {
    color: #E0E0E0;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.progress-container {
    background-color: #2a2a2a; /* Dark track */
    border-radius: 99px;
    height: 10px;
    overflow: hidden;
    border: none;
}

.progress-fill {
    background-color: #ffffff; /* White fill */
    height: 100%;
    border-radius: 99px;
}

/* --- Main Purchase Card (New "Ghost" Style) --- */
.purchase-widget {
    padding: 2rem;
    margin-top: 2rem;
    box-shadow: none;
    background: rgb(52 52 52 / 9%);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 30px rgb(0 0 0 / 19%);
    border: 1px solid #1a1a1a;
    border-radius: 12px;
    position: relative;
}

.wallet-info {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #2a2a2a;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.wallet-info__label {
    color: #a0a0a0;
}

.wallet-info__value {
    color: #ffffff;
    font-weight: 500;
}

/* --- Payment Method Buttons (Monochrome) --- */
.payment-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.payment-btn,
.custom-dropdown .dropdown-selected {
    background-color: transparent; /* Ghost button */
    border: 1px solid #333;
    color: #E0E0E0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    transition: all 0.2s;
}

.payment-btn:hover,
.custom-dropdown .dropdown-selected:hover {
    background-color: #1a1a1a;
    border-color: #444;
}

/* Active button style (White w/ Black Text) */
.payment-btn.payment-btn--active,
.custom-dropdown.payment-btn--active .dropdown-selected {
    border-color: #ffffff;
    color: #000000;
    background-color: #ffffff;
    box-shadow: none; /* Remove old green shadow */
}

.currency-dropdown-wrapper .custom-dropdown .dropdown-selected {
    width: 100%;
}
.custom-dropdown {
    width: auto;
}

/* --- Inputs & Main Button (Monochrome) --- */
.amount-input {
    background-color: #1010106b;
    border: 0.5px solid #343333;
    color: #ffffff;
    padding: 1rem;
    border-radius: 8px;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
    font-weight: 100;
}

.amount-input::placeholder {
    color: #777;
}

.amount-input:focus {
    outline: none;
    border-color: #ffffff; /* White focus */
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2); /* White focus ring */
}

/* Token input group */
.token-input .input-group {
    display: flex;
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden; 
    background-color: #101010;
}

.token-input .input-group .amount-input-container {
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.token-input .input-group .amount-input {
    border: none;
    border-radius: 0;
}

.token-input .input-group .max-button {
    background: transparent;
    border: none;
    color: #ffffff; /* White MAX button */
    font-weight: bold;
    cursor: pointer;
    padding: 0 1rem;
}
.token-input .input-group .max-button:hover {
    color: #bbbbbb;
}

.token-input .input-group .ethright {
    background-color: #2a2a2a;
    color: #E0E0E0;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    border-left: 1px solid #333;
}

.token-output {
    background-color: #1a1a1a; /* Darker than the border-only cards */
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    font-size: 1.1rem;
    font-weight: 500;
    margin-top: 1rem;
    color: #fff;
}

/* The main "Buy Now" button (White w/ Black Text) */
.btn.btn--primary {
    background-color: #ffffff;
    color: #000000;
    border: none;
    border-radius: 8px;
    padding: 1rem;
    width: 100%;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 1.5rem;
    transition: opacity 0.2s;
}

.btn.btn--primary:hover {
    opacity: 0.85; /* Fade slightly on hover */
}

/* --- 1. Fix the Main Button Layout --- */

.payment-methods {
    display: grid;
    /* Create a responsive grid that fits as many 130px items as it can */
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.75rem; /* Space between buttons */
    margin-bottom: 1.5rem;
}

/* --- 2. Style All Buttons & Dropdowns Uniformly --- */

/* This targets both <button class="payment-btn"> and 
   the visible part of the dropdown <div class="dropdown-selected"> */
.payment-btn,
.custom-dropdown .dropdown-selected {
    background-color: transparent;
    border: 1px solid #333;
    color: #E0E0E0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    transition: all 0.2s;
    width: 100%; /* Make all items fill their grid cell */
    box-sizing: border-box; /* Include padding in the width */
    font-size: 0.9rem;
}

/* Ensure icons are properly sized and spaced */
.payment-btn .chain-icon,
.custom-dropdown .chain-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    object-fit: contain; /* Prevents images from stretching */
}

/* Style the dropdown arrow */
.custom-dropdown .dropdown-arrow {
    margin-left: auto; /* Pushes the arrow to the far right */
    font-size: 0.7rem;
}

/* --- 3. Style the Active State (White Button) --- */

.payment-btn.payment-btn--active,
.custom-dropdown.payment-btn--active .dropdown-selected {
    border-color: #ffffff;
    color: #000000;
    background-color: #ffffff;
    box-shadow: none;
}

/* --- 4. Style the Dropdown Menu (The Clickable List) --- */

/* This wrapper is needed for positioning */
.currency-dropdown-wrapper {
    position: relative; /* Establishes a positioning context */
}

/* This is the dropdown list that appears.
   (Assuming it's a <ul> or <div> that appears when active)
   You may need to add a class like "dropdown-menu" to it.
   For this example, I'll assume it's a <div> inside .custom-dropdown */
.custom-dropdown .dropdown-menu {
    display: none; /* Hide by default */
    position: absolute;
    top: 100%; /* Position right below the button */
    left: 0;
    width: 100%;
    background: #1a1a1a; /* Dark background */
    border: 1px solid #333;
    border-radius: 8px;
    margin-top: 0.25rem; /* Small space from the button */
    padding: 0.5rem;
    box-sizing: border-box;
    z-index: 10;
}

/* Show the menu when the parent has an "active" class */
/* You will need JavaScript to add this "active" class on click */
.custom-dropdown.active .dropdown-menu {
    display: block;
}

/* Style the items inside the dropdown list */
.dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: 6px;
    color: #E0E0E0;
    cursor: pointer;
    font-size: 0.9rem;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #2a2a2a;
}

.dropdown-menu .dropdown-item .chain-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    object-fit: contain;
}

/* --- 1. The Main Dropdown Container --- */
.dropdown-options {
    position: absolute;
    left: 0;
    width: 100%;
    
    /* Dark theme styling */
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 0.5rem;
    box-sizing: border-box; /* Ensures padding doesn't break the width */
    z-index: 10;
}

/* --- 2. Positioning for the ".above" class --- */
/* This places the menu *above* its parent button */
.dropdown-options.above {
    bottom: 100%; /* Position it at the top edge of the parent */
    margin-bottom: 0.25rem; /* Add a small gap */
}

/* --- 3. The "Show" Rule --- */
/* When the parent wrapper has an "active" class, show the menu.
   (This "active" class is added by the JavaScript from my previous answer) */
.custom-dropdown.active .dropdown-options {
    display: block;
}

/* --- 4. The Individual Clickable Options --- */
.dropdown-option {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: 6px;
    color: #E0E0E0;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.2s;
}

/* --- 5. Hover Effect for Options --- */
.dropdown-option:hover {
    background-color: #2a2a2a;
}

/* --- 6. Icon Styling --- */
.option-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    object-fit: contain; /* Prevents icons from stretching */
}

/* --- Dashboard Section --- */
.dashboard {
    padding: 2rem 0;
}

/* --- Dashboard Layout Grid --- */
.dashboard-content {
    display: grid;
    /* Creates a 2-column grid */
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem; /* Space between all cards */
}

/* Make the hero content (stats + progress) span the full width */
.dashboard-content .hero__content {
    grid-column: 1 / -1; /* Spans both columns */
}

/* Make the transaction history span the full width */
.dashboard-content .transaction-history {
    grid-column: 1 / -1; /* Spans both columns */
}

/* --- New "Ghost" Card Styles --- */

/* Base style for the new cards */
.wallet-info-card,
.balance-card,
.transaction-history {
    background: rgb(52 52 52 / 9%);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 30px rgb(0 0 0 / 19%);
    border: 1px solid #1a1a1a;
    border-radius: 12px;
    padding: 2rem;
    box-sizing: border-box;
    z-index: -1;
}

.wallet-info-card h3,
.balance-card h3,
.transaction-history h3 {
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
}

/* --- Wallet Info Card --- */
.wallet-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
}

.wallet-address {
    color: #E0E0E0;
    font-weight: 500;
}

.native-balance {
    color: #a0a0a0;
    font-size: 0.9rem;
}

/* --- Balance Card --- */
.balance-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid #2a2a2a;
    padding-bottom: 1rem;
}

.balance-header h3 {
    margin: 0;
}

.current-price {
    color: #a0a0a0;
    font-size: 0.9rem;
}

.balance-content {
    padding-top: 1.5rem;
}

.token-amount {
    display: flex;
    align-items: baseline;
    margin-bottom: 0.5rem;
}

.token-amount .amount {
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 600;
    margin-right: 0.5rem;
}

.token-amount .token-symbol {
    color: #a0a0a0;
}

.usd-value .value-label {
    color: #a0a0a0;
    margin-right: 0.5rem;
}

.usd-value .value-amount {
    color: #ffffff;
    font-weight: 500;
}

/* --- Transaction History Card --- */
.transaction-history h3 {
    border-bottom: 1px solid #2a2a2a;
    padding-bottom: 1rem;
}

.no-transactions {
    text-align: center;
    padding: 2rem 0;
}

.no-transactions p {
    color: #a0a0a0;
    margin: 0.5rem 0;
    line-height: 1.6;
}

.no-transactions p:first-child {
    color: #e0e0e0;
    font-size: 1.1rem;
}

/* --- Responsiveness for Mobile --- */
@media (max-width: 768px) {
    .dashboard-content {
        /* Stack all cards in one column on small screens */
        grid-template-columns: 1fr;
    }
}

button.wallet-connect__button.wallet-connect__button--connect {
    background: #02c20d26;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 10px #02c20d4d;
    border: 0px solid rgb(20 220 72 / 21%);
    border-radius: 12px;
    padding: 0.8rem;
    color: #02c20d;
    text-transform: uppercase;
}


button.wallet-connect__button.wallet-connect__button--connect:hover {
    background: #ffffff;
    color: black;
    transition: all 0.5s;
}

/* --- Base Notification Container --- */
.notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 320px; /* Adjust width as needed */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    z-index: 1000;

    /* Animation: Slide in from the bottom */
    transform: translateY(150%);
    transition: transform 0.4s cubic-bezier(0.21, 1.02, 0.73, 1);
}

/* --- Show State (Slides the toaster into view) --- */
.notification.show {
    transform: translateY(0);
}

/* --- Content Wrapper --- */
.notification__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
}

/* --- Message Text --- */
.notification__message {
    font-size: 0.9rem;
    font-weight: 500;
    margin-right: 1rem;
}

/* --- Close Button --- */
.notification__close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 300;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.notification__close:hover {
    opacity: 1;
}

/* --- Error Styling --- */
.notification--error {
    background: #5C1A1A; /* Dark red background */
    border: 1px solid rgba(255, 73, 74, 0.5); /* Red border */
    color: #FFC0C0; /* Light red text */
}

.notification--error .notification__close {
    color: #FFC0C0; /* Light red 'x' */
}

/* --- Connect Wallet Prompt Card --- */
.connect-wallet-prompt {
    /* Spans the full width of the dashboard grid */
    grid-column: 1 / -1; 
    
    /* "Ghost card" style to match other dashboard cards */
    padding: 3rem 2rem; /* Extra padding for emphasis */
    
    /* Center all the content */
    text-align: center;

    background: rgb(52 52 52 / 9%);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 30px rgb(0 0 0 / 19%);
    border: 1px solid #1a1a1a;
    border-radius: 12px;
}

/* --- Heading --- */
.connect-wallet-prompt h2 {
    color: #ffffff;
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

/* --- Sub-text --- */
.connect-wallet-prompt p {
    color: #a0a0a0; /* Muted gray text */
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 2rem 0;
}

/* --- Wallet Icons Wrapper --- */
.wallet-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem; /* Space between icons */
}

/* --- Individual Icons --- */
.wallet-icons img {
    width: 40px;  /* Or any size you prefer */
    height: 40px;
    object-fit: contain;
    opacity: 0.6; /* Slight_fade for a modern look */
}

/* --- 1. The Main "Connect Wallet" Button --- */
/* This is the button you click to open the modal */
.wallet-connect__button--connect {
    background-color: #ffffff;
    color: #000000;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
}

.wallet-connect__button--connect:hover {
    opacity: 0.85;
}

/* --- 2. The Modal Overlay (The Dark Background) --- */
.wallet-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /* Semi-transparent black background */
    background: rgba(0, 0, 0, 0.5);
    
    /* Glassmorphism blur for the background */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    /* Center the modal */
    display: flex;
    align-items: center;
    justify-content: center;
    
    z-index: 1000;
    
    /* Hide by default (use JS to add a class like "show" to display it) */
    
    /* Optional: Add fade-in animation */
    transition: opacity 0.3s ease;
}

/* --- Add this class with JS to show the modal --- */
.wallet-modal-overlay.show {
    display: flex;
    opacity: 1;
}

/* --- 3. The Modal Card Itself --- */
.wallet-modal {
    /* Glassmorphism style */
    background: rgba(42, 42, 42, 0.75); /* Darker, less transparent glass */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    
    border-radius: 16px;
    padding: 2rem;
    width: 100%;
    max-width: 400px; /* Adjust as needed */
    position: relative; /* For positioning the close button */
    
    /* Optional: Add slide-in animation */
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.wallet-modal-overlay.show .wallet-modal {
    transform: scale(1);
}

.wallet-modal h3 {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 2rem;
    text-align: center;
}

/* --- 4. The Wallet Option Buttons --- */
.wallet-option {
    display: flex;
    align-items: center;
    width: 100%;
    
    background: transparent;
    border: 1px solid #333;
    color: #E0E0E0;
    
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
    
    cursor: pointer;
    transition: all 0.2s;
}

.wallet-option:hover {
    background: #1a1a1a;
    border-color: #444;
}

.wallet-option:last-child {
    margin-bottom: 0;
}

.wallet-option img {
    width: 28px;  /* Slightly larger icons for a modal */
    height: 28px;
    margin-right: 1rem;
    object-fit: contain;
}

/* --- 5. The Close Button (Top Right "X") --- */
.wallet-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    
    background: #2a2a2a;
    border: 1px solid #333;
    color: #E0E0E0;
    
    width: 32px;
    height: 32px;
    border-radius: 50%;
    
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    cursor: pointer;
    transition: all 0.2s;
}

.wallet-modal-close:hover {
    background: #333;
    color: #fff;
}
.purchase-widget {
  z-index: 12; /* Default */
}

/* If the overlay is present before the widget, override the z-index */
.wallet-modal-overlay ~ .purchase-widget {
  z-index: -1;
}


[data-rk] .iekbcc0{border:0;box-sizing:border-box;font-size:100%;line-height:normal;margin:0;padding:0;text-align:left;vertical-align:baseline;-webkit-tap-highlight-color:transparent}[data-rk] .iekbcc1{list-style:none}[data-rk] .iekbcc2{quotes:none}[data-rk] .iekbcc2:before,[data-rk] .iekbcc2:after{content:""}[data-rk] .iekbcc3{border-collapse:collapse;border-spacing:0}[data-rk] .iekbcc4{-webkit-appearance:none;-moz-appearance:none;appearance:none}[data-rk] .iekbcc5{outline:none}[data-rk] .iekbcc5::-moz-placeholder{opacity:1}[data-rk] .iekbcc5::placeholder{opacity:1}[data-rk] .iekbcc6{background-color:transparent;color:inherit}[data-rk] .iekbcc7:disabled{opacity:1}[data-rk] .iekbcc7::-ms-expand{display:none}[data-rk] .iekbcc8::-ms-clear{display:none}[data-rk] .iekbcc8::-webkit-search-cancel-button{-webkit-appearance:none}[data-rk] .iekbcc9{background:none;cursor:pointer;text-align:left}[data-rk] .iekbcca{color:inherit;text-decoration:none}[data-rk] .ju367v0{align-items:flex-start}[data-rk] .ju367v2{align-items:flex-end}[data-rk] .ju367v4{align-items:center}[data-rk] .ju367v6{display:none}[data-rk] .ju367v8{display:block}[data-rk] .ju367va{display:flex}[data-rk] .ju367vc{display:inline}[data-rk] .ju367ve{align-self:flex-start}[data-rk] .ju367vf{align-self:flex-end}[data-rk] .ju367vg{align-self:center}[data-rk] .ju367vh{background-size:cover}[data-rk] .ju367vi{border-radius:1px}[data-rk] .ju367vj{border-radius:6px}[data-rk] .ju367vk{border-radius:10px}[data-rk] .ju367vl{border-radius:13px}[data-rk] .ju367vm{border-radius:var(--rk-radii-actionButton)}[data-rk] .ju367vn{border-radius:var(--rk-radii-connectButton)}[data-rk] .ju367vo{border-radius:var(--rk-radii-menuButton)}[data-rk] .ju367vp{border-radius:var(--rk-radii-modal)}[data-rk] .ju367vq{border-radius:var(--rk-radii-modalMobile)}[data-rk] .ju367vr{border-radius:25%}[data-rk] .ju367vs{border-radius:9999px}[data-rk] .ju367vt{border-style:solid}[data-rk] .ju367vu{border-width:0px}[data-rk] .ju367vv{border-width:1px}[data-rk] .ju367vw{border-width:2px}[data-rk] .ju367vx{border-width:4px}[data-rk] .ju367vy{cursor:pointer}[data-rk] .ju367vz{cursor:none}[data-rk] .ju367v10{pointer-events:none}[data-rk] .ju367v11{pointer-events:all}[data-rk] .ju367v12{min-height:8px}[data-rk] .ju367v13{min-height:44px}[data-rk] .ju367v14{flex-direction:row}[data-rk] .ju367v15{flex-direction:column}[data-rk] .ju367v16{font-family:var(--rk-fonts-body)}[data-rk] .ju367v17{font-size:12px;line-height:18px}[data-rk] .ju367v18{font-size:13px;line-height:18px}[data-rk] .ju367v19{font-size:14px;line-height:18px}[data-rk] .ju367v1a{font-size:16px;line-height:20px}[data-rk] .ju367v1b{font-size:18px;line-height:24px}[data-rk] .ju367v1c{font-size:20px;line-height:24px}[data-rk] .ju367v1d{font-size:23px;line-height:29px}[data-rk] .ju367v1e{font-weight:400}[data-rk] .ju367v1f{font-weight:500}[data-rk] .ju367v1g{font-weight:600}[data-rk] .ju367v1h{font-weight:700}[data-rk] .ju367v1i{font-weight:800}[data-rk] .ju367v1j{gap:0}[data-rk] .ju367v1k{gap:1px}[data-rk] .ju367v1l{gap:2px}[data-rk] .ju367v1m{gap:3px}[data-rk] .ju367v1n{gap:4px}[data-rk] .ju367v1o{gap:5px}[data-rk] .ju367v1p{gap:6px}[data-rk] .ju367v1q{gap:8px}[data-rk] .ju367v1r{gap:10px}[data-rk] .ju367v1s{gap:12px}[data-rk] .ju367v1t{gap:14px}[data-rk] .ju367v1u{gap:16px}[data-rk] .ju367v1v{gap:18px}[data-rk] .ju367v1w{gap:20px}[data-rk] .ju367v1x{gap:24px}[data-rk] .ju367v1y{gap:28px}[data-rk] .ju367v1z{gap:32px}[data-rk] .ju367v20{gap:36px}[data-rk] .ju367v21{gap:44px}[data-rk] .ju367v22{gap:64px}[data-rk] .ju367v23{gap:-1px}[data-rk] .ju367v24{height:1px}[data-rk] .ju367v25{height:2px}[data-rk] .ju367v26{height:4px}[data-rk] .ju367v27{height:8px}[data-rk] .ju367v28{height:12px}[data-rk] .ju367v29{height:20px}[data-rk] .ju367v2a{height:24px}[data-rk] .ju367v2b{height:28px}[data-rk] .ju367v2c{height:30px}[data-rk] .ju367v2d{height:32px}[data-rk] .ju367v2e{height:34px}[data-rk] .ju367v2f{height:36px}[data-rk] .ju367v2g{height:40px}[data-rk] .ju367v2h{height:44px}[data-rk] .ju367v2i{height:48px}[data-rk] .ju367v2j{height:54px}[data-rk] .ju367v2k{height:60px}[data-rk] .ju367v2l{height:200px}[data-rk] .ju367v2m{height:100%}[data-rk] .ju367v2n{height:-moz-max-content;height:max-content}[data-rk] .ju367v2o{justify-content:flex-start}[data-rk] .ju367v2p{justify-content:flex-end}[data-rk] .ju367v2q{justify-content:center}[data-rk] .ju367v2r{justify-content:space-between}[data-rk] .ju367v2s{justify-content:space-around}[data-rk] .ju367v2t{text-align:left}[data-rk] .ju367v2u{text-align:center}[data-rk] .ju367v2v{text-align:inherit}[data-rk] .ju367v2w{margin-bottom:0}[data-rk] .ju367v2x{margin-bottom:1px}[data-rk] .ju367v2y{margin-bottom:2px}[data-rk] .ju367v2z{margin-bottom:3px}[data-rk] .ju367v30{margin-bottom:4px}[data-rk] .ju367v31{margin-bottom:5px}[data-rk] .ju367v32{margin-bottom:6px}[data-rk] .ju367v33{margin-bottom:8px}[data-rk] .ju367v34{margin-bottom:10px}[data-rk] .ju367v35{margin-bottom:12px}[data-rk] .ju367v36{margin-bottom:14px}[data-rk] .ju367v37{margin-bottom:16px}[data-rk] .ju367v38{margin-bottom:18px}[data-rk] .ju367v39{margin-bottom:20px}[data-rk] .ju367v3a{margin-bottom:24px}[data-rk] .ju367v3b{margin-bottom:28px}[data-rk] .ju367v3c{margin-bottom:32px}[data-rk] .ju367v3d{margin-bottom:36px}[data-rk] .ju367v3e{margin-bottom:44px}[data-rk] .ju367v3f{margin-bottom:64px}[data-rk] .ju367v3g{margin-bottom:-1px}[data-rk] .ju367v3h{margin-left:0}[data-rk] .ju367v3i{margin-left:1px}[data-rk] .ju367v3j{margin-left:2px}[data-rk] .ju367v3k{margin-left:3px}[data-rk] .ju367v3l{margin-left:4px}[data-rk] .ju367v3m{margin-left:5px}[data-rk] .ju367v3n{margin-left:6px}[data-rk] .ju367v3o{margin-left:8px}[data-rk] .ju367v3p{margin-left:10px}[data-rk] .ju367v3q{margin-left:12px}[data-rk] .ju367v3r{margin-left:14px}[data-rk] .ju367v3s{margin-left:16px}[data-rk] .ju367v3t{margin-left:18px}[data-rk] .ju367v3u{margin-left:20px}[data-rk] .ju367v3v{margin-left:24px}[data-rk] .ju367v3w{margin-left:28px}[data-rk] .ju367v3x{margin-left:32px}[data-rk] .ju367v3y{margin-left:36px}[data-rk] .ju367v3z{margin-left:44px}[data-rk] .ju367v40{margin-left:64px}[data-rk] .ju367v41{margin-left:-1px}[data-rk] .ju367v42{margin-right:0}[data-rk] .ju367v43{margin-right:1px}[data-rk] .ju367v44{margin-right:2px}[data-rk] .ju367v45{margin-right:3px}[data-rk] .ju367v46{margin-right:4px}[data-rk] .ju367v47{margin-right:5px}[data-rk] .ju367v48{margin-right:6px}[data-rk] .ju367v49{margin-right:8px}[data-rk] .ju367v4a{margin-right:10px}[data-rk] .ju367v4b{margin-right:12px}[data-rk] .ju367v4c{margin-right:14px}[data-rk] .ju367v4d{margin-right:16px}[data-rk] .ju367v4e{margin-right:18px}[data-rk] .ju367v4f{margin-right:20px}[data-rk] .ju367v4g{margin-right:24px}[data-rk] .ju367v4h{margin-right:28px}[data-rk] .ju367v4i{margin-right:32px}[data-rk] .ju367v4j{margin-right:36px}[data-rk] .ju367v4k{margin-right:44px}[data-rk] .ju367v4l{margin-right:64px}[data-rk] .ju367v4m{margin-right:-1px}[data-rk] .ju367v4n{margin-top:0}[data-rk] .ju367v4o{margin-top:1px}[data-rk] .ju367v4p{margin-top:2px}[data-rk] .ju367v4q{margin-top:3px}[data-rk] .ju367v4r{margin-top:4px}[data-rk] .ju367v4s{margin-top:5px}[data-rk] .ju367v4t{margin-top:6px}[data-rk] .ju367v4u{margin-top:8px}[data-rk] .ju367v4v{margin-top:10px}[data-rk] .ju367v4w{margin-top:12px}[data-rk] .ju367v4x{margin-top:14px}[data-rk] .ju367v4y{margin-top:16px}[data-rk] .ju367v4z{margin-top:18px}[data-rk] .ju367v50{margin-top:20px}[data-rk] .ju367v51{margin-top:24px}[data-rk] .ju367v52{margin-top:28px}[data-rk] .ju367v53{margin-top:32px}[data-rk] .ju367v54{margin-top:36px}[data-rk] .ju367v55{margin-top:44px}[data-rk] .ju367v56{margin-top:64px}[data-rk] .ju367v57{margin-top:-1px}[data-rk] .ju367v58{max-width:1px}[data-rk] .ju367v59{max-width:2px}[data-rk] .ju367v5a{max-width:4px}[data-rk] .ju367v5b{max-width:8px}[data-rk] .ju367v5c{max-width:12px}[data-rk] .ju367v5d{max-width:20px}[data-rk] .ju367v5e{max-width:24px}[data-rk] .ju367v5f{max-width:28px}[data-rk] .ju367v5g{max-width:30px}[data-rk] .ju367v5h{max-width:32px}[data-rk] .ju367v5i{max-width:34px}[data-rk] .ju367v5j{max-width:36px}[data-rk] .ju367v5k{max-width:40px}[data-rk] .ju367v5l{max-width:44px}[data-rk] .ju367v5m{max-width:48px}[data-rk] .ju367v5n{max-width:54px}[data-rk] .ju367v5o{max-width:60px}[data-rk] .ju367v5p{max-width:200px}[data-rk] .ju367v5q{max-width:100%}[data-rk] .ju367v5r{max-width:-moz-max-content;max-width:max-content}[data-rk] .ju367v5s{min-width:1px}[data-rk] .ju367v5t{min-width:2px}[data-rk] .ju367v5u{min-width:4px}[data-rk] .ju367v5v{min-width:8px}[data-rk] .ju367v5w{min-width:12px}[data-rk] .ju367v5x{min-width:20px}[data-rk] .ju367v5y{min-width:24px}[data-rk] .ju367v5z{min-width:28px}[data-rk] .ju367v60{min-width:30px}[data-rk] .ju367v61{min-width:32px}[data-rk] .ju367v62{min-width:34px}[data-rk] .ju367v63{min-width:36px}[data-rk] .ju367v64{min-width:40px}[data-rk] .ju367v65{min-width:44px}[data-rk] .ju367v66{min-width:48px}[data-rk] .ju367v67{min-width:54px}[data-rk] .ju367v68{min-width:60px}[data-rk] .ju367v69{min-width:200px}[data-rk] .ju367v6a{min-width:100%}[data-rk] .ju367v6b{min-width:-moz-max-content;min-width:max-content}[data-rk] .ju367v6c{overflow:hidden}[data-rk] .ju367v6d{padding-bottom:0}[data-rk] .ju367v6e{padding-bottom:1px}[data-rk] .ju367v6f{padding-bottom:2px}[data-rk] .ju367v6g{padding-bottom:3px}[data-rk] .ju367v6h{padding-bottom:4px}[data-rk] .ju367v6i{padding-bottom:5px}[data-rk] .ju367v6j{padding-bottom:6px}[data-rk] .ju367v6k{padding-bottom:8px}[data-rk] .ju367v6l{padding-bottom:10px}[data-rk] .ju367v6m{padding-bottom:12px}[data-rk] .ju367v6n{padding-bottom:14px}[data-rk] .ju367v6o{padding-bottom:16px}[data-rk] .ju367v6p{padding-bottom:18px}[data-rk] .ju367v6q{padding-bottom:20px}[data-rk] .ju367v6r{padding-bottom:24px}[data-rk] .ju367v6s{padding-bottom:28px}[data-rk] .ju367v6t{padding-bottom:32px}[data-rk] .ju367v6u{padding-bottom:36px}[data-rk] .ju367v6v{padding-bottom:44px}[data-rk] .ju367v6w{padding-bottom:64px}[data-rk] .ju367v6x{padding-bottom:-1px}[data-rk] .ju367v6y{padding-left:0}[data-rk] .ju367v6z{padding-left:1px}[data-rk] .ju367v70{padding-left:2px}[data-rk] .ju367v71{padding-left:3px}[data-rk] .ju367v72{padding-left:4px}[data-rk] .ju367v73{padding-left:5px}[data-rk] .ju367v74{padding-left:6px}[data-rk] .ju367v75{padding-left:8px}[data-rk] .ju367v76{padding-left:10px}[data-rk] .ju367v77{padding-left:12px}[data-rk] .ju367v78{padding-left:14px}[data-rk] .ju367v79{padding-left:16px}[data-rk] .ju367v7a{padding-left:18px}[data-rk] .ju367v7b{padding-left:20px}[data-rk] .ju367v7c{padding-left:24px}[data-rk] .ju367v7d{padding-left:28px}[data-rk] .ju367v7e{padding-left:32px}[data-rk] .ju367v7f{padding-left:36px}[data-rk] .ju367v7g{padding-left:44px}[data-rk] .ju367v7h{padding-left:64px}[data-rk] .ju367v7i{padding-left:-1px}[data-rk] .ju367v7j{padding-right:0}[data-rk] .ju367v7k{padding-right:1px}[data-rk] .ju367v7l{padding-right:2px}[data-rk] .ju367v7m{padding-right:3px}[data-rk] .ju367v7n{padding-right:4px}[data-rk] .ju367v7o{padding-right:5px}[data-rk] .ju367v7p{padding-right:6px}[data-rk] .ju367v7q{padding-right:8px}[data-rk] .ju367v7r{padding-right:10px}[data-rk] .ju367v7s{padding-right:12px}[data-rk] .ju367v7t{padding-right:14px}[data-rk] .ju367v7u{padding-right:16px}[data-rk] .ju367v7v{padding-right:18px}[data-rk] .ju367v7w{padding-right:20px}[data-rk] .ju367v7x{padding-right:24px}[data-rk] .ju367v7y{padding-right:28px}[data-rk] .ju367v7z{padding-right:32px}[data-rk] .ju367v80{padding-right:36px}[data-rk] .ju367v81{padding-right:44px}[data-rk] .ju367v82{padding-right:64px}[data-rk] .ju367v83{padding-right:-1px}[data-rk] .ju367v84{padding-top:0}[data-rk] .ju367v85{padding-top:1px}[data-rk] .ju367v86{padding-top:2px}[data-rk] .ju367v87{padding-top:3px}[data-rk] .ju367v88{padding-top:4px}[data-rk] .ju367v89{padding-top:5px}[data-rk] .ju367v8a{padding-top:6px}[data-rk] .ju367v8b{padding-top:8px}[data-rk] .ju367v8c{padding-top:10px}[data-rk] .ju367v8d{padding-top:12px}[data-rk] .ju367v8e{padding-top:14px}[data-rk] .ju367v8f{padding-top:16px}[data-rk] .ju367v8g{padding-top:18px}[data-rk] .ju367v8h{padding-top:20px}[data-rk] .ju367v8i{padding-top:24px}[data-rk] .ju367v8j{padding-top:28px}[data-rk] .ju367v8k{padding-top:32px}[data-rk] .ju367v8l{padding-top:36px}[data-rk] .ju367v8m{padding-top:44px}[data-rk] .ju367v8n{padding-top:64px}[data-rk] .ju367v8o{padding-top:-1px}[data-rk] .ju367v8p{position:absolute}[data-rk] .ju367v8q{position:fixed}[data-rk] .ju367v8r{position:relative}[data-rk] .ju367v8s{-webkit-user-select:none}[data-rk] .ju367v8t{right:0}[data-rk] .ju367v8u{transition:.125s ease}[data-rk] .ju367v8v{transition:transform .125s ease}[data-rk] .ju367v8w{-webkit-user-select:none;-moz-user-select:none;user-select:none}[data-rk] .ju367v8x{width:1px}[data-rk] .ju367v8y{width:2px}[data-rk] .ju367v8z{width:4px}[data-rk] .ju367v90{width:8px}[data-rk] .ju367v91{width:12px}[data-rk] .ju367v92{width:20px}[data-rk] .ju367v93{width:24px}[data-rk] .ju367v94{width:28px}[data-rk] .ju367v95{width:30px}[data-rk] .ju367v96{width:32px}[data-rk] .ju367v97{width:34px}[data-rk] .ju367v98{width:36px}[data-rk] .ju367v99{width:40px}[data-rk] .ju367v9a{width:44px}[data-rk] .ju367v9b{width:48px}[data-rk] .ju367v9c{width:54px}[data-rk] .ju367v9d{width:60px}[data-rk] .ju367v9e{width:200px}[data-rk] .ju367v9f{width:100%}[data-rk] .ju367v9g{width:-moz-max-content;width:max-content}[data-rk] .ju367v9h{-webkit-backdrop-filter:var(--rk-blurs-modalOverlay);backdrop-filter:var(--rk-blurs-modalOverlay)}[data-rk] .ju367v9i,[data-rk] .ju367v9j:hover,[data-rk] .ju367v9k:active{background:var(--rk-colors-accentColor)}[data-rk] .ju367v9l,[data-rk] .ju367v9m:hover,[data-rk] .ju367v9n:active{background:var(--rk-colors-accentColorForeground)}[data-rk] .ju367v9o,[data-rk] .ju367v9p:hover,[data-rk] .ju367v9q:active{background:var(--rk-colors-actionButtonBorder)}[data-rk] .ju367v9r,[data-rk] .ju367v9s:hover,[data-rk] .ju367v9t:active{background:var(--rk-colors-actionButtonBorderMobile)}[data-rk] .ju367v9u,[data-rk] .ju367v9v:hover,[data-rk] .ju367v9w:active{background:var(--rk-colors-actionButtonSecondaryBackground)}[data-rk] .ju367v9x,[data-rk] .ju367v9y:hover,[data-rk] .ju367v9z:active{background:var(--rk-colors-closeButton)}[data-rk] .ju367va0,[data-rk] .ju367va1:hover,[data-rk] .ju367va2:active{background:var(--rk-colors-closeButtonBackground)}[data-rk] .ju367va3,[data-rk] .ju367va4:hover,[data-rk] .ju367va5:active{background:var(--rk-colors-connectButtonBackground)}[data-rk] .ju367va6,[data-rk] .ju367va7:hover,[data-rk] .ju367va8:active{background:var(--rk-colors-connectButtonBackgroundError)}[data-rk] .ju367va9,[data-rk] .ju367vaa:hover,[data-rk] .ju367vab:active{background:var(--rk-colors-connectButtonInnerBackground)}[data-rk] .ju367vac,[data-rk] .ju367vad:hover,[data-rk] .ju367vae:active{background:var(--rk-colors-connectButtonText)}[data-rk] .ju367vaf,[data-rk] .ju367vag:hover,[data-rk] .ju367vah:active{background:var(--rk-colors-connectButtonTextError)}[data-rk] .ju367vai,[data-rk] .ju367vaj:hover,[data-rk] .ju367vak:active{background:var(--rk-colors-connectionIndicator)}[data-rk] .ju367val,[data-rk] .ju367vam:hover,[data-rk] .ju367van:active{background:var(--rk-colors-downloadBottomCardBackground)}[data-rk] .ju367vao,[data-rk] .ju367vap:hover,[data-rk] .ju367vaq:active{background:var(--rk-colors-downloadTopCardBackground)}[data-rk] .ju367var,[data-rk] .ju367vas:hover,[data-rk] .ju367vat:active{background:var(--rk-colors-error)}[data-rk] .ju367vau,[data-rk] .ju367vav:hover,[data-rk] .ju367vaw:active{background:var(--rk-colors-generalBorder)}[data-rk] .ju367vax,[data-rk] .ju367vay:hover,[data-rk] .ju367vaz:active{background:var(--rk-colors-generalBorderDim)}[data-rk] .ju367vb0,[data-rk] .ju367vb1:hover,[data-rk] .ju367vb2:active{background:var(--rk-colors-menuItemBackground)}[data-rk] .ju367vb3,[data-rk] .ju367vb4:hover,[data-rk] .ju367vb5:active{background:var(--rk-colors-modalBackdrop)}[data-rk] .ju367vb6,[data-rk] .ju367vb7:hover,[data-rk] .ju367vb8:active{background:var(--rk-colors-modalBackground)}[data-rk] .ju367vb9,[data-rk] .ju367vba:hover,[data-rk] .ju367vbb:active{background:var(--rk-colors-modalBorder)}[data-rk] .ju367vbc,[data-rk] .ju367vbd:hover,[data-rk] .ju367vbe:active{background:var(--rk-colors-modalText)}[data-rk] .ju367vbf,[data-rk] .ju367vbg:hover,[data-rk] .ju367vbh:active{background:var(--rk-colors-modalTextDim)}[data-rk] .ju367vbi,[data-rk] .ju367vbj:hover,[data-rk] .ju367vbk:active{background:var(--rk-colors-modalTextSecondary)}[data-rk] .ju367vbl,[data-rk] .ju367vbm:hover,[data-rk] .ju367vbn:active{background:var(--rk-colors-profileAction)}[data-rk] .ju367vbo,[data-rk] .ju367vbp:hover,[data-rk] .ju367vbq:active{background:var(--rk-colors-profileActionHover)}[data-rk] .ju367vbr,[data-rk] .ju367vbs:hover,[data-rk] .ju367vbt:active{background:var(--rk-colors-profileForeground)}[data-rk] .ju367vbu,[data-rk] .ju367vbv:hover,[data-rk] .ju367vbw:active{background:var(--rk-colors-selectedOptionBorder)}[data-rk] .ju367vbx,[data-rk] .ju367vby:hover,[data-rk] .ju367vbz:active{background:var(--rk-colors-standby)}[data-rk] .ju367vc0,[data-rk] .ju367vc1:hover,[data-rk] .ju367vc2:active{border-color:var(--rk-colors-accentColor)}[data-rk] .ju367vc3,[data-rk] .ju367vc4:hover,[data-rk] .ju367vc5:active{border-color:var(--rk-colors-accentColorForeground)}[data-rk] .ju367vc6,[data-rk] .ju367vc7:hover,[data-rk] .ju367vc8:active{border-color:var(--rk-colors-actionButtonBorder)}[data-rk] .ju367vc9,[data-rk] .ju367vca:hover,[data-rk] .ju367vcb:active{border-color:var(--rk-colors-actionButtonBorderMobile)}[data-rk] .ju367vcc,[data-rk] .ju367vcd:hover,[data-rk] .ju367vce:active{border-color:var(--rk-colors-actionButtonSecondaryBackground)}[data-rk] .ju367vcf,[data-rk] .ju367vcg:hover,[data-rk] .ju367vch:active{border-color:var(--rk-colors-closeButton)}[data-rk] .ju367vci,[data-rk] .ju367vcj:hover,[data-rk] .ju367vck:active{border-color:var(--rk-colors-closeButtonBackground)}[data-rk] .ju367vcl,[data-rk] .ju367vcm:hover,[data-rk] .ju367vcn:active{border-color:var(--rk-colors-connectButtonBackground)}[data-rk] .ju367vco,[data-rk] .ju367vcp:hover,[data-rk] .ju367vcq:active{border-color:var(--rk-colors-connectButtonBackgroundError)}[data-rk] .ju367vcr,[data-rk] .ju367vcs:hover,[data-rk] .ju367vct:active{border-color:var(--rk-colors-connectButtonInnerBackground)}[data-rk] .ju367vcu,[data-rk] .ju367vcv:hover,[data-rk] .ju367vcw:active{border-color:var(--rk-colors-connectButtonText)}[data-rk] .ju367vcx,[data-rk] .ju367vcy:hover,[data-rk] .ju367vcz:active{border-color:var(--rk-colors-connectButtonTextError)}[data-rk] .ju367vd0,[data-rk] .ju367vd1:hover,[data-rk] .ju367vd2:active{border-color:var(--rk-colors-connectionIndicator)}[data-rk] .ju367vd3,[data-rk] .ju367vd4:hover,[data-rk] .ju367vd5:active{border-color:var(--rk-colors-downloadBottomCardBackground)}[data-rk] .ju367vd6,[data-rk] .ju367vd7:hover,[data-rk] .ju367vd8:active{border-color:var(--rk-colors-downloadTopCardBackground)}[data-rk] .ju367vd9,[data-rk] .ju367vda:hover,[data-rk] .ju367vdb:active{border-color:var(--rk-colors-error)}[data-rk] .ju367vdc,[data-rk] .ju367vdd:hover,[data-rk] .ju367vde:active{border-color:var(--rk-colors-generalBorder)}[data-rk] .ju367vdf,[data-rk] .ju367vdg:hover,[data-rk] .ju367vdh:active{border-color:var(--rk-colors-generalBorderDim)}[data-rk] .ju367vdi,[data-rk] .ju367vdj:hover,[data-rk] .ju367vdk:active{border-color:var(--rk-colors-menuItemBackground)}[data-rk] .ju367vdl,[data-rk] .ju367vdm:hover,[data-rk] .ju367vdn:active{border-color:var(--rk-colors-modalBackdrop)}[data-rk] .ju367vdo,[data-rk] .ju367vdp:hover,[data-rk] .ju367vdq:active{border-color:var(--rk-colors-modalBackground)}[data-rk] .ju367vdr,[data-rk] .ju367vds:hover,[data-rk] .ju367vdt:active{border-color:var(--rk-colors-modalBorder)}[data-rk] .ju367vdu,[data-rk] .ju367vdv:hover,[data-rk] .ju367vdw:active{border-color:var(--rk-colors-modalText)}[data-rk] .ju367vdx,[data-rk] .ju367vdy:hover,[data-rk] .ju367vdz:active{border-color:var(--rk-colors-modalTextDim)}[data-rk] .ju367ve0,[data-rk] .ju367ve1:hover,[data-rk] .ju367ve2:active{border-color:var(--rk-colors-modalTextSecondary)}[data-rk] .ju367ve3,[data-rk] .ju367ve4:hover,[data-rk] .ju367ve5:active{border-color:var(--rk-colors-profileAction)}[data-rk] .ju367ve6,[data-rk] .ju367ve7:hover,[data-rk] .ju367ve8:active{border-color:var(--rk-colors-profileActionHover)}[data-rk] .ju367ve9,[data-rk] .ju367vea:hover,[data-rk] .ju367veb:active{border-color:var(--rk-colors-profileForeground)}[data-rk] .ju367vec,[data-rk] .ju367ved:hover,[data-rk] .ju367vee:active{border-color:var(--rk-colors-selectedOptionBorder)}[data-rk] .ju367vef,[data-rk] .ju367veg:hover,[data-rk] .ju367veh:active{border-color:var(--rk-colors-standby)}[data-rk] .ju367vei,[data-rk] .ju367vej:hover,[data-rk] .ju367vek:active{box-shadow:var(--rk-shadows-connectButton)}[data-rk] .ju367vel,[data-rk] .ju367vem:hover,[data-rk] .ju367ven:active{box-shadow:var(--rk-shadows-dialog)}[data-rk] .ju367veo,[data-rk] .ju367vep:hover,[data-rk] .ju367veq:active{box-shadow:var(--rk-shadows-profileDetailsAction)}[data-rk] .ju367ver,[data-rk] .ju367ves:hover,[data-rk] .ju367vet:active{box-shadow:var(--rk-shadows-selectedOption)}[data-rk] .ju367veu,[data-rk] .ju367vev:hover,[data-rk] .ju367vew:active{box-shadow:var(--rk-shadows-selectedWallet)}[data-rk] .ju367vex,[data-rk] .ju367vey:hover,[data-rk] .ju367vez:active{box-shadow:var(--rk-shadows-walletLogo)}[data-rk] .ju367vf0,[data-rk] .ju367vf1:hover,[data-rk] .ju367vf2:active{color:var(--rk-colors-accentColor)}[data-rk] .ju367vf3,[data-rk] .ju367vf4:hover,[data-rk] .ju367vf5:active{color:var(--rk-colors-accentColorForeground)}[data-rk] .ju367vf6,[data-rk] .ju367vf7:hover,[data-rk] .ju367vf8:active{color:var(--rk-colors-actionButtonBorder)}[data-rk] .ju367vf9,[data-rk] .ju367vfa:hover,[data-rk] .ju367vfb:active{color:var(--rk-colors-actionButtonBorderMobile)}[data-rk] .ju367vfc,[data-rk] .ju367vfd:hover,[data-rk] .ju367vfe:active{color:var(--rk-colors-actionButtonSecondaryBackground)}[data-rk] .ju367vff,[data-rk] .ju367vfg:hover,[data-rk] .ju367vfh:active{color:var(--rk-colors-closeButton)}[data-rk] .ju367vfi,[data-rk] .ju367vfj:hover,[data-rk] .ju367vfk:active{color:var(--rk-colors-closeButtonBackground)}[data-rk] .ju367vfl,[data-rk] .ju367vfm:hover,[data-rk] .ju367vfn:active{color:var(--rk-colors-connectButtonBackground)}[data-rk] .ju367vfo,[data-rk] .ju367vfp:hover,[data-rk] .ju367vfq:active{color:var(--rk-colors-connectButtonBackgroundError)}[data-rk] .ju367vfr,[data-rk] .ju367vfs:hover,[data-rk] .ju367vft:active{color:var(--rk-colors-connectButtonInnerBackground)}[data-rk] .ju367vfu,[data-rk] .ju367vfv:hover,[data-rk] .ju367vfw:active{color:var(--rk-colors-connectButtonText)}[data-rk] .ju367vfx,[data-rk] .ju367vfy:hover,[data-rk] .ju367vfz:active{color:var(--rk-colors-connectButtonTextError)}[data-rk] .ju367vg0,[data-rk] .ju367vg1:hover,[data-rk] .ju367vg2:active{color:var(--rk-colors-connectionIndicator)}[data-rk] .ju367vg3,[data-rk] .ju367vg4:hover,[data-rk] .ju367vg5:active{color:var(--rk-colors-downloadBottomCardBackground)}[data-rk] .ju367vg6,[data-rk] .ju367vg7:hover,[data-rk] .ju367vg8:active{color:var(--rk-colors-downloadTopCardBackground)}[data-rk] .ju367vg9,[data-rk] .ju367vga:hover,[data-rk] .ju367vgb:active{color:var(--rk-colors-error)}[data-rk] .ju367vgc,[data-rk] .ju367vgd:hover,[data-rk] .ju367vge:active{color:var(--rk-colors-generalBorder)}[data-rk] .ju367vgf,[data-rk] .ju367vgg:hover,[data-rk] .ju367vgh:active{color:var(--rk-colors-generalBorderDim)}[data-rk] .ju367vgi,[data-rk] .ju367vgj:hover,[data-rk] .ju367vgk:active{color:var(--rk-colors-menuItemBackground)}[data-rk] .ju367vgl,[data-rk] .ju367vgm:hover,[data-rk] .ju367vgn:active{color:var(--rk-colors-modalBackdrop)}[data-rk] .ju367vgo,[data-rk] .ju367vgp:hover,[data-rk] .ju367vgq:active{color:var(--rk-colors-modalBackground)}[data-rk] .ju367vgr,[data-rk] .ju367vgs:hover,[data-rk] .ju367vgt:active{color:var(--rk-colors-modalBorder)}[data-rk] .ju367vgu,[data-rk] .ju367vgv:hover,[data-rk] .ju367vgw:active{color:var(--rk-colors-modalText)}[data-rk] .ju367vgx,[data-rk] .ju367vgy:hover,[data-rk] .ju367vgz:active{color:var(--rk-colors-modalTextDim)}[data-rk] .ju367vh0,[data-rk] .ju367vh1:hover,[data-rk] .ju367vh2:active{color:var(--rk-colors-modalTextSecondary)}[data-rk] .ju367vh3,[data-rk] .ju367vh4:hover,[data-rk] .ju367vh5:active{color:var(--rk-colors-profileAction)}[data-rk] .ju367vh6,[data-rk] .ju367vh7:hover,[data-rk] .ju367vh8:active{color:var(--rk-colors-profileActionHover)}[data-rk] .ju367vh9,[data-rk] .ju367vha:hover,[data-rk] .ju367vhb:active{color:var(--rk-colors-profileForeground)}[data-rk] .ju367vhc,[data-rk] .ju367vhd:hover,[data-rk] .ju367vhe:active{color:var(--rk-colors-selectedOptionBorder)}[data-rk] .ju367vhf,[data-rk] .ju367vhg:hover,[data-rk] .ju367vhh:active{color:var(--rk-colors-standby)}@media screen and (min-width: 768px){[data-rk] .ju367v1{align-items:flex-start}[data-rk] .ju367v3{align-items:flex-end}[data-rk] .ju367v5{align-items:center}[data-rk] .ju367v7{display:none}[data-rk] .ju367v9{display:block}[data-rk] .ju367vb{display:flex}[data-rk] .ju367vd{display:inline}}[data-rk] ._12cbo8i3,[data-rk] ._12cbo8i3:after{--_12cbo8i0: 1;--_12cbo8i1: 1}[data-rk] ._12cbo8i3:hover{transform:scale(var(--_12cbo8i0))}[data-rk] ._12cbo8i3:active{transform:scale(var(--_12cbo8i1))}[data-rk] ._12cbo8i3:active:after{content:"";bottom:-1px;display:block;left:-1px;position:absolute;right:-1px;top:-1px;transform:scale(calc((1 / var(--_12cbo8i1)) * var(--_12cbo8i0)))}[data-rk] ._12cbo8i4,[data-rk] ._12cbo8i4:after{--_12cbo8i0: 1.025}[data-rk] ._12cbo8i5,[data-rk] ._12cbo8i5:after{--_12cbo8i0: 1.1}[data-rk] ._12cbo8i6,[data-rk] ._12cbo8i6:after{--_12cbo8i1: .95}[data-rk] ._12cbo8i7,[data-rk] ._12cbo8i7:after{--_12cbo8i1: .9}@keyframes _1luule41{0%{transform:rotate(0)}to{transform:rotate(360deg)}}[data-rk] ._1luule42{animation:_1luule41 3s infinite linear}[data-rk] ._1luule43{background:conic-gradient(from 180deg at 50% 50%,rgba(72,146,254,0) 0deg,currentColor 282.04deg,rgba(72,146,254,0) 319.86deg,rgba(72,146,254,0) 360deg);height:21px;width:21px}@keyframes _9pm4ki0{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes _9pm4ki1{0%{opacity:0}to{opacity:1}}[data-rk] ._9pm4ki3{animation:_9pm4ki1 .15s ease;bottom:-200px;left:-200px;padding:200px;right:-200px;top:-200px;transform:translateZ(0);z-index:2147483646}[data-rk] ._9pm4ki5{animation:_9pm4ki0 .35s cubic-bezier(.15,1.15,.6,1),_9pm4ki1 .15s ease;max-width:100vw}[data-rk] ._1ckjpok1{box-sizing:content-box;max-width:100vw;width:360px}[data-rk] ._1ckjpok2{width:100vw}[data-rk] ._1ckjpok3{min-width:720px;width:720px}[data-rk] ._1ckjpok4{min-width:368px;width:368px}[data-rk] ._1ckjpok6{border-width:0px;box-sizing:border-box;width:100vw}@media screen and (min-width: 768px){[data-rk] ._1ckjpok1{width:360px}[data-rk] ._1ckjpok2{width:480px}[data-rk] ._1ckjpok4{min-width:368px;width:368px}}@media screen and (max-width: 767px){[data-rk] ._1ckjpok7{border-bottom-left-radius:0;border-bottom-right-radius:0;margin-top:-200px;padding-bottom:200px;top:200px}}[data-rk] .v9horb0:hover{background:unset}[data-rk] ._18dqw9x0{max-height:456px;overflow-y:auto;overflow-x:hidden}[data-rk] ._18dqw9x1{max-height:456px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}[data-rk] ._18dqw9x1::-webkit-scrollbar{display:none}[data-rk] .g5kl0l0{border-color:transparent}[data-rk] ._1vwt0cg0{background:#fff;color:#000}[data-rk] ._1vwt0cg2{max-height:454px;overflow-y:auto}[data-rk] ._1vwt0cg3{min-width:287px}[data-rk] ._1vwt0cg4{min-width:100%}@keyframes _1am14411{0%{stroke-dashoffset:0}to{stroke-dashoffset:-283}}[data-rk] ._1am14410{overflow:auto;scrollbar-width:none;transform:translateZ(0)}[data-rk] ._1am14410::-webkit-scrollbar{display:none}[data-rk] ._1am14412{animation:_1am14411 1s linear infinite;stroke-dasharray:98 196;fill:none;stroke-linecap:round;stroke-width:4}[data-rk] ._1am14413{position:absolute}[data-rk] ._1y2lnfi0{border:1px solid rgba(16,21,31,.06)}[data-rk] ._1y2lnfi1{max-width:-moz-fit-content;max-width:fit-content}

/* 1. The Glass Container */
.transaction-notification {
  /* Positioning as an alert box */
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 360px;
  z-index: 9999;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Glassmorphism Effect */
  background: rgba(20, 20, 20, 0.65); /* Dark semi-transparent background */
  backdrop-filter: blur(12px);        /* The "frosted glass" blur */
  -webkit-backdrop-filter: blur(12px); /* Safari support */
  
  /* Borders and Shadows for depth */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 4px solid #14F195;     /* Solana Green accent */
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  
  /* Text styling */
  color: #ffffff;
  padding: 20px;
  overflow: hidden;

  /* Entry Animation */
  animation: slideInRight 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 2. The Content Layout */
.notification-content h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Add a checkmark before the title */
.notification-content h3::before {
  content: "✓";
  color: #14F195; /* Solana Green */
  background: rgba(20, 241, 149, 0.15);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.notification-content p {
  margin: 4px 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  
  /* Handle long hashes */
  word-break: break-all;
}

/* 3. The Action Button (View on Explorer) */
.etherscan-link {
  display: inline-block;
  margin-top: 16px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  
  /* Button Glass Style */
  background: linear-gradient(90deg, #9945FF 0%, #14F195 100%); /* Solana Gradient */
  color: #000;
  padding: 8px 16px;
  border-radius: 8px;
  opacity: 0.9;
  transition: all 0.2s ease;
}

.etherscan-link:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20, 241, 149, 0.3);
}

/* 4. Animation Keyframes */
@keyframes slideInRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.transactions-list {
    display: flex;
    flex-direction: column;
    gap: 0; /* Items are separated by border-bottom, not gap */
}

.transaction-item {
    padding: 15px 0;
    /* Remove padding from top of first item and bottom of last for clean edges */
}

.transaction-item:not(:last-child) {
    border-bottom: 1px solid #282828; /* Separator between list items */
}

/* --- 3. Item Layout (Flexbox for alignment) --- */

.transaction-main {
    display: flex;
    justify-content: space-between; /* Pushes transaction info (left) and meta (right) apart */
    align-items: center;
}

/* Optional: Add hover effect to the whole row for interactivity */
.transaction-item:hover {
    background-color: #232323; /* Slight background change on hover */
    cursor: pointer;
}

/* --- 4. Transaction Info (Left Side) --- */

.transaction-type {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
    align-items: center;
}

.type-badge, .network-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1; /* Ensure text is vertically centered in the badge */
}

.type-badge { 
    background-color: #333; 
    color: #f1f1f1; 
}

.network-badge { 
    background-color: #1d3326; 
    color: #14F195; /* Solana/Success Green accent */
}

/* Amounts */
.amount-details {
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.arrow { 
    color: #555; 
    font-weight: 700;
}

.paid-amount {
    color: #8a8a8a; /* Paid amount slightly muted */
}

.received-amount {
    color: #ffffff; /* Received amount stands out */
}

.usd-amount {
    font-size: 12px;
    color: #8a8a8a; /* Muted gray for secondary value */
    margin-top: 2px;
}

/* --- 5. Transaction Meta (Right Side) --- */

.transaction-meta {
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.transaction-date {
    font-size: 12px;
    color: #8a8a8a; /* Muted gray, same as USD amount */
    margin-bottom: 4px;
}

.hash-link {
    font-size: 12px;
    color: #007bff; /* Bright blue for links, matching the screenshot */
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 500;
}

.hash-link:hover {
    text-decoration: underline;
    color: #4da6ff;
}

/* --- 1. Transaction Status Container --- */

.transaction-status {
    /* Inherit dashboard card look (adjust padding if necessary) */
    background-color: #1c1c1c; 
    border-radius: 12px;
    padding: 20px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    margin-top: 20px; /* Optional: space it below other elements */
}

/* --- 2. Header and Separator --- */

.transaction-status h4 {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 15px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid #333333; /* Divider below the title */
}

/* --- 3. Transaction Info Details --- */

.transaction-info {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Space between the two status lines */
}

.transaction-info p {
    margin: 0;
    font-size: 14px;
    color: #f1f1f1; /* Primary text color */
    display: flex; /* Helps align the text and hash link */
    line-height: 1.4;
}

/* Styling the Bold Labels (Status: / Transaction Hash:) */
.transaction-info p strong {
    font-weight: 500; /* Slightly less bold than default bold */
    color: #8a8a8a; /* Muted color for the label */
    min-width: 140px; /* Ensures labels align nicely */
    display: inline-block;
}

/* Styling the dynamic value ("Confirming...", hash link) */
.transaction-info p:first-of-type {
    /* Specific styling for the status line */
    color: #ffc107; /* Use a yellow/orange color for "Confirming" */
    font-weight: 600;
}

/* --- 4. Transaction Hash Link --- */

.transaction-info a {
    color: #007bff; /* Bright blue for links, matching your dashboard */
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    /* Ensure hash text doesn't overflow */
    word-break: break-all;
}

.transaction-info a:hover {
    text-decoration: underline;
    color: #4da6ff;
}

/* --- Optional: Styling the separate 'Processing...' Bar seen in the image --- */
/* Assuming the 'Processing...' bar is a sibling element outside of .transaction-status */
/* If you want to style the bar seen in your image, here is a suggested style: */
.processing-bar {
    background-color: #333333;
    color: #ffffff;
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 20px; 
}