/* Entry point for SCSS compilation*/
/* Uses PostCSS with SCSS syntax support*/
/* Order matters*/
/**
 * RESET v1.2.3 - Modern & Accessible
 * Feb 2, 2026 - Prevent double-tap zoom on interactive elements while allowing pinch zoom
 * 
 * Normalizes browser inconsistencies while preserving accessibility.
 * 
 * 1. Base - Universal resets, document settings
 * 2. Elements - Text, media, forms, tables
 * 3. Interactive - Links, focus states
 * 4. Custom - Custom styles
 */
/* Base */
:root {
  interpolate-size: allow-keywords;
}
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
div, section, article, aside, nav, header, footer, main {
  line-height: 1;
}
html {
  height: 100%;
}
body {
  min-height: 100%;
}
html {
  font-family: sans-serif;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;

  /* Prevent iOS text size adjust after orientation change */
  -webkit-text-size-adjust: 100%;

  /* Font smoothing for better rendering */
  -webkit-text-stroke: rgba(255,255,255,0.01) 0.1px;
  -webkit-font-smoothing: antialiased;
  text-shadow: rgba(255,255,255,0.01) 0 0 1px;
  -moz-osx-font-smoothing: grayscale;
}
/* Elements */
/* Text */
hr {
  box-sizing: content-box;
  height: 0;
  border: 0;
}
small {
  font-size: 80%;
}
/* Prevent sub/sup affecting line-height */
sub, sup {
  font-size: 65%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }
pre {
  overflow: auto;
}
code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
/* Media */
img, video {
  display: block;
  max-width: 100%;
  height: auto;
}
svg {
  max-width: 100%;
  height: auto;
}
audio, canvas, progress, video {
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
/* Forms */
button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  border: 0;
  background: none;
}
button, select {
  text-transform: none;
}
/* Clickable input types */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  -moz-appearance: button;
       appearance: button;
  cursor: pointer;
}
button[disabled],
input[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}
button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
[role="button"] {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
/* Inputs */
input, textarea {
  line-height: normal;
  border-radius: 0;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
       appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
}
/* Remove Firefox validation styling */
input:required, input:invalid {
  box-shadow: none;
}
/* Firefox placeholder opacity fix */
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  color: inherit;
}
input::placeholder, textarea::placeholder {
  opacity: 1;
  color: inherit;
}
/* Dialog */
dialog {
  border: 0;
  padding: 0;
  max-width: 100%;
  max-height: 100%;
  color: inherit;
}
dialog:not([open]) {
  display: none;
}
/* Tables */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td, th {
  padding: 0;
  text-align: left;
}
/* Interactive */
a {
  text-decoration: none;
  color: inherit;
}
/* Accessible focus styles */
a:focus-visible, 
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0px;
}
/* Remove focus outline for mouse users, keep for keyboard */
:focus:not(:focus-visible) {
  outline: none;
}
/* Prevent double-tap zoom on interactive elements while allowing pinch zoom */
button,
a,
input,
select,
textarea,
[role="button"] {
  touch-action: manipulation;
}
/* Custom */
*:not(dialog) {
  background: none;
}
ul, ol {
  list-style-type: none;
}
a { 
  -webkit-text-stroke: currentColor; 
}
select {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    line-height: 1.2;
    /** for the dropdown indicator */
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1.25em !important;
}
html.dark select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
}
html.night_mode select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
}
/**
 * FONTFACE v2.0 - Modern & Lean
 * Nov 12, 2025
 * 
 * WOFF2: Modern format with superior compression (98%+ browser support)
 * WOFF:  Fallback for legacy browsers (IE 11, old Android)
 * 
 * Best Practices:
 * - Use WOFF2 only for modern projects
 * - Add font-display: swap for performance
 * - Consider variable fonts for multiple weights
 * 
 * Converters: https://transfonter.org
 *             https://fontsquirrel.com
 * 
 * Grab stylesheet content from /assets/fonts/.../stylesheet.css and paste below.
 */
/* outfit-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100;
  src: url('./fonts/outfit/outfit-v15-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* outfit-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 200;
  src: url('./fonts/outfit/outfit-v15-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* outfit-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  src: url('./fonts/outfit/outfit-v15-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* outfit-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/outfit/outfit-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* outfit-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  src: url('./fonts/outfit/outfit-v15-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* outfit-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  src: url('./fonts/outfit/outfit-v15-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* outfit-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/outfit/outfit-v15-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* outfit-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  src: url('./fonts/outfit/outfit-v15-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* outfit-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 900;
  src: url('./fonts/outfit/outfit-v15-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Breakpoints - Modernized to CSS Custom Properties */
/* Last updated: March 2026 */
/* CUSTOM MEDIA QUERIES */
/* small-mobile (SE) */
/* mobile */
/* mobile-landscape */
/* tablet-portrait */
/* tablet-device */
/* tablet */
/* laptop */
/* large-laptop */
/* desktop (min-width) */
/* Footer specific */
/* MIN-WIDTH variants */
/* ============================================*/
/* VARIABLES*/
/* ============================================*/
/* Colors*/
/* $color-success: #4caf51;*/
/* Spinner (for loading states)*/
/* Border radius*/
/* Transitions*/
/* Font families*/
/* $font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;*/
/* $font-system: 'Plus Jakarta Sans', sans-serif;*/
/* $font-system: 'Nunito', sans-serif;*/
/* $font-system: 'Poppins', sans-serif;*/
/* $font-system: 'DM Sans', sans-serif;*/
/* $font-system: 'Quicksand', sans-serif;*/
*::-moz-selection {
    background: #0a253d;
    color:#d3d3d3 !important;
}
*::selection {
    background: #0a253d;
    color:#d3d3d3 !important;
}
/* Classes*/
/* Last updated: November 7, 2025*/
.hidden {
    display: none !important;
}
.visible {
    display: block !important;
}
.flex {
    display: flex !important;
}
.inline-flex {
    display: inline-flex !important;
}
.inline-block {
    display: inline-block !important;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.text-left {
    text-align: left;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
.text-secondary {
    color: var(--text-secondary);
}
.font-mono {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
}
/* Classes ---------------------*/
.no_href, .no_href * {
        cursor: default !important; 
    }
.image_container, .logo_container, .icon_container {
    display: inline-block;
    position: relative;
    width: 100%;
}
.image_container img, .logo_container img, .icon_container img {
        width: 100%;
        height: auto;
    }
.image {
    background-position:50% 50%;
    background-size:cover;
    width:100%;
    height:100%;
    position: absolute;
    top: 0;
    left: 0;
}
.contain {
    background-size: contain;
    background-position:50% 50%;
}
/* @define-mixin overlay {*/
/*     width:100%;*/
/*     height:100%;*/
/*     position: absolute;*/
/*     top:0;*/
/*     left:0;*/
/* }*/
/* .overlay { @mixin overlay; }*/
.abs { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width:100%; height:100%; }
.preload {display:none!important;}
.break-word {
    overflow-wrap: break-word;
    display: block;
}
*[back-img], *[back-asset] {
    opacity: 0;
    transition: opacity 1s;
}
/* CACHES  -----------------------------------------*/
/* Extend background to the left (for full-width effects)*/
.cache_bottom {
    position: relative;
}
.cache_bottom::after {
        content:"";
        display: inline-block;
        height:10000%;
        width:100%;
        position: absolute;
        left:0;
        top:100%;
        background:inherit;
    }
/* ON - OFF*/
/* --------------------------------------------------------*/
.hidden {
    display: none !important;
}
.laptop_on, .l_on, .l-on {
    display:none!important;
}
@media (max-width: 1367px) {
.laptop_on, .l_on, .l-on {display:inline-block!important
}}
@media (max-width: 1367px) {
.laptop_off, .l_off, .l-off {display:none!important
}}
.tablet_on, .t_on, .t-on {
    display:none!important;
}
@media (max-width: 1226px) {
.tablet_on, .t_on, .t-on {display:inline-block!important
}}
@media (max-width: 1226px) {
.tablet_off, .t_off, .t-off {display:none!important
}}
.td_on, .td-on {
    display:none!important;
}
@media (max-width: 1024px) {
.td_on, .td-on {display:inline-block!important
}}
@media (max-width: 1024px) {
.td_off, .td-off {display:none!important
}}
.tp_on, .tp-on {
    display:none!important;
}
@media (max-width: 820px) {
.tp_on, .tp-on {display:inline-block!important
}}
@media (max-width: 820px) {
.tp_off, .tp-off {display:none!important
}}
.ml_on, .ml-on {
    display:none!important;
}
@media (max-width: 740px) {
.ml_on, .ml-on {display:inline-block!important
}}
@media (max-width: 740px) {
.ml_off, .ml-off {display:none!important
}}
.mobile_on, .m_on, .m-on {
    display:none!important;
}
@media (max-width: 567px) {
.mobile_on, .m_on, .m-on {display:inline-block!important
}}
@media (max-width: 567px) {
.mobile_off, .m_off, .m-off {display:none!important
}}
.sm_on, .sm-on {
    display:none!important;
}
@media (max-width: 375px) {
.sm_on, .sm-on {display:inline-block!important
}}
@media (max-width: 375px) {
.sm_off, .sm-off {display:none!important
}}
/* PADDINGS*/
/* --------------------------------------------------------*/
@media (max-width: 1226px) {
.tablet-paddings {
        padding-left: var(--padding-tablet) !important;
        padding-right: var(--padding-tablet) !important
}
    }
@media (max-width: 567px) {
.tablet-paddings {
        padding-left: var(--padding-mobile) !important;
        padding-right: var(--padding-mobile) !important
}
    }
@media (max-width: 567px) {
.mobile-paddings {
        padding-left: var(--padding-mobile) !important;
        padding-right: var(--padding-mobile) !important
}
    }
@media (max-width: 1226px) {
.tablet-paddings-off {
        padding-left:0;
        padding-right:0
}
    }
.paddings {
    padding: 0 var(--padding-desktop);
}
@media (max-width: 1226px) {
.paddings {padding-left: var(--padding-tablet); padding-right: var(--padding-tablet)
}}
@media (max-width: 567px) {
.paddings {padding-left: var(--padding-mobile); padding-right: var(--padding-mobile)
}}
/* TRANSITIONS OUT*/
/* --------------------------------------------------------*/
* [outFade].go {
    transition: opacity 0.5s, transform 0.5s;
    opacity: 0;
    transform: translate3d(0,5px,0);
}
* [outLeft].go {
    transition: opacity 0.5s, transform 0.5s;
    opacity: 0;
    transform: translate3d(-10px,0px,0);
}
* [outRight].go {
    transition: opacity 0.5s, transform 0.5s;
    opacity: 0;
    transform: translate3d(10px,0px,0);
}
/* FIT TEXT --------------------*/
.fitText_container {
    text-align: center;
}
.fitText_container .fitText {
        display: inline-block;
        transform-origin: 50% 0;
        -webkit-font-smoothing: antialiased;
        transform: translate3d( 0, 0, 0);
        transition: transform 2s;
    }
/* NO PRINT ------------------*/
@media print {
.no_print {
        display: none !important
}
    }
/* ============================================*/
/* ANIMATIONS*/
/* ============================================*/
/* Global animations and keyframes*/
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes fade {
    0% {opacity:0}
    100% {opacity:1}
}
@keyframes fadeIn {
    0% {opacity:0}
    100% {opacity:1}
}
@keyframes scale {
    0% {transform:scale(0.5); opacity:0}
    100% {transform:scale(1); opacity:1}
}
@keyframes scale_50 {
    0% {transform:scale(0.5); opacity:0}
    100% {transform:scale(1); opacity:1}
}
@keyframes scale_80 {
    0% {transform:scale(0.8); opacity:0}
    100% {transform:scale(1); opacity:1}
}
@keyframes scale_90 {
    0% {transform:scale(0.9); opacity:0}
    100% {transform:scale(1); opacity:1}
}
@keyframes scale_95 {
    0% {transform:scale(0.95); opacity:0}
    100% {transform:scale(1); opacity:1}
}
@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}
/* Body initialization loader*/
/* Prevent FOUC - hide wallet until JavaScript determines auth state*/
body:not(.initialized) .wallet-content > div {
            /* display: none;*/
        }
body:not(.initialized) .wallet-content::before {
            content: '';
            display: block;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #0166FF;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 2.5rem auto;
        }
/* ============================================*/
/* BUTTONS*/
/* ============================================*/
.send-button {
    background: transparent;
    color: #999;
    border: 1px solid #e0e0e0;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: all 0.2s;
}
.send-button:hover {
        border-color: #3b00b9;
        color: #3b00b9;
    }
@media (max-width: 567px) {
.send-button {
        font-size: 12px;
        padding: 3px 10px
}
    }
.swap-button {
    background: transparent;
    color: #999;
    border: 1px solid #e0e0e0;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: all 0.2s;
}
.swap-button:hover {
        border-color: #3b00b9;
        color: #3b00b9;
    }
/* ============================================*/
/* ERROR MESSAGES*/
/* ============================================*/
.error:not(.btn-send) {
    background: #ffebee;
    color: #c62828;
    padding: 12px;
    border-radius: var(--radius-md);
    margin-top: 1rem;
    font-size: 14px;
}
/* ============================================*/
/* PAYMENT CONFIRMATION UI*/
/* ============================================*/
/* Used in payment popup mode (send-manager.ts)*/
.payment-confirmation {
    padding: 24px;
}
.payment-title {
    margin: 0 0 24px 0;
    font-size: 24px;
    text-align: center;
}
.order-context {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 24px;
    text-align: left;
}
.merchant-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f5f5f5;
}
.merchant-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
}
.merchant-info .merchant-name {
        font-weight: 600;
        font-size: 18px;
        color: #333;
    }
.merchant-info .order-id {
        font-size: 12px;
        color: #666;
    }
.order-items {
    margin-bottom: 12px;
}
/* .order-item {*/
/*     display: flex;*/
/*     justify-content: space-between;*/
/*     padding: 8px 0;*/
/*     border-bottom: 1px solid #eee;*/
/* }*/
.item-details {
    flex: 1;
}
.item-details .item-name {
        font-weight: 500;
        color: #333;
    }
.item-details .item-qty {
        font-size: 12px;
        color: #666;
    }
.item-price {
    font-weight: 500;
    color: #333;
}
.order-summary {
    padding-top: 12px;
    border-top: 2px solid #f5f5f5;
}
.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}
.summary-row .label {
        color: #666;
    }
.summary-row .value {
        color: #333;
    }
.summary-row.total {
        padding-top: 8px;
        border-top: 1px solid #e0e0e0;
        margin-top: 8px;
    }
.summary-row.total .label,
        .summary-row.total .value {
            font-weight: 600;
            color: #333;
        }
.payment-amount-box {
    background: #f5f5f5;
    padding: 20px;
    border-radius: var(--radius-md);
    margin-bottom: 24px;
    text-align: center;
}
.payment-amount-label {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}
.payment-amount-value {
    font-size: 32px;
    font-weight: 600;
    color: #0166FF;
}
.payment-recipient {
    text-align: left;
    margin-bottom: 24px;
}
.recipient-label {
    font-size: 14px;
    color: #666;
    margin-bottom: 4px;
}
.recipient-address {
    font-size: 12px;
    word-break: break-all;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    background: #f5f5f5;
    padding: 8px;
    border-radius: var(--radius-xs);
}
.payment-actions {
    display: flex;
    gap: 12px;
}
.btn-cancel-payment {
    flex: 1;
    padding: 12px 24px;
    border: 1px solid #ddd;
    background: #ffffff;
    color: #333;
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s, border-color 0.2s;
}
.btn-cancel-payment:hover {
        background: #f5f5f5;
        border-color: #ccc;
    }
.btn-confirm-payment {
    flex: 1;
    padding: 12px 24px;
    border: none;
    background: #0166FF;
    color: #ffffff;
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-size: 16px;
    transition: background 0.2s;
}
.btn-confirm-payment:hover {
        background: #0052CC;
    }
/* Override svelte-range-slider-pips CSS variables*/
/* Library uses: --slider: var(--range-slider, var(--slider-bg))*/
/* So we can override either --range-slider or --slider-bg*/
:root {
    /* Unfilled track background*/
    --range-slider: #d7dada;        

    /* Filled track color*/
    --range-range: var(--color-accent);       

    /* Filled track color -  inactive*/
    /* --range-range-inactive: var(--color-accent);  */
    
    /* Handle knob color*/
    --range-handle: var(--color-accent);     
    
    /* Handle knob color - inactive*/
    /* --range-handle-inactive: var(--color-accent);  */
    
    /* Handle when active*/
    --range-handle-focus: var(--color-accent); 
    
    /* Option 2: Override base theme (alternative approach)*/
    /* --slider-bg: var(--bg-primary);*/
    /* --slider-accent: var(--color-accent);*/
    /* --slider-accent-100: var(--color-accent);*/
}
html.dark {
    /* Unfilled track background*/
    --range-slider: #323232;   

    /* Filled track color -  inactive*/
    --range-range-inactive: #5a5a5a; 
    
    /* Handle knob color - inactive*/
    --range-handle-inactive: #5a5a5a; 
}
/* Scrollbar for higher than mobile*/
@media (min-width: 820px) {
.has-scrollbar,
.settings-section,
.modal-body {
        overflow-y: scroll;
        scrollbar-gutter: stable
}

        .has-scrollbar::-webkit-scrollbar, .settings-section::-webkit-scrollbar, .modal-body::-webkit-scrollbar {
            width: 12px;
        }
        
        .has-scrollbar::-webkit-scrollbar-track, .settings-section::-webkit-scrollbar-track, .modal-body::-webkit-scrollbar-track {
            background: var(--scrollbar-track);
            border-radius: var(--radius-xs);
        }
        
        .has-scrollbar::-webkit-scrollbar-thumb, .settings-section::-webkit-scrollbar-thumb, .modal-body::-webkit-scrollbar-thumb {
            background-color: var(--scrollbar-thumb);
            border-radius: var(--scrollbar-width);
            border:3px solid transparent;
            background-clip: content-box;
            -webkit-transition: background-color 0.3s;
            transition: background-color 0.3s;
            cursor: grab;
        }
            
            .has-scrollbar::-webkit-scrollbar-thumb:hover, .settings-section::-webkit-scrollbar-thumb:hover, .modal-body::-webkit-scrollbar-thumb:hover {
                -webkit-transition: background-color 0.3s;
                transition: background-color 0.3s;
                background-clip: content-box;
                border-radius: var(--scrollbar-width);
                background-color: var(--scrollbar-thumb-hover);
            }
    }
/* Skeleton Animation Variables*/
:root {
    --skeleton-animation-duration: 5s;
    --skeleton-bg: linear-gradient(90deg, hsl(220, 05%, 87%) 25%, hsl(220, 05%, 80%) 50%, hsl(220, 05%, 87%) 75%);
    --skeleton-bg: linear-gradient(90deg, rgba(0, 0, 0, 0.05)  25%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 75%);
}
html.dark {
    --skeleton-bg: linear-gradient(90deg, #1a1a1a 25%, #18181a 50%, #1a1a1a 75%);
    --skeleton-bg: linear-gradient(90deg, #242425 20%, #333335 50%, #242425 80%);
}
/* Skeleton Loading*/
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer var(--skeleton-animation-duration) infinite;
    border-radius: var(--radius-xs);
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    /* background: var(--item-bg);*/
    border-radius: var(--radius-sm);
}
@media (max-width: 567px) {
.skeleton-item {
        /* background: var(--item-bg-muted-mobile);*/
}
    }
.balance-list .skeleton-item {
    padding-top: 12.5px;
    padding-bottom: 12.5px;
}
.activity-list .skeleton-item {
    padding-top: 13px;
    padding-bottom: 13px;
}
.skeleton-token-details,
.skeleton-order-info,
.skeleton-activity-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-right: 50px;
}
.skeleton-line {
    height: 12px;
    background: var(--skeleton-bg);
    background-size: 200% 100%;
    animation: shimmer var(--skeleton-animation-duration) infinite;
    border-radius: var(--radius-xs);
}
.skeleton-line.short {  width: 60%; }
.skeleton-line.medium { width: 100%; }
@media (max-width: 567px) {
html.dark .skeleton-icon,
    html.dark .skeleton-line {
            opacity: 0.3;
            --skeleton-bg: linear-gradient(90deg, #fff 25%, #aaa 50%, #fff 75%)
    }
        }
.skeleton-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--skeleton-bg);
    background-size: 200% 100%;
    animation: shimmer var(--skeleton-animation-duration) infinite;
}
@media (max-width: 567px) {
.skeleton-icon {
        width: 32px;
        height: 32px
}
    }
.activity-list .skeleton-icon {
    width: 32px;
    height: 32px;
}
.skeleton-balance-amount {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.skeleton-amount {
    width: 80px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.skeleton-amount .skeleton-line.short {
        margin-top: 4px;
    }
.skeleton-token-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}
/* ============================================*/
/* LOADING SPINNER*/
/* ============================================*/
@keyframes spin {
    to {transform: rotate(360deg);}
}
.spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #0166FF;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}
.button-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid #ffffff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
.button-spinner-red {
    width: 14px;
    height: 14px;
    border: 1.5px solid rgba(220, 38, 38, 0.3);
    border-top: 1.5px solid var(--color-error, rgb(220, 38, 38));;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
/* ============================================*/
/* MODE-SPECIFIC AUTH PROMPTS*/
/* ============================================*/
/* Used in merchant-mode.ts and payment-popup-mode.ts*/
.merchant-connection-message .connection-title, .payment-popup-message .connection-title {
        margin-bottom: 16px;
        color: #333;
        font-weight: 600;
    }
.merchant-connection-message .connection-description, .payment-popup-message .connection-description {
        margin-bottom: 16px;
        color: #666;
        font-size: 14px;
    }
:root {
    --tooltip-z-index: 10000;
    /* --tooltip-display: inline;*/
    /* --tooltip-background: var(--card-bg);*/
    --tooltip-background: #ffffff;
    --tooltip-border-color: var(--neutral-blue-a10);
    --tooltip-divider: var(--neutral-1000-a20);
    --tooltip-description-color: var(--night-400);
    /* --tooltip-text-color: var(--text-primary);*/
    --tooltip-text-color: #1a1a1a;
    --font-size-small: var(--text-xs);
}
.tooltip[role=tooltip] {
    padding: 10px 10px !important;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
    border-radius: 10px !important;
    corner-shape: squircle;
    line-height: 1.2;
}
html.dark .header-nav .nav-tab:hover, html.dark .header-nav .nav-tab.active {
        text-decoration-color: rgba(255,255,255,0.6);
        text-decoration-thickness:1px;
    }
html.dark .drawer {
    background: var(--card-bg);
}
html.dark .drawer .drawer-nav .drawer-nav-item:first-of-type, html.dark .drawer .drawer-nav .drawer-nav-item.contacts, html.dark .drawer .drawer-nav .drawer-nav-item.support {
            border-color: rgba(255,255,255,0.1);
        }
html.dark .drawer .drawer-nav .drawer-nav-item.active {
            background: rgba(0, 0, 0, 0.2);
        }
html.dark .card {
    backdrop-filter: blur(18px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
html.dark .card .card-list .item-button .item-button-inside {
                padding: 0.75rem 0;
            }
html.dark .balance-send-form .confirmation-row, html.dark .balance-offramp-form .confirmation-row {
        border-color: #2c2c2c !important;
    }
html.dark .balance-swap-form .swap-impact-row {
        border-top: 1px solid #2c2c2c !important;
    }
html.dark .modal-wrapper .modal-close:hover {
    background: var(--bg-page);
    color: var(--text-primary);
}
/* end dark condition*/
@media(min-width: 568px) {
html:not(.dark) .header-nav .nav-tab:hover, html:not(.dark) .header-nav .nav-tab.active {
            text-decoration-color: white;
            text-decoration-thickness:2px
    }
        }
html:not(.dark) .drawer {
    background: var(--bg-page);
}
@media(max-width: 567px) {
html:not(.dark) .drawer {
        background: var(--bg-page-mobile)
}
    }
html:not(.dark) .drawer .drawer-nav .drawer-nav-item.active {
            background: #1b3454;
        }
@media (max-width: 567px) {
html:not(.dark) .drawer .drawer-nav .drawer-nav-item.active {
                background: white
        }
            }
html:not(.dark) .card {
    backdrop-filter: blur(18px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
@media (max-width: 567px) {
html:not(.dark) .card {
        box-shadow: none
}
    }
html:not(.dark) .receive-panel .account-id-toggle-wrapper.expanded .account-id-toggle {
            }
html:not(.dark) .receive-panel .account-id-toggle-wrapper .account-id-toggle {
            background: white;
        }
/* end light condition*/
/* ============================================*/
/* THEME SYSTEM*/
/* ============================================*/
/* Light mode*/
:root {

    --color-accent: oklch(52.344% 0.13464 144.188);
    
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --text-muted: #999;
    --text-link: #2e7d32;
    --text-header: rgba(255,255,255,1);
    --text-header-subtle: rgba(255,255,255,0.6);


    /* Semantic variables (reference base colors)*/

    /* ── Elevation (where in the visual stack) ──────────────────────────────────*/
    --bg-page: #f5f7fa;  /* html/body canvas*/
    --bg-page: #fff;  /* html/body canvas*/
    --bg-page: #355546;
    --bg-page: #244d3a;
    --bg-page: #24364d;
    --bg-page: #203f65;
    /* --bg-page: radial-gradient(#0d2549, #203f65);*/

    --bg-page: radial-gradient(#274b78 0%, #123262 99%, #123262 100%);
    --bg-page-mobile: #dbdee3;
    --bg-page-mobile: #e2e4e9;
    --bg-page-mobile: #f2f4f7;
    --bg-page-mobile: hsl(218, 21%, 94%);

    --settings-bg: hsl(218, 21%, 95%);

    

    /* --bg-page-mobile: #fff;*/
    
    --bg-surface: #ffffff;        /* primary content area, cards, modals*/
    --bg-surface-subtle: #f2f2f2;    /* secondary panels, sidebars, split-layout backgrounds*/
    --bg-surface-subtle: hsl(218, 5%, 90%);


    --card-bg: hsl(210, 20%, 95%);
    --card-bg: hsl(218, 21%, 94%); 
    --card-bg: hsl(218, 21%, 93%);

    --card-border: #fff;


    --item-bg: hsl(210, 20%, 95%);
    --item-bg: #f9fafc;
    --item-bg: hsl(220, 20%, 97%);
    --item-bg: hsl(220, 20%, 89%);
    --item-bg: hsl(220, 20%, 91%);
    --item-bg: hsl(220, 17%, 91%);
    /* --item-bg: hsl(218, 21%, 96.5%);*/
    /* --item-bg: transparent;*/
    /* --item-bg: hsl(218, 21%, 96%);*/
    /* --item-bg: hsl(220, 20%, 97%);*/
    /* --item-bg: lch(97.21% 1.08 271.53);*/
    /* --item-bg: lch(91.21% 1.08 271.53);*/
    /* --item-bg: hsl(220, 20%, 97%);*/

    --details-bg: hsl(218, 21%, 96.5%);
    --details-bg: hsl(218, 21%, 97.5%);
    /* --details-bg: transparent;*/



    
    /* --item-bg: #f3f5f7;*/

    --item-bg-mobile: #fff;
    --item-bg-muted: hsl(210, 20%, 94%);
    --item-bg-muted: transparent;
    --item-bg-hovered: var(--bg-surface);
    --item-border: rgba(0,0,0,0.05);



    --modal-bg: var(--bg-surface);
    --modal-bg: #f9fafc;
    --modal-bg: hsl(220, 20%, 97%);
    --modal-bg: var(--card-bg);


    --scrollbar-thumb: #084271;         /* the draggable handle*/
    --scrollbar-thumb: #d4d8de;       /* settings draggable handle*/
    --scrollbar-thumb-hover: #bdc2cb;   /* on :hover*/
    --scrollbar-track: transparent;       /* rail background*/
    --scrollbar-width: 10px;
    --scrollbar-border: 2px solid transparent;


    


    --border-color: #eaeaea;
    --border-color: hsl(0, 0%, 89%);
    --border-color-mobile: rgba(0,0,0,0.15);
 


    --btn-primary-bg: linear-gradient(135deg, oklch(52.344% 0.13464 144.188) 0%, oklch(52.344% 0.13464 144.188) 100%);
    --btn-primary-bg-hover: linear-gradient(135deg, #0166FF 0%, #0052CC 100%);
    --btn-primary-color: #ffffff;

    --btn-secondary-color: #666666;
    --btn-secondary-border: 1px solid #e0e0e0;

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;

}
/* Dark mode (DEFAULT)*/
html.dark {


    --text-primary: hsl(0, 0%, 94%);
    --text-secondary: #a0a0a0;
    --text-muted: #616161;
    --text-link: var(--color-accent);
    --text-header: hsl(0, 0%, 94%); /* rgba(255,255,255,0.7);*/


    /* Semantic variables (reference base colors)*/
    --bg-page: var(--color-dark);
    /* --bg-page: oklch(0.3 0.02 273.19);*/
    /* --bg-page: #171b1f;*/
    /* --bg-page: hsl(220, 20%, 13%);*/
    /* --bg-page: hsl(220, 10%, 13%);*/
    --bg-page: radial-gradient(hsl(220, 10%, 2%), hsl(220, 10%, 2%));
    --bg-page-mobile: hsl(220, 20%, 13%);
    --bg-page-mobile: hsl(220, 10%, 8%);


    --bg-surface: #1e293b;
    --bg-surface: #1a222e;  /* dark-green : #2a4141*/
    --bg-surface: #141516;

    --bg-surface-subtle: color-mix(in srgb, var(--bg-surface), black 35%);   /* secondary panels, sidebars, split-layout */



    --card-bg: hsl(220, 10%, 8%);
    --card-bg: rgba(8, 16, 28, 0.65);
    

    --details-bg: transparent;


    --card-border: rgba(255,255,255,0.09);


    --modal-bg: #1a1f27;
    --modal-bg: hsl(220, 10%, 11%);


    --scrollbar-thumb: rgba(121, 117, 117, 0.1);    /* Settings draggable handle*/
    --scrollbar-thumb-hover: rgba(179, 175, 175, 0.15);   /* on :hover*/
    --scrollbar-track: transparent;       /* the rail background*/


    /* Base colors (single source of truth)*/
    /* --color-accent: oklch(69.848% 0.13278 232.4);*/
    --color-dark: #181d28;

    
    --border-color: #6c6c6c6d;
    --border-color-mobile: rgba(255,255,255,0.2);

    --item-bg: #1e293b;
    --item-bg: #1f2733;
    --item-bg: #222427;
    --item-bg: #1e2022;
    --item-bg: #1d1f21;

    /* --item-bg: #1e293b;*/
    --item-bg-mobile: #1e293b;
    /* --item-bg-mobile: #222427;*/
    --item-bg-muted: #1a1b1e;
    --item-border: rgba(255,255,255,0.05);

    --btn-primary-bg: var(--color-accent);
    --btn-primary-bg-hover: var(--color-accent);
    --btn-primary-color: #0f172a;
    
    --btn-secondary-color: var(--color-accent);
    --btn-secondary-border: 2px solid var(--color-accent);

}
/* ============================================*/
/* TYPOGRAPHY*/
/* ============================================*/
/* Base typography and text styles*/
:root {
    --text-xs:           0.75rem;   /* 12px*/
    --text-sm:           0.875rem;  /* 14px*/
    --text-md:           1rem;      /* 16px (base)*/
    --text-lg:           1.25rem;   /* 20px*/
    --text-xl:           1.5rem;    /* 24px*/
    --text-2xl:          2rem;      /* 32px*/
    --text-3xl:          2.5rem;    /* 40px*/
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 600;
    line-height: 1.2;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }
p {
    margin: 0 0 1rem 0;
    line-height: 1.3;
}
p:last-child {
        margin-bottom: 0;
    }
a {
    color: var(--text-link);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover {
        text-decoration: underline;
    }
code, pre {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 0.875em;
}
/**
 * Wallet Switcher - Header dropdown
 */
.wallet-switcher {
  position: relative;
  margin-right: 12px;
}
.wallet-switcher .wallet-current {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
.wallet-switcher .wallet-current:hover {
      background: var(--hover-bg);
      border-color: var(--color-accent);
    }
.wallet-switcher .wallet-current .wallet-name {
      font-weight: 500;
    }
.wallet-switcher .wallet-current .wallet-role {
      padding: 2px 6px;
      background: var(--badge-bg);
      border-radius: var(--radius-xs);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      opacity: 0.7;
    }
.wallet-switcher .wallet-current .dropdown-arrow {
      transition: transform 0.2s ease;
      opacity: 0.5;
    }
.wallet-switcher .wallet-current .dropdown-arrow.open {
        transform: rotate(180deg);
      }
.wallet-switcher .wallet-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 280px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 1000;
  }
.wallet-switcher .wallet-dropdown .wallet-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 12px 16px;
      background: none;
      border: none;
      border-bottom: 1px solid var(--border-color);
      color: var(--text-primary);
      cursor: pointer;
      transition: background 0.2s ease;
    }
.wallet-switcher .wallet-dropdown .wallet-option:last-child {
        border-bottom: none;
      }
.wallet-switcher .wallet-dropdown .wallet-option:hover {
        background: var(--hover-bg);
      }
.wallet-switcher .wallet-dropdown .wallet-option.selected {
        background: var(--color-accent);
        border-left: 3px solid var(--color-accent);
      }
.wallet-switcher .wallet-dropdown .wallet-option .wallet-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
      }
.wallet-switcher .wallet-dropdown .wallet-option .wallet-info .wallet-name {
          font-weight: 500;
          font-size: 13px;
        }
.wallet-switcher .wallet-dropdown .wallet-option .wallet-info .wallet-principal {
          font-size: 11px;
          font-family: monospace;
          opacity: 0.6;
        }
.wallet-switcher .wallet-dropdown .wallet-option .wallet-role-badge {
        padding: 4px 8px;
        background: var(--badge-bg);
        border-radius: var(--radius-xs);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 600;
      }
.wallet-switcher .wallet-dropdown .wallet-option .wallet-role-badge.own {
          background: var(--color-accent);
          color: white;
        }
/* Mobile responsive*/
@media (max-width: 768px) {
  .wallet-switcher {
    display: none; /* Hide on mobile for now, can add mobile version later*/
  }
}
#auth-section {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 100vh;
    z-index: 9999;




    /* ============================================*/
    /* INFO BOX*/

}
#auth-section .wallet-header {
        position: relative;
        width: 100%;
        height: auto;
        padding-top: 0.9375rem;
    }
@media (max-width: 567px) {
#auth-section .wallet-header {
            padding-top: 0.5rem;
            padding-left: 0.5rem
    }
        }
#auth-section .logo-behind-gradient {
        /* display: none !important;*/
        opacity: 0.9;
        position: absolute;
        top: -8.125rem;
        left: -25rem;
        width: 50rem;
        height: 18.75rem;
        background: radial-gradient(#04080d, transparent 70%, transparent);
    }
@media (max-width: 820px) {
#auth-section .logo-behind-gradient {
            opacity: 0.6
    }
        }
#auth-section .logo {     
        width: 3.25rem;
        height: 3.25rem;
        position: relative;
        margin-top: 0;
    }
@media (max-width: 567px) {
#auth-section .logo {
            width: 3rem;
            height: 3rem
    }
        }
#auth-section .logo-title-container {
        text-align: left;
        display: flex;
        flex-direction: column;
        gap: 0px;
        position: relative;
        z-index: 1;
    }
#auth-section .logo-title-container h1 {
            line-height: 1.1;
            font-size: 1.5rem;
            margin: 0;
            font-weight: 700;
            flex-shrink: 0;
            color: white;
            text-shadow: 0px 0px 2px black;
        }
@media (max-width: 567px) {
#auth-section .logo-title-container h1 {
                font-size: 1.375rem
        }
            }
#auth-section .logo-title-container .logo-tagline {
            font-weight: 300;
            letter-spacing: 0px;
            color: rgb(203, 203, 203);
            color: #bfd8f0;
            text-shadow: 0px 0px 2px black;
            font-size: 1.25rem;
        }
@media (max-width: 567px) {
#auth-section .logo-title-container .logo-tagline {
                font-size: 1.125rem
        }
            }
#auth-section .auth-content {
        position: relative;
        width: 100%;
        text-align: center;
        padding-bottom: 8.75rem;
        transition: padding 1s;
        display: flex;
        height: 100%;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
@media(max-width: 567px) {
#auth-section .auth-content {
            padding-bottom: 6.25rem
    }
        }
@keyframes lineHeightDiscovery {
        from { opacity: 0; line-height: 0; }
        to { opacity: 1; line-height: 1.05; }
    }
@keyframes lineHeightDiscoveryMobile {
        from { opacity: 0; line-height: 0; }
        to { opacity: 1; line-height: 1.15; }
    }
#auth-section .main_title_container {
        margin-bottom: 25px;
        display: none;
    }
#auth-section .main_title_container .main_title {
            font-size: clamp(2.25rem, 6.5vw, 4.375rem);
            font-weight: 800;
            color: var(--text-secondary);
            color: rgba(255,255,255,0.3);
            letter-spacing: -0.03em;
            max-width: 900px;
            transition: font-size 1s;
            animation: lineHeightDiscovery 2s 0.1s ease both;
        }
@media (max-width: 820px) {
#auth-section .main_title_container .main_title {
                font-size: clamp(2.25rem, 6.5vw, 5.5rem);
                animation: lineHeightDiscoveryMobile 2s 0.1s ease both
        }
            }
@media (max-width: 567px) {
            }
#auth-section .main_title_container .main_title em {
                font-size: 104%;
                font-style: normal;
                color:var(--text-primary);
            }
#auth-section .login-button-wrapper {
        animation: scale_95 0.8s 0.4s both;
    }
#auth-section .login-button {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1.125rem;
        
        border-radius: 20px;
        corner-shape: squircle;

        cursor: pointer;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
        padding: 1.625rem 3.125rem;
        cursor: pointer;
        outline: none;
        background: rgba(255, 255, 255, 0.08);
        transition: background-color 0.1s, border-color 0.1s, 
            transform 0.1s, box-shadow 0.1s, backdrop-filter 0.1s;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        margin-bottom: 20px;
        
        animation: pump_button_border 3s infinite;
    }
@keyframes pump_button_border {
            0% {border-color: rgba(255, 255, 255, 0.2); }
            50% {border-color: rgba(255, 255, 255, 0.37); }
            100% {border-color: rgba(255, 255, 255, 0.2); }
        }
#auth-section .login-button:hover {
            backdrop-filter: blur(12px) !important;
        }
#auth-section .login-button:not([disabled]):hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.35) !important;
            transform: translateY(2px) !important;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
#auth-section .login-button:active {
            transform: translateY(0);
        }
@media (max-width: 567px) {
#auth-section .login-button {
            gap: 0.9375rem;
            padding: 1.125rem 1.75rem
    }
            #auth-section .login-button .button-text {
                font-size: 1.125rem;
            }
        }
#auth-section .login-button svg { color:white; width: 1.625rem; }
#auth-section .login-button .button-text {
            color: white;
            font-size: 1.25rem;
            font-weight: 400;
            line-height: 1.2;
            opacity: 0.9;
        }
@media (max-width: 567px) {
#auth-section .login-button .button-text {
                font-size: 1.125rem
        }
            }
#auth-section .login-button[disabled] {
            /* background: rgba(255, 255, 255, 0.05);*/
            transform: translateY(2px) !important;
            backdrop-filter: blur(12px);
        }
#auth-section .login-button[disabled] svg {
                display: none;
            }
#auth-section .login-button[disabled] .button-text {
                opacity: 0.6 !important;
            }
#auth-section .info-box {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
        animation: fade 1s;
    }
#auth-section .info-box .info-item {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.125rem;
            color: rgba(255,255,255,0.45);
            line-height: 1.5;
            animation-fill-mode: both;
        }
#auth-section .info-box .info-item:nth-child(1) { 
                    animation-delay: calc((0.08s * 1) + 0.6s);
                    animation-duration: 1s;
                    animation-name: fade;
                }
#auth-section .info-box .info-item:nth-child(2) { 
                    animation-delay: calc((0.08s * 2) + 0.6s);
                    animation-duration: 1s;
                    animation-name: fade;
                }
#auth-section .info-box .info-item:nth-child(3) { 
                    animation-delay: calc((0.08s * 3) + 0.6s);
                    animation-duration: 1s;
                    animation-name: fade;
                }
#auth-section .info-box .info-item:nth-child(4) { 
                    animation-delay: calc((0.08s * 4) + 0.6s);
                    animation-duration: 1s;
                    animation-name: fade;
                }
#auth-section .info-box .info-item:nth-child(5) { 
                    animation-delay: calc((0.08s * 5) + 0.6s);
                    animation-duration: 1s;
                    animation-name: fade;
                }
@media (max-width: 567px) {
#auth-section .info-box .info-item {
                font-size: 0.875rem
        }
            }
html {
    overflow-x: hidden;
    /* overflow-y: scroll;*/
    font-size: 1rem;
    scrollbar-gutter: stable;
    background: #041021;
}
/* only for landing page*/
@media (max-width: 567px) {
html {
        overflow-y: auto
}
    }
body {
    font-family: 'Outfit', sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--text-primary);
    min-height: 100%;
}
body.loaded {
        background: var(--bg-page);
    }
@media (max-width: 567px) {
body.loaded {
            background: var(--bg-page-mobile)
    }
        }
body.loaded .background-image {
            opacity: 0.4;
            filter: blur(2px);
        }
@media (max-width: 567px) {
body.loaded .background-image {
                opacity: 0;
                opacity: 0.1
        }
            }
.background-image {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 1;
    transition: opacity 6s, filter 6s;
}
@media (max-width: 567px) {
.background-image {
        transition: opacity 3s, filter 3s
}
    }
.background-image img {
        inset: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        -o-object-position: 80% 90%;
           object-position: 80% 90%;
        z-index: -1;
        animation: fadeIn 2s ease-out forwards;
    }
.app-container {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}
main.wallet-content {
    flex: 1;
    padding: 2rem 2rem 0;
    max-width: 86.25rem;
    margin: 0 auto;
    width: 100%;
    transition: padding 1s;
}
@media (max-width: 1367px) {
main.wallet-content {
        padding: 2rem 1.5% 0
}
    }
@media (max-width: 63.9375rem) {
main.wallet-content {
        padding: 2rem 1.5% 0
}
    }
@media (max-width: 51.1875rem) {
main.wallet-content {
        padding: 2rem 1.5% 1.875rem
}
    }
@media (max-width: 567px) {
main.wallet-content {
        padding: 0rem 0 1.875rem
}
    }
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1.5rem;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    transition: gap 0.6s;
}
@media (max-width: 1367px) {
.dashboard-grid {
        gap: 1.4vw
}
    }
@media (max-width: 63.9375rem) {
.dashboard-grid {
        grid-template-columns: 1fr 1fr
}
        .dashboard-grid > *:last-child:nth-child(odd) {
            grid-column: 1 / -1;
        }
    }
@media (max-width: 47.9375rem) {
.dashboard-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: 0
}
    }
.card {
    background: var(--card-bg);
    border-radius: 2.5rem;
    corner-shape: squircle;
    container-type: inline-size;
    border: 1px solid var(--card-border);
    
    position: relative;
    min-height: 32.5rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
@media (min-width: 51.1875rem) {
.card {
        align-self: start
}
    }
@media (max-width: 47.9375rem) {
.card {
        display: none!important
}
        .card.active {
            display: block!important;
        }
    }
@media (max-width: 567px) {
.card {
        border-radius:0;
        padding-top: 0;
        background: transparent;
        border: none
}
    }
/* Only animate on first mount*/
.card.first-mount {
        animation: fade 0.6s;
    }
.card.first-mount .balance-row *, .card.first-mount .order-row *, .card.first-mount .activity-row * {
                animation: fadeIn 0.5s ease 0s both;
            }
.card.first-mount .balance-item:nth-child(1) .token-icon {
                        animation-fill-mode: both;
                        animation-delay: calc((0.04s * 1) - 0.04s);
                        animation-duration: 0.3s;
                        animation-name: scale;
                    }
.card.first-mount .balance-item:nth-child(2) .token-icon {
                        animation-fill-mode: both;
                        animation-delay: calc((0.04s * 2) - 0.04s);
                        animation-duration: 0.3s;
                        animation-name: scale;
                    }
.card.first-mount .balance-item:nth-child(3) .token-icon {
                        animation-fill-mode: both;
                        animation-delay: calc((0.04s * 3) - 0.04s);
                        animation-duration: 0.3s;
                        animation-name: scale;
                    }
.card.first-mount .balance-item:nth-child(4) .token-icon {
                        animation-fill-mode: both;
                        animation-delay: calc((0.04s * 4) - 0.04s);
                        animation-duration: 0.3s;
                        animation-name: scale;
                    }
.card.first-mount .balance-item:nth-child(5) .token-icon {
                        animation-fill-mode: both;
                        animation-delay: calc((0.04s * 5) - 0.04s);
                        animation-duration: 0.3s;
                        animation-name: scale;
                    }
.card.first-mount .balance-item:nth-child(6) .token-icon {
                        animation-fill-mode: both;
                        animation-delay: calc((0.04s * 6) - 0.04s);
                        animation-duration: 0.3s;
                        animation-name: scale;
                    }
.card.first-mount .balance-item:nth-child(7) .token-icon {
                        animation-fill-mode: both;
                        animation-delay: calc((0.04s * 7) - 0.04s);
                        animation-duration: 0.3s;
                        animation-name: scale;
                    }
.card.first-mount .balance-item:nth-child(8) .token-icon {
                        animation-fill-mode: both;
                        animation-delay: calc((0.04s * 8) - 0.04s);
                        animation-duration: 0.3s;
                        animation-name: scale;
                    }
.card.first-mount .balance-item:nth-child(9) .token-icon {
                        animation-fill-mode: both;
                        animation-delay: calc((0.04s * 9) - 0.04s);
                        animation-duration: 0.3s;
                        animation-name: scale;
                    }
.card.first-mount .balance-item:nth-child(10) .token-icon {
                        animation-fill-mode: both;
                        animation-delay: calc((0.04s * 10) - 0.04s);
                        animation-duration: 0.3s;
                        animation-name: scale;
                    }
.card .card_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-shrink: 0;
        padding: 1.25rem 1.5rem 0;
    }
@container (max-width:21.875rem) {
.card .card_header {
            padding: 1.25rem calc(0.625rem + 3.5%) 0
    }
        }
.card .card_header h2 {
            font-size: 1.09375rem;
            font-weight: 800;
            color: var(--text-primary);
            -webkit-user-select: none;
               -moz-user-select: none;
                    user-select: none;
            line-height: 1;
            padding-bottom: 0.625rem;
        }
@media (max-width: 567px) {
.card .card_header h2 {
                font-size: 0.875rem
        }
            }
@media (max-width: 567px) {
.card .card_header {
            display: none !important;
            margin-bottom: 0.75rem;
            min-height: 1.5625rem
    }
        }
.card .card_header .header-selector {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }
.card .card_header .header-selector .separation {
                opacity: 0.2;
                pointer-events: none;
                padding-bottom: 0.6875rem;
            }
.card .card_header .header-selector .selector-option {
                background: transparent;
                border: none;
                padding: 0;
                margin: 0;
                font-size: 1.25rem;
                font-weight: 700;
                cursor: pointer;
                color: var(--text-primary);
                transition: opacity 0.2s, color 0.2s;
                
            }
.card .card_header .header-selector .selector-option h2 {
                    display: flex;
                    align-items: center;
                }
.card .card_header .header-selector .selector-option.muted {
                    opacity: 0.2;
                    font-weight: 400;
                }
.card .card_header .header-selector .selector-option.active {
                    opacity: 1;
                    font-weight: 700;
                }
.card .card_header .header-selector .selector-option:hover:not(.active) {
                    opacity: 0.5;
                }
.card .card_summary {
        padding: 0.3125rem 1.5rem;
        padding-bottom: 1rem;
    }
@container (max-width:21.875rem) {
.card .card_summary {
            padding: 0.9375rem calc(0.625rem + 3.5%) 1rem
    }
        }
@media (max-width: 567px) {
        }
.card .card-list {
        flex:1;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
@media (max-width: 567px) {
.card .card-list {
            gap: 0.375rem;
            padding-bottom: 0.625rem
    }
        }
.card .card-list .item {
            width: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
            border-radius: var(--radius-sm);

            /* GPU acceleration for smoother animations*/
            transform: translateZ(0);
            backface-visibility: hidden;
            
        }
@media (max-width: 567px) {
.card .card-list .item {
                background: var(--item-bg);
                box-shadow: 0px 1px 3px rgba(0,0,0,0.15)
            
        }
            }
.card .card-list .item >button.item-button {
                outline: none;
                padding: 0rem 0.75rem;
                text-align: left;
                transition: padding 0.6s, opacity 0s;
            }
@container (max-width:350px) {
.card .card-list .item >button.item-button {
                    padding: 0rem 3.5%
            }
                }
.card .card-list .item >button.item-button .item-button-inside {
                    display: flex;
                    gap: 0.75rem;
                    padding: 0.6875rem 0;
                    justify-content: space-between;
                    align-items: center;
                }
/* Notice that the border-top is only set on .item-button-inside*/
.card .card-list .item:not(:first-child) .item-button-inside {
                border-top: 1px solid var(--item-border);
            }
@media (max-width: 567px) {
.card .card-list .item.expanded {
                    background: var(--item-bg-hovered);
                    box-shadow: 0px 1px 3px rgba(0,0,0,0)
            }
                }
.card .card-list .item.expanded > button {
                    border-bottom-left-radius: 0;
                    border-bottom-right-radius: 0;
                }
.card .card-list .item.expanded:has(+:hover) {
                    border-bottom-left-radius: 0;
                    border-bottom-right-radius: 0;
                }
.card .card-list .item.expanded:has(+:hover) .item-button-inside {
                        border-color: transparent;
                    }
.card .card-list .item.expanded:has(+:hover) + * .item-button-inside {
                            border-color: transparent !important;
                        }
.card .card-list .item.expanded +:hover {
                    border-top-left-radius: 0;
                    border-top-right-radius: 0;
                }
.card .card-list .item.expanded +:hover div.item-button-inside {
                        border-color: var(--item-border) !important;
                    }
.card .card-list .item:hover:has(+.expanded) {
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
            }
.card .card-list .item:hover:has(+.expanded) .item-button-inside {
                    border-color: var(--card-bg) !important;
                }
.card .card-list .item:hover:has(+.expanded) +.expanded{
                    border-top-left-radius: 0;
                    border-top-right-radius: 0;
                }
.card .card-list .item:hover:has(+.expanded) +.expanded .item-button-inside {
                        border-color: var(--item-border) !important;
                    }
.card .card-list .item:hover:not(.empty-balance), 
            .card .card-list .item.expanded {
                background: var(--item-bg-hovered);
            }
.card .card-list .item:hover:not(.empty-balance) .item-button-inside, .card .card-list .item.expanded .item-button-inside {
                    border-color: transparent !important;
                }
.card .card-list .item:hover:not(.empty-balance) + * .item-button-inside, .card .card-list .item.expanded + * .item-button-inside {
                    border-color: transparent !important;
                }
/* Empty State*/
.card .empty-state {
        text-align: center;
        padding: 2.5rem 1.25rem;
        color: var(--text-secondary);
        animation: fade 0.6s;
    }
@media (max-width: 567px) {
.card .empty-state {
            padding: 1.5625rem 1.25rem 1.25rem;
            background: var(--surface-bg);
            border-radius: 2.5rem;
            corner-shape: squircle
    }
        }
.card .empty-state p {
            font-size: 0.875rem;
            margin-bottom: 0.5rem;
            text-wrap: balance;
            line-height: 1.2;
        }
.card .empty-state p.error {
                color: #ff6b6b;
            }
.card .empty-state a {
            display: inline-block;
            padding: 0.3125rem 0;
            font-weight: 500;
        }
.card .empty-state .empty-hint {
            font-size: 0.8125rem;
            color: #999;
        }
/* html:not(.dark) .card .empty-state {*/
/*     background: white;*/
/* }*/
#orders_card,
#activity_card {
    max-height: calc(100vh - 4.375rem - 3.75rem);
}
@media (max-width: 567px) {
#orders_card,
#activity_card {
        max-height: 100%
}
    }
@media (min-width: 568px) {
#orders_card .card-list, #activity_card .card-list {
            padding-right: 0px
    }
        }
/* Scrollbar for higher than mobile*/
@media (min-width: 568px) {
#orders_card .card-list, #activity_card .card-list {
            scrollbar-gutter: stable
    }

            #orders_card .card-list::-webkit-scrollbar, #activity_card .card-list::-webkit-scrollbar {
                width: var(--scrollbar-width);
            }
            
            #orders_card .card-list::-webkit-scrollbar-track, #activity_card .card-list::-webkit-scrollbar-track {
                background: var(--scrollbar-track);
                border-radius: var(--radius-xs);
            }
            
            #orders_card .card-list::-webkit-scrollbar-thumb, #activity_card .card-list::-webkit-scrollbar-thumb {
                background-color:  transparent;       /* the draggable handle*/
                border-radius: var(--scrollbar-width);
                border: var(--scrollbar-border);
                background-clip: content-box;
                -webkit-transition: background-color 0.3s;
                transition: background-color 0.3s;
            }
                
                #orders_card .card-list::-webkit-scrollbar-thumb:hover, #activity_card .card-list::-webkit-scrollbar-thumb:hover {
                    -webkit-transition: background-color 0.3s;
                    transition: background-color 0.3s;
                    background-clip: content-box;
                    background-color: var(--scrollbar-thumb-hover);
                }
        }
/* needed to adjust the scrollbar top/bottom transparent border*/
#orders_card .card-list >div:first-child, #activity_card .card-list >div:first-child { 
            margin-top: 0.25rem;
        }
@media (max-width: 567px) {
#orders_card .card-list >div:first-child, #activity_card .card-list >div:first-child {
                margin-top: 0
        }
            }
#orders_card .card-list >div:last-child, #activity_card .card-list >div:last-child { 
            margin-bottom: 0.25rem;
        }
@media (max-width: 567px) {
#orders_card .card-list >div:last-child, #activity_card .card-list >div:last-child {
                margin-bottom: 0
        }
            }
.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.summary-item .summary-label {
        transform: translateY(0.0625rem);
        font-size: 0.875rem;
        color: var(--text-secondary);
    }
@media (max-width: 567px) {
.summary-item .summary-label {
            font-size: 0.875rem;
            font-size: 3.8vw
    }
        }
.summary-item .summary-total {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-primary);
    }
@media (max-width: 567px) {
.summary-item .summary-total {
            font-size: 1.25rem;
            padding-right: 0.0625rem
    }
        }
.refresh-button {
    background: transparent;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.25;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    flex-shrink: 0;
    outline:none;
    border-radius:50%;

    position: absolute;
    top: 0.4375rem;
    right: 0.3125rem;
}
.refresh-button svg {
        width: 1.125rem;
        height: 1.125rem;
        fill: var(--btn-secondary-color);
        display: block;
    }
.refresh-button:hover {
        opacity: 0.8;
    }
.refresh-button.loading {
        pointer-events: none;
        opacity: 1;
    }
.refresh-button.loading svg {
            animation: spin 0.8s linear infinite;
        }
@media (max-width: 567px) {
.refresh-button {
        width: 1.5625rem;
        height: 1.5625rem
}
        .refresh-button svg {
            width: 1.125rem;
            height: 1.125rem;
        }
    }
html.dark .refresh-button svg {
        fill: rgba(255,255,255,0.5);
    }
.load-more-container {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
}
.load-more-container .load-more-button {
        padding: 0.875rem 1.5rem;
        background: var(--button-bg);
        color: var(--text-secondary);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        font-size: var(--text-sm);
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        align-items: center;
        gap: 0.5rem;
        display: block;
        margin: 1rem auto;
    }
@media (max-width: 567px) {
.load-more-container .load-more-button {
            border-color:var(--border-color-mobile)
    }
        }
.load-more-container .load-more-button:hover:not(:disabled) {
            background: var(--button-hover-bg);
            border-color: var(--primary-color);
        }
.load-more-container .load-more-button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
.load-more-container .load-more-button.loading {
            pointer-events: none;
        }
.load-more-container .load-more-button .spinner {
            width: 0.875rem;
            height: 0.875rem;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-top-color: currentColor;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
        }
/* ============================================*/
/* WALLET HEADER*/
/* ============================================*/
.wallet-header {
    color: white;
    height: 4.375rem;
    align-items: center;
    grid-gap: 1.5rem;
    gap: 1.5rem;
    transition: padding 1s;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    z-index: 11;
    
    padding-left: 2rem;
    padding-right: 2rem;
}
@media (max-width: 1367px) {
.wallet-header {
        padding-left: 1.5%;
        padding-right: 1.5%
}
    }
@media (max-width: 1023px) {
.wallet-header {
        background-color: var(--bg-page);
        padding-left: 1.875rem;
        padding-right: 1.875rem;
        position: sticky;
        top: 0
}
    }
@media (max-width: 819px) {
.wallet-header {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.5rem
}
    }
@media (max-width: 767px) {
.wallet-header {
        height: auto
}
    }
@media (max-width: 567px) {
.wallet-header {
        /* gap: 0;*/
        /* background-color: var(--bg-page-mobile);*/
        padding-left: 0%;
        padding-right: 0%;
        color: var(--text-primary)
}
    }
.wallet-header .logo-button {
        background: none;
        border: none;
        padding: 0.75rem;
        padding-left: 0;
        cursor: pointer;
        color: inherit;
        justify-self: start;
        display: flex;
        align-items: center;
        gap: 0.875rem;
        transition: opacity 0.3s, padding 0.6s;
        height: 4.375rem;
        outline:none;
    }
@media (max-width: 567px) {
.wallet-header .logo-button {
            height: 3.75rem;
            padding-left: 0.5625rem
    }
        }
.wallet-header .logo-button:hover {
            opacity: 0.8;
        }
.wallet-header .logo-button .logo {
            width: 1.875rem;
            height: 1.875rem;
        }
@media (max-width: 567px) {
.wallet-header .logo-button .logo {
                margin-top: 8px;
                height: 2.5rem;
                width: 2.5rem
        }
            }
.wallet-header .logo-button .logo-title-container {
            text-align: left;
        }
.wallet-header .logo-button .logo-title-container h1 {
                font-size: 1.25rem;
                margin: 0;
                font-weight: 600;
                flex-shrink: 0;
            }
/* display: none !important;*/
@media (max-width: 567px) {
.wallet-header .logo-button .logo-title-container h1 {
                    /* font-size: rem(20);*/
                    /* font-size: rem(16);*/
                    /* font-weight: 700;*/
                    /* font-size: 6vw;*/
                    /* display: none;*/
            }
                }
.wallet-header .logo-button .logo-title-container .logo-tagline {
                font-weight: 300;
                opacity: 0.65;
                font-size: 0.9375rem;
            }
html.dark .logo-button {
        opacity: 0.8 !important;
    }
@media (max-width: 567px),
        &:hover {
html.dark .logo-button {
            opacity: 1 !important
    }
        }
.header-nav {
    display: flex;
    gap: 0.25rem;
    flex: 0;
    height: 100%;
}
@media (max-width: 820px) {
.header-nav {
        display: none
}
    }
@media (max-width: 767px) {
.header-nav {
        display: flex;
        flex: 1 1 100%;
        order: 3;
        gap: 0;
        padding: 0 0.75rem;
        margin-top: 0;
        align-items: center;
        transition: color 0s
}
    }
.header-nav .nav-tab {
        background: none;
        border: none;
        padding: 0.5rem 1.125rem;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--text-header);
        cursor: pointer;
        border-radius: var(--radius-sm);
        transition: color 0.2s;
        white-space: nowrap;
        outline: none;
    }
.header-nav .nav-tab:hover, .header-nav .nav-tab.active {
            text-decoration: underline;
            text-underline-offset: 8px;
        }
/* Target first mobile tab (directly after desktop tabs) */
.header-nav .nav-tab.desktop-only + .mobile-only {
            padding-left: 0 !important;
        }
@media (max-width: 819px) {
.header-nav .nav-tab {
            flex: 0 0 auto;
            padding: 0.625rem 0.75rem 1.25rem;
            font-size: 1.125rem;
            
            text-align: center;
            background: none;
            border-bottom: 2px solid transparent;
            border-radius: 0;
            /* color: white !important;*/
            background: none !important
    }
            .header-nav .nav-tab.active {
                color: white;
                text-decoration-color: white;
            }
                .header-nav .nav-tab.active span {
                    text-decoration: underline;
                    text-decoration-thickness:1.5px;
                    text-underline-offset: 8px;
                }
        }
@media (max-width: 567px) {
.header-nav .nav-tab {
            text-decoration-color: var(--text-primary);
            color: var(--text-primary);
            font-size: 4.5vw
    }
            .header-nav .nav-tab:hover, .header-nav .nav-tab.active {
                color: var(--text-primary);
            }
                .header-nav .nav-tab:hover span, .header-nav .nav-tab.active span {
                    color: var(--text-primary);
                    text-decoration-color: var(--text-primary) !important;
                }
        }
@media (max-width: 819px) {
.header-nav .nav-tab.desktop-only {
                display: none
        }
            }
/* Desktop: hide mobile tabs*/
.header-nav .nav-tab.mobile-only {
            display: none;
        }
@media (max-width: 819px) {
.header-nav .nav-tab.mobile-only {
                display: flex
        }
            }
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.8125rem;
    height: 2.1875rem;
    justify-self: end;
}
@media (max-width: 820px) {
.header-actions {
        gap: 0.5rem;
        display: none !important
}
    }
.header-actions button {
        height: 100%;
        border: 1px solid rgba(255,255,255,0.2);
        transition: border-color 0.2s;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        color: var(--text-header);
        border-radius: var(--radius-sm);
        font-size: 0.8125rem;
        outline: none;
        backdrop-filter: blur(8px);
    }
.header-actions button:hover {
            border: 1px solid var(--text-header);
        }
.header-actions .support-button {
        padding: 0.5625rem 0.9375rem 0.5625rem;
    }
.header-actions .theme-toggle {
        background: transparent;
        padding: 0 0.9375rem 0 0.8125rem;
        align-items: center;
        gap: 8px;
    }
@media (max-width: 1226px) {
.header-actions .theme-toggle {
            padding: 0.5625rem 0.8125rem 0.5625rem
    }
            .header-actions .theme-toggle span {
                display: none;
            }
        }
.header-actions .theme-toggle svg {
            width: 1rem;
            height: 1rem;
            flex-shrink: 0;
        }
.header-actions .logout-button {
        background: transparent;
        padding: 0.4375rem 0.9375rem 0.5625rem;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        transition: border-color 0.2s, background 0.2s;
    }
.header-actions .logout-button:hover {
            /* color: #ff4444;*/
            /* background: var(--border-color);*/
            border: 1px solid rgba(255,255,255,1);
        }
@media (max-width: 567px) {
.header-actions .logout-button {
            width: 3rem;
            height: 3rem;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: -4.5px;
            border: none
    }
        }
@media (max-width: 567px) {
.header-actions .logout-button .logout-text {
                display: none
        }
            }
.header-actions .logout-button .logout-icon {
            display: none;
        }
@media (max-width: 567px) {
.header-actions .logout-button .logout-icon {
                width: 1.25rem;
                height: 1.25rem;
                display: block
        }
            }
.header-actions .logout-button svg {
            width: 1.25rem;
            height: 1.25rem;
            fill: currentColor;
            transform: translateY(1px);
        }
@media (max-width: 567px) {
.header-actions .logout-button svg {
                width: 100%;
                height: 100%;
                fill:white
        }
            }
/* ============================================*/
/* LOADING SECTION (Pre-Dashboard Spinner)*/
/* ============================================*/
#post-login-loading-section {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    z-index: 9999;
}
@keyframes loader_show_items {
        0% {transform: translate(0,-100%);}
        100% {transform: translate(0,0);}
    }
#post-login-loading-section .logo-button {
        animation: loader_show_items 1s forwards;
    }
#post-login-loading-section .header-nav {
        animation: loader_show_items 1s 0.2s both;
    }
@keyframes loader_show_header_actions {
        0% {transform: translate(0,-160%);}
        100% {transform: translate(0,0);}
    }
#post-login-loading-section .header-actions {
        animation: loader_show_header_actions 1s 0.4s both;
    }
#post-login-loading-section .spinner_container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
@keyframes loader_show_spinner {
        0% {transform: scale(10) rotate(0deg);}
        100% {transform: scale(1) rotate(-180deg);}
    }
#post-login-loading-section .post-login-spinner {
        width: 48px;
        height: 48px;
        border: 4px solid rgba(255, 255, 255, 0.1);
        border-top-color: #ffffff;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        /* width: 130px;*/
        /* height: 130px;*/
        /* border: 2px solid rgba(255, 255, 255, 0.05);*/
        /* border-top-color: rgba(255, 255, 255, 0.3);*/
        /* border-radius: 50%;*/
        /* animation: loader_show_spinner 5s forwards;*/
        /* position: fixed;*/
    }
/* AUTHORIZATION MODAL =========================*/
/* Merchant connection authorization screen*/
.authorization-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
.authorization-modal .authorization-content {
        background: #ffffff;
        border-radius: 16px;
        max-width: 480px;
        width: 90%;
        padding: 32px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    }
.authorization-modal .authorization-title {
        margin: 0 0 24px 0;
        font-size: 24px;
        color: #333;
    }
.authorization-modal .authorization-site-info {
        background: #f5f5f5;
        padding: 16px;
        border-radius: var(--radius-md);
        margin-bottom: 20px;
    }
.authorization-modal .site-info-row {
        font-size: 14px;
        color: #666;
        margin-bottom: 8px;
    }
.authorization-modal .site-info-row:last-child {
            margin-bottom: 0;
        }
.authorization-modal .site-info-row strong {
            font-weight: 600;
        }
.authorization-modal .authorization-permissions {
        margin-bottom: 20px;
    }
.authorization-modal .permissions-intro {
        font-size: 14px;
        color: #666;
        margin-bottom: 12px;
    }
.authorization-modal .permissions-intro strong {
            font-weight: 600;
        }
.authorization-modal .permissions-list {
        font-size: 14px;
        color: #666;
        margin-left: 20px;
    }
.authorization-modal .permissions-list li {
            margin-bottom: 8px;
        }
.authorization-modal .authorization-principal-box {
        background: #e3f2fd;
        border: 1px solid #90caf9;
        padding: 12px;
        border-radius: var(--radius-sm);
        margin-bottom: 20px;
    }
.authorization-modal .principal-label {
        font-size: 12px;
        color: #1565c0;
        font-weight: 600;
        margin-bottom: 4px;
    }
.authorization-modal .principal-value {
        font-size: 11px;
        color: #0d47a1;
        font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
        word-break: break-all;
    }
.authorization-modal .authorization-actions {
        display: flex;
        gap: 12px;
    }
.authorization-modal .btn-cancel-connection {
        flex: 1;
        background: transparent;
        border: 1px solid #e0e0e0;
        padding: 12px 24px;
        font-size: 16px;
        font-weight: 500;
        color: #666;
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: all 0.2s;
    }
.authorization-modal .btn-cancel-connection:hover {
            background: #f5f5f5;
            border-color: #999;
        }
.authorization-modal .btn-authorize-connection {
        flex: 1;
        background: linear-gradient(135deg, #0166FF 0%, #0052CC 100%);
        border: none;
        padding: 12px 24px;
        font-size: 16px;
        font-weight: 600;
        color: #ffffff;
        border-radius: var(--radius-md);
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(1, 102, 255, 0.3);
        transition: all 0.2s;
    }
.authorization-modal .btn-authorize-connection:hover {
            transform: translateY(2px);
            box-shadow: 0 6px 16px rgba(1, 102, 255, 0.4);
        }
.authorization-modal .btn-authorize-connection:active {
            transform: translateY(0);
        }
:root {
    --color-received: #3a873d;
    --color-sent: #ff9800;
    --color-swapped: #217ac1;
    --color-withdrew: #5e5e63;
}
html.dark {
    --color-received: #255b27;
    --color-sent: #d08009;
    --color-swapped: #1a639e;
    --color-withdrew: #5e5e63;
}
.activity-filters {
    display: flex;
    padding: 0.375rem 1.375rem 0.5rem;
    
    flex-wrap: wrap;
    /* background: var(--card-bg);*/
    position: relative;
}
@container (max-width:350px) {
.activity-filters {
        padding: 16px calc(10px + 3.5%) 8px
}
    }
@media (max-width: 567px) {
.activity-filters {
        background: none;
        padding: 0 0.75rem;
        margin-bottom: 18px;
        gap: 5px;
        gap: 0
}
    }
.activity-filters .filter-chip {
        padding: 0.5rem 0.625rem;
        border: 1px solid rgba(0,0,0,0.08);
        border-color: transparent;
        background: transparent;
        background: var(--details-bg);
        font-size: 0.75rem;
        color:var(--text-secondary);
        font-weight: 400;
        cursor: pointer;
        box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
    }
/* transition: padding 0.6s;*/
@container (width < 340px) {
.activity-filters .filter-chip {
            padding: 8px 2.9%
    }
        }
/* corner-shape: squircle;*/
.activity-filters .filter-chip:not(.all) {
            border-left:none;
        }
.activity-filters .filter-chip:first-child {
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;
        }
.activity-filters .filter-chip:last-child {
            border-top-right-radius: 6px;
            border-bottom-right-radius: 6px;
        }
@media (max-width: 567px) {
.activity-filters .filter-chip {
            border-color: var(--border-color-mobile);
            font-size: 3.5vw;
            padding: 11px 12px
    }
        }
.activity-filters .filter-chip:hover {
            transition: color 0.2s;
            color: var(--text-primary);
            background: var(--button-hover-bg);
            background: var(--item-bg-hovered);
            box-shadow: 0px 1px 2px rgba(0,0,0,0.05);
        }
/* border-color: rgba(0,0,0,0.6);*/
.activity-filters .filter-chip:hover.all {
                transition: border-color 0.2s;
                /* border-color: var(--text-secondary);*/
            }
@media (max-width: 567px) {
                .activity-filters .filter-chip:hover:not(:first-child) {
                    color:var(--text-secondary);
                    border-color: var(--border-color-mobile);
                }
            }
.activity-filters .filter-chip:disabled {
            opacity: 0.4;
            cursor: not-allowed;
            pointer-events: none;
        }
/* &:hover:not(:first-child),*/
.activity-filters .filter-chip.active:not(:first-child) {
            transition: border-color 0s;
            border-color: var(--primary-color);
            background: var(--color-accent);
            color: var(--text-primary);
            color:white;
            border-color: var(--color-accent);
        }
.activity-filters .filter-chip.active:not(:first-child).sent {
                background: var(--color-sent);
                border-color: var(--color-sent);
            }
.activity-filters .filter-chip.active:not(:first-child).received {
                background: var(--color-received);
                border-color: var(--color-received);
            }
.activity-filters .filter-chip.active:not(:first-child).swapped {
                background: var(--color-swapped);
                border-color: var(--color-swapped);
            }
.activity-filters .filter-chip.active:not(:first-child).withdrew {
                background: var(--color-withdrew);
                border-color: var(--color-withdrew);
            }
@media(max-width: 567px) {
.activity-list {
        /* max-height: none;*/
        /* padding-right: 0;*/
}
    }
.activity-row {
    width: 100%;
    border-radius: var(--radius-sm);
    padding: 14px 12px 14px 10px;
    cursor: pointer;
    background: transparent;
    border: none;
    text-align: left;

}
@container (width < 360px) {
.activity-row {
        padding: 12px 8px;
        gap:10px

}
    }
.activity-row .activity-icon {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 600;
        flex-shrink: 0;
    }
.activity-row .activity-icon svg {
            width: 1.25rem;
            height: 1.25rem;
        }
.activity-row .activity-icon.receive {
            background: rgba(76, 175, 80, 0.1);
        }
.activity-row .activity-icon.receive svg { fill: var(--color-received); }
.activity-row .activity-icon.receive svg { fill: #4caf50}
.activity-row .activity-icon.send {
            background: rgba(255, 152, 0, 0.1);
        }
.activity-row .activity-icon.send svg { fill: var(--color-sent); }
.activity-row .activity-icon.send svg { fill: #ff9800; }
.activity-row .activity-icon.swap {
            background: rgba(33, 150, 243, 0.1);
            padding: 6px;
        }
.activity-row .activity-icon.swap svg { 
                fill: var(--color-swapped); 
                fill: #2196f3;
                width: 20px;
                height: 20px;
            }
.activity-row .activity-icon.withdrawal {
            background: var(--border-color);
        }
.activity-row .activity-icon.withdrawal svg { fill: var(--text-primary); }
.activity-row .activity-details {
        flex: 1;
        min-width: 0;
        gap: 4px;
        display: flex;
        flex-direction: column;

    }
.activity-row .activity-details.swap {
            gap:5px;
        }
.activity-row .activity-details .activity-details-main {
            display: flex;
            align-items: center;
            gap: 6px;

        }
.activity-row .activity-details .activity-details-main .activity-type {
                font-size: var(--text-sm);
                font-weight: 500;
            }
.activity-row .activity-details .activity-details-main .activity-token {
                font-size: 0.6875rem;
                color: var(--text-secondary);
                padding-top: 2px;
            }
.activity-row .activity-details .activity-details-time {
            font-size: var(--text-xs);
            color: #999;
            color: var(--text-muted);
            color: var(--text-secondary);

        }
.activity-row .activity-amounts {
        font-weight: 600;
        text-align: right;
        display: flex;
        flex-direction: column;
        gap: 3px;
        align-items: flex-end;
    }
.activity-row .activity-amounts.positive {
            color: #34a853;
            /* color: var(--color-received);*/
        }
.activity-row .activity-amounts.negative {
        }
.activity-row .activity-amounts.swap {
            font-size: 12px;
            color: var(--text-secondary);
            gap: 6px;
        }
.activity-row .activity-amounts .token-line {
            display: flex;
            align-items: center;
            gap: 6px;
        }
.activity-row .activity-amounts .token-line .token-amount {
                font-size: 0.875rem;
            }
.activity-row .activity-amounts .token-line .token-icon {
                width: 1.125rem;
                height: 1.125rem;
                border-radius: 50%;
                -o-object-fit: cover;
                   object-fit: cover;
            }
.activity-row .activity-amounts .fiat-value {
            font-size: 11px;
            color: #999;
            font-weight: 400;
        }
/* Expanded activity details*/
.activity-details-expanded {
    padding: 0rem 1.25rem 0.6875rem 0.625rem;
    
    /* Performance optimizations for smooth animation*/
    will-change: height;
    transform: translateZ(0);
    backface-visibility: hidden;
    contain: layout;
}
.activity-details-expanded .detail-row {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 0.4375rem 0;
        gap: 0.9375rem 0;
        font-size: 0.75rem;
    }
.activity-details-expanded .detail-row:first-child {
            padding-top: 0;
        }
.activity-details-expanded .detail-row.detail-full-date {
            justify-content: flex-end;
        }
.activity-details-expanded .detail-row .detail-label {
            /* opacity: 0.8;*/
            font-weight: 300;
            font-size: 0.75rem;
            color: var(--text-secondary);
        }
.activity-details-expanded .detail-row .detail-value.order-payment {
            font-weight: 500;
        }
.activity-details-expanded .detail-row .detail-value-full-date {
            opacity: 0.8;
            font-weight: 300;
            font-size: 0.75rem;
            color: var(--text-secondary);
        }
.activity-details-expanded .detail-row .detail-value.contact-name .contact-icon {
                color: var(--color-accent);
                margin-right: 2px;
            }
.activity-details-expanded .detail-row .detail-value.contact-name .contact-nickname {
                font-weight: 500;
            }
.activity-details-expanded .detail-row.detail-links {
            padding-top: 0;
            padding-bottom: 0;
            justify-content: flex-start;
            -webkit-user-select: none;
               -moz-user-select: none;
                    user-select: none;
        }
.activity-details-expanded .detail-row.detail-links .detail-link:last-child {
                margin-left: auto;
            }
.activity-details-expanded .detail-row .swap-detail-token-icon {
            display: none !important;
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            -o-object-fit: cover;
               object-fit: cover;
            vertical-align: middle;
            margin: 0 0.25rem;
            margin-top: -1px;
            transform: translateY(1px);
            display: inline-block;
        }
.activity-details-expanded .detail-row.swap-spent {
            font-weight: 500;
        }
.activity-details-expanded .detail-row.swap-spent .swap-spent-fiat {
                color: #999;
                color: var(--text-secondary);
                font-weight: 300;
                margin-left: 0.25rem;
                font-size: 0.75rem;
            }
.activity-details-expanded .detail-row.swap-rate {
            padding-top: 0.4375rem;
            padding-bottom: 0.4375rem;
            color: var(--text-secondary);
        }
.activity-details-expanded .detail-row.swap-meta {
            font-size: 0.75rem;
            display: flex;
            gap: 0.375rem;
            align-items: center;
            justify-content: flex-end;
            color: var(--text-secondary);
        }
.activity-details-expanded .detail-row.swap-meta .swap-via {
                position: relative;
            }
.activity-details-expanded .detail-row.swap-meta .swap-via .dex-logo {
                    width: 0.875rem;
                    height: 0.875rem;
                    display: inline-block;
                    margin-right: 0.1875rem;
                    transform: translateY(0.125rem);
                    position: absolute;
                    top: -2.5px;
                    left: -20px;
                    display: none !important;
                }
.activity-details-expanded .detail-row.swap-meta .swap-separator {
                opacity: 0.5;
                transform: translateY(1px);
            }
.activity-details-expanded .detail-link {
        font-size: 0.75rem;
        color: var(--text-link);
        text-decoration: none;
        font-weight: 500;
        transition: color 0.2s;
        text-align: right;
        padding: 0.4375rem 0;
        display: flex;
        position: relative;
        outline:none;
    }
.activity-details-expanded .detail-link svg {
            width: 0.6875rem;
            height: 0.75rem;
            margin-left: 2px;
        }
.activity-details-expanded .detail-link:after {
            content:"";
            position: absolute;
            bottom: 5px;
            left: 0;
            width: 0%;
            height: 1px;
            background: var(--text-link);
            opacity: 0;
        }
.activity-details-expanded .detail-link:hover:after {
                opacity: 0.8;
                width: 100%;
            }
.status-pending {
    color: #f59e0b;
}
.balance-list::-webkit-scrollbar {
        width: 0.5rem;
    }
.balance-list::-webkit-scrollbar-track {
        background: transparent;
        border-radius: var(--radius-xs);
    }
.balance-list::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: var(--radius-xs);
    }
.balance-list::-webkit-scrollbar-thumb:hover {
            background: #9ca3af;
        }
.balance-list .balance-item.expanded {
            z-index: 10;
        }
.balance-list .balance-item.empty-balance .item-button {
                cursor: default;
                opacity: 0.11;
            }
@media (max-width: 567px) {
.balance-list .balance-item.empty-balance .item-button {
                    opacity: 0.3
            }
                }
.balance-list .balance-item:hover:not(.empty-balance) .item-button {
                opacity: 1 !important;
            }
.balance-list.one-item-expanded .balance-item:not(.expanded):not(.empty-balance) .item-button {
                opacity: 0.6;
            }
.balance-list.one-item-expanded.one-item-on-action .balance-item:not(.expanded):not(.empty-balance) .item-button {
                opacity: 0.35;
            }
.balance-row .token-info {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
.balance-row .token-info .token-amount {
            font-size: 0.75rem;
            -webkit-user-select: none;
               -moz-user-select: none;
                    user-select: none;
        }
@media (max-width: 567px) {
.balance-row .token-info .token-amount {
                font-size: 3.2vw
        }
            }
.balance-row .token-icon {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
    }
@media (max-width: 567px) {
.balance-row .token-icon {
            width: 2rem;
            height: 2rem
    }
        }
.balance-row .token-details h3 {
            font-size: 1rem;
            font-weight: 600;
        }
@media (max-width: 567px) {
.balance-row .token-details h3 {
                font-size: 4vw
        }
            }
.balance-row .token-balance {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
.balance-row .token-balance .balance-amount {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }
.balance-row .token-balance .balance-amount .fiat-value {
                font-size: 1.0625rem;
                font-weight: 600;
            }
@media (max-width: 567px) {
.balance-row .token-balance .balance-amount .fiat-value {
                    font-size: 1rem
            }
                }
.balance-row .token-balance .balance-amount .price-change {
                font-size: 0.75rem;
                font-weight: 500;
                padding-top: 0.125rem;
            }
.balance-row .token-balance .balance-amount .price-change.positive {color: #10b981;}
.balance-row .token-balance .balance-amount .price-change.negative {color: #ef4444;}
@media (max-width: 567px) {
.balance-row .token-balance .balance-amount .price-change {
                    font-size: 0.6875rem
            }
                }
.balance-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0.5rem;
    gap: 0.5rem;
    padding: 0.625rem 0.9375rem 1rem;
}
@media (max-width: 567px) {
.balance-actions {
        gap: 5px;
        padding: 0.875rem 0.625rem
}
    }
.balance-actions .action-btn {
        background: var(--details-bg);
        color: var(--text-primary);
        border: 1px solid var(--border-color);
        padding: 0.75rem 1.25rem;
        font-size: var(--text-sm);
        font-weight: 500;
        cursor: pointer;
        border-radius: var(--radius-xs);
    }
.balance-actions .action-btn:hover {
            transition: all 0.2s;
            border-color: var(--text-muted);
        }
.balance-actions .action-btn:active {
            transform: scale(0.98);
        }
@media (max-width: 567px) {
.balance-actions .action-btn {
            height: 3rem;
            font-size: 1rem
    }
        }
.balance-send-form,
.balance-swap-form,
.balance-offramp-form {
    padding: 0.625rem 0.9375rem 0.9375rem;
}
.balance-send-form form, .balance-swap-form form, .balance-offramp-form form {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
.balance-send-form .swap-field .label-wrapper, .balance-swap-form .swap-field .label-wrapper, .balance-offramp-form .swap-field .label-wrapper {
            min-width: 24%;
        }
.balance-send-form .send-field .label-wrapper, .balance-swap-form .send-field .label-wrapper, .balance-offramp-form .send-field .label-wrapper {
            min-width: 26%;
        }
.balance-send-form .swap-field,
    .balance-send-form .send-field,
    .balance-swap-form .swap-field,
    .balance-swap-form .send-field,
    .balance-offramp-form .swap-field,
    .balance-offramp-form .send-field {
        display: flex;
        align-items: flex-start;
    }
.balance-send-form .swap-field .label-wrapper, .balance-send-form .send-field .label-wrapper, .balance-swap-form .swap-field .label-wrapper, .balance-swap-form .send-field .label-wrapper, .balance-offramp-form .swap-field .label-wrapper, .balance-offramp-form .send-field .label-wrapper {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: center;
            gap: 0.125rem;
            flex-shrink: 0;
            padding-right: 0.625rem;
            min-height: 2.75rem;
        }
@media (max-width: 567px) {
.balance-send-form .swap-field .label-wrapper, .balance-send-form .send-field .label-wrapper, .balance-swap-form .swap-field .label-wrapper, .balance-swap-form .send-field .label-wrapper, .balance-offramp-form .swap-field .label-wrapper, .balance-offramp-form .send-field .label-wrapper {
                height: 3rem
        }
            }
.balance-send-form .swap-field .label-wrapper.label-wrapper-amount, .balance-send-form .send-field .label-wrapper.label-wrapper-amount, .balance-swap-form .swap-field .label-wrapper.label-wrapper-amount, .balance-swap-form .send-field .label-wrapper.label-wrapper-amount, .balance-offramp-form .swap-field .label-wrapper.label-wrapper-amount, .balance-offramp-form .send-field .label-wrapper.label-wrapper-amount {
            min-height: 2.5rem;
        }
@media (max-width: 567px) {
.balance-send-form .swap-field .label-wrapper.label-wrapper-amount, .balance-send-form .send-field .label-wrapper.label-wrapper-amount, .balance-swap-form .swap-field .label-wrapper.label-wrapper-amount, .balance-swap-form .send-field .label-wrapper.label-wrapper-amount, .balance-offramp-form .swap-field .label-wrapper.label-wrapper-amount, .balance-offramp-form .send-field .label-wrapper.label-wrapper-amount {
                height: 3rem
        }
            }
.balance-send-form .swap-field label, .balance-send-form .send-field label, .balance-swap-form .swap-field label, .balance-swap-form .send-field label, .balance-offramp-form .swap-field label, .balance-offramp-form .send-field label {
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--text-primary);
            text-align: right;
            -webkit-user-select: none;
               -moz-user-select: none;
                    user-select: none;
        }
.balance-send-form .swap-field .input-fiat-value, .balance-send-form .send-field .input-fiat-value, .balance-swap-form .swap-field .input-fiat-value, .balance-swap-form .send-field .input-fiat-value, .balance-offramp-form .swap-field .input-fiat-value, .balance-offramp-form .send-field .input-fiat-value {
            font-size: 0.75rem;
            color: var(--text-secondary);
            font-weight: 400;
            text-align: right;
        }
.balance-send-form .swap-field .swap-field-input:not(.amount-grid),
        .balance-send-form .swap-field .send-field-input:not(.amount-grid),
        .balance-send-form .send-field .swap-field-input:not(.amount-grid),
        .balance-send-form .send-field .send-field-input:not(.amount-grid),
        .balance-swap-form .swap-field .swap-field-input:not(.amount-grid),
        .balance-swap-form .swap-field .send-field-input:not(.amount-grid),
        .balance-swap-form .send-field .swap-field-input:not(.amount-grid),
        .balance-swap-form .send-field .send-field-input:not(.amount-grid),
        .balance-offramp-form .swap-field .swap-field-input:not(.amount-grid),
        .balance-offramp-form .swap-field .send-field-input:not(.amount-grid),
        .balance-offramp-form .send-field .swap-field-input:not(.amount-grid),
        .balance-offramp-form .send-field .send-field-input:not(.amount-grid) {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
/* Align ContactSelect width with send actions*/
.balance-send-form .swap-field .swap-field-input:not(.amount-grid) :global(.contact-select-input-wrapper), .balance-send-form .swap-field .send-field-input:not(.amount-grid) :global(.contact-select-input-wrapper), .balance-send-form .send-field .swap-field-input:not(.amount-grid) :global(.contact-select-input-wrapper), .balance-send-form .send-field .send-field-input:not(.amount-grid) :global(.contact-select-input-wrapper), .balance-swap-form .swap-field .swap-field-input:not(.amount-grid) :global(.contact-select-input-wrapper), .balance-swap-form .swap-field .send-field-input:not(.amount-grid) :global(.contact-select-input-wrapper), .balance-swap-form .send-field .swap-field-input:not(.amount-grid) :global(.contact-select-input-wrapper), .balance-swap-form .send-field .send-field-input:not(.amount-grid) :global(.contact-select-input-wrapper), .balance-offramp-form .swap-field .swap-field-input:not(.amount-grid) :global(.contact-select-input-wrapper), .balance-offramp-form .swap-field .send-field-input:not(.amount-grid) :global(.contact-select-input-wrapper), .balance-offramp-form .send-field .swap-field-input:not(.amount-grid) :global(.contact-select-input-wrapper), .balance-offramp-form .send-field .send-field-input:not(.amount-grid) :global(.contact-select-input-wrapper) {
                width: 100%;
            }
/* Recipient input with paste button*/
.balance-send-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper, .balance-send-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper, .balance-send-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper, .balance-send-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper, .balance-swap-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper, .balance-swap-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper, .balance-swap-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper, .balance-swap-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper, .balance-offramp-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper, .balance-offramp-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper, .balance-offramp-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper, .balance-offramp-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper {
                position: relative;
                width: 100%;
            }
.balance-send-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input, .balance-send-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input, .balance-send-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input, .balance-send-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input, .balance-swap-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input, .balance-swap-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input, .balance-swap-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input, .balance-swap-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input, .balance-offramp-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input, .balance-offramp-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input, .balance-offramp-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input, .balance-offramp-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input {
                    width: 100%;
                    padding: 0.75rem;
                    padding-right: 3rem;
                    border: 1px solid var(--border-color);
                    border-radius: var(--radius-xs);
                    background: var(--details-bg);
                    color: var(--text-primary);
                    font-size: 0.875rem;
                    transition: border-color 0.2s;
                }
@media (max-width: 567px) {
.balance-send-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input, .balance-send-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input, .balance-send-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input, .balance-send-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input, .balance-swap-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input, .balance-swap-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input, .balance-swap-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input, .balance-swap-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input, .balance-offramp-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input, .balance-offramp-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input, .balance-offramp-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input, .balance-offramp-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input {
                        font-size: 1rem /* Prevent iOS zoom on focus*/
                }
                    }
.balance-send-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input:focus, .balance-send-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input:focus, .balance-send-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input:focus, .balance-send-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input:focus, .balance-swap-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input:focus, .balance-swap-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input:focus, .balance-swap-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input:focus, .balance-swap-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input:focus, .balance-offramp-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input:focus, .balance-offramp-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input:focus, .balance-offramp-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input:focus, .balance-offramp-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input:focus {
                        outline: none;
                        border-color: var(--color-accent);
                    }
.balance-send-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input::-moz-placeholder, .balance-send-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input::-moz-placeholder, .balance-send-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input::-moz-placeholder, .balance-send-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input::-moz-placeholder, .balance-swap-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input::-moz-placeholder, .balance-swap-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input::-moz-placeholder, .balance-swap-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input::-moz-placeholder, .balance-swap-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input::-moz-placeholder, .balance-offramp-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input::-moz-placeholder, .balance-offramp-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input::-moz-placeholder, .balance-offramp-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input::-moz-placeholder, .balance-offramp-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input::-moz-placeholder {
                        color: var(--text-secondary);
                        font-size:90%;
                    }
.balance-send-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input::placeholder, .balance-send-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input::placeholder, .balance-send-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input::placeholder, .balance-send-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input::placeholder, .balance-swap-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input::placeholder, .balance-swap-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input::placeholder, .balance-swap-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input::placeholder, .balance-swap-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input::placeholder, .balance-offramp-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input::placeholder, .balance-offramp-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input::placeholder, .balance-offramp-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input::placeholder, .balance-offramp-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .recipient-input::placeholder {
                        color: var(--text-secondary);
                        font-size:90%;
                    }
.balance-send-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste, .balance-send-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste, .balance-send-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste, .balance-send-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste, .balance-swap-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste, .balance-swap-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste, .balance-swap-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste, .balance-swap-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste, .balance-offramp-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste, .balance-offramp-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste, .balance-offramp-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste, .balance-offramp-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste {
                    position: absolute;
                    right: 8px;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 2rem;
                    height: 2rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: none;
                    background: none;
                    color: var(--color-accent);
                    cursor: pointer;
                    border-radius: var(--radius-xs);
                    transition: background 0.2s;
                }
.balance-send-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste:hover, .balance-send-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste:hover, .balance-send-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste:hover, .balance-send-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste:hover, .balance-swap-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste:hover, .balance-swap-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste:hover, .balance-swap-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste:hover, .balance-swap-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste:hover, .balance-offramp-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste:hover, .balance-offramp-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste:hover, .balance-offramp-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste:hover, .balance-offramp-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste:hover {
                        background: rgba(1, 102, 255, 0.1);
                        background: var(--item-bg-hovered);
                    }
.balance-send-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste svg, .balance-send-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste svg, .balance-send-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste svg, .balance-send-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste svg, .balance-swap-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste svg, .balance-swap-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste svg, .balance-swap-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste svg, .balance-swap-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste svg, .balance-offramp-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste svg, .balance-offramp-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste svg, .balance-offramp-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste svg, .balance-offramp-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .btn-paste svg {
                        fill: currentColor;
                    }
.balance-send-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown, .balance-send-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown, .balance-send-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown, .balance-send-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown, .balance-swap-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown, .balance-swap-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown, .balance-swap-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown, .balance-swap-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown, .balance-offramp-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown, .balance-offramp-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown, .balance-offramp-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown, .balance-offramp-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown {
                    position: absolute;
                    top: calc(100% + 0.25rem);
                    left: 0;
                    right: 0;
                    max-height: 12.5rem;
                    overflow-y: auto;
                    background: var(--details-bg);
                    border: 1px solid var(--border-color);
                    border-radius: var(--radius-xs);
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                    z-index: 1000;
                }
.balance-send-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item, .balance-send-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item, .balance-send-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item, .balance-send-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item, .balance-swap-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item, .balance-swap-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item, .balance-swap-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item, .balance-swap-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item, .balance-offramp-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item, .balance-offramp-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item, .balance-offramp-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item, .balance-offramp-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item {
                        width: 100%;
                        display: block;
                        padding: 0.75rem 1rem;
                        border: none;
                        background: none;
                        text-align: left;
                        cursor: pointer;
                        transition: background 0.15s;
                        border-bottom: 1px solid var(--border-color);
                    }
.balance-send-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item:last-child, .balance-send-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item:last-child, .balance-send-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item:last-child, .balance-send-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item:last-child, .balance-swap-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item:last-child, .balance-swap-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item:last-child, .balance-swap-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item:last-child, .balance-swap-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item:last-child, .balance-offramp-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item:last-child, .balance-offramp-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item:last-child, .balance-offramp-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item:last-child, .balance-offramp-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item:last-child {
                            border-bottom: none;
                        }
.balance-send-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item:hover, .balance-send-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item:hover, .balance-send-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item:hover, .balance-send-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item:hover, .balance-swap-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item:hover, .balance-swap-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item:hover, .balance-swap-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item:hover, .balance-swap-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item:hover, .balance-offramp-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item:hover, .balance-offramp-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item:hover, .balance-offramp-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item:hover, .balance-offramp-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item:hover {
                            background: var(--item-bg-hovered);
                        }
.balance-send-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item .contact-nickname, .balance-send-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item .contact-nickname, .balance-send-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item .contact-nickname, .balance-send-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item .contact-nickname, .balance-swap-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item .contact-nickname, .balance-swap-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item .contact-nickname, .balance-swap-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item .contact-nickname, .balance-swap-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item .contact-nickname, .balance-offramp-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item .contact-nickname, .balance-offramp-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item .contact-nickname, .balance-offramp-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item .contact-nickname, .balance-offramp-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item .contact-nickname {
                            font-size: 0.875rem;
                            font-weight: 500;
                            color: var(--text-primary);
                            margin-bottom: 0.25rem;
                        }
.balance-send-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item .contact-principal, .balance-send-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item .contact-principal, .balance-send-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item .contact-principal, .balance-send-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item .contact-principal, .balance-swap-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item .contact-principal, .balance-swap-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item .contact-principal, .balance-swap-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item .contact-principal, .balance-swap-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item .contact-principal, .balance-offramp-form .swap-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item .contact-principal, .balance-offramp-form .swap-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item .contact-principal, .balance-offramp-form .send-field .swap-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item .contact-principal, .balance-offramp-form .send-field .send-field-input:not(.amount-grid) .recipient-input-wrapper .contacts-dropdown .contact-item .contact-principal {
                            font-size: 0.75rem;
                            color: var(--text-secondary);
                            font-family: monospace;
                        }
.balance-send-form .swap-field .amount-row, .balance-send-form .send-field .amount-row, .balance-swap-form .swap-field .amount-row, .balance-swap-form .send-field .amount-row, .balance-offramp-form .swap-field .amount-row, .balance-offramp-form .send-field .amount-row {
            display: flex;
            gap: 0.375rem;
        }
.balance-send-form .swap-field input, .balance-send-form .send-field input, .balance-swap-form .swap-field input, .balance-swap-form .send-field input, .balance-offramp-form .swap-field input, .balance-offramp-form .send-field input {
            flex: 1;
            padding: 0.75rem;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-xs);
            background: var(--modal-bg);
            color: var(--text-primary);
            font-size: 0.875rem;
            transition: border-color 0.2s;
        }
@media (max-width: 567px) {
.balance-send-form .swap-field input, .balance-send-form .send-field input, .balance-swap-form .swap-field input, .balance-swap-form .send-field input, .balance-offramp-form .swap-field input, .balance-offramp-form .send-field input {
                height: 3rem
        }
            }
.balance-send-form .swap-field input:focus:not(.amount-slider), .balance-send-form .send-field input:focus:not(.amount-slider), .balance-swap-form .swap-field input:focus:not(.amount-slider), .balance-swap-form .send-field input:focus:not(.amount-slider), .balance-offramp-form .swap-field input:focus:not(.amount-slider), .balance-offramp-form .send-field input:focus:not(.amount-slider) {
                outline: none;
                border-color: var(--color-accent);
            }
.balance-send-form .swap-field input::-moz-placeholder, .balance-send-form .send-field input::-moz-placeholder, .balance-swap-form .swap-field input::-moz-placeholder, .balance-swap-form .send-field input::-moz-placeholder, .balance-offramp-form .swap-field input::-moz-placeholder, .balance-offramp-form .send-field input::-moz-placeholder {
                color: var(--text-secondary);
            }
.balance-send-form .swap-field input::placeholder, .balance-send-form .send-field input::placeholder, .balance-swap-form .swap-field input::placeholder, .balance-swap-form .send-field input::placeholder, .balance-offramp-form .swap-field input::placeholder, .balance-offramp-form .send-field input::placeholder {
                color: var(--text-secondary);
            }
.balance-send-form .amount-grid, .balance-swap-form .amount-grid, .balance-offramp-form .amount-grid {
        grid-template-columns: 1fr auto;
        -moz-column-gap: 0.5rem;
             column-gap: 0.5rem;
        row-gap: 0.5rem;
        align-items: start;
        width: 100%;
    }
.balance-send-form .amount-grid .amount-text-input, .balance-swap-form .amount-grid .amount-text-input, .balance-offramp-form .amount-grid .amount-text-input {
            padding: 0.625rem;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-xs);
            background: var(--details-bg);
            color: var(--text-primary);
            font-size: 0.875rem;
            transition: border-color 0.2s;
            width: 8.4375rem;
        }
@media (max-width: 567px) {
.balance-send-form .amount-grid .amount-text-input, .balance-swap-form .amount-grid .amount-text-input, .balance-offramp-form .amount-grid .amount-text-input {
                font-size: 1rem /* Prevent iOS zoom on focus*/
        }
            }
.balance-send-form .amount-grid .amount-text-input:focus, .balance-swap-form .amount-grid .amount-text-input:focus, .balance-offramp-form .amount-grid .amount-text-input:focus {
                outline: none;
                border-color: var(--color-accent);
            }
.balance-send-form .amount-grid .amount-text-input::-moz-placeholder, .balance-swap-form .amount-grid .amount-text-input::-moz-placeholder, .balance-offramp-form .amount-grid .amount-text-input::-moz-placeholder {
                color: var(--text-secondary);
            }
.balance-send-form .amount-grid .amount-text-input::placeholder, .balance-swap-form .amount-grid .amount-text-input::placeholder, .balance-offramp-form .amount-grid .amount-text-input::placeholder {
                color: var(--text-secondary);
            }
.balance-send-form .amount-grid .btn-max, .balance-swap-form .amount-grid .btn-max, .balance-offramp-form .amount-grid .btn-max {
            width: 3.125rem;
            min-width: 3.125rem;
            height: 2.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            color: var(--color-accent);
            border: 1px solid var(--color-accent);
            border-radius: var(--radius-xs);
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
        }
@media (max-width: 567px) {
.balance-send-form .amount-grid .btn-max, .balance-swap-form .amount-grid .btn-max, .balance-offramp-form .amount-grid .btn-max {
                width: 3.75rem;
                height: 3rem
        }
            }
.balance-send-form .amount-grid .btn-max:hover, .balance-swap-form .amount-grid .btn-max:hover, .balance-offramp-form .amount-grid .btn-max:hover {
                background: var(--color-accent);
                color: var(--modal-bg);
            }
.balance-send-form .amount-grid .alternative-slider, .balance-swap-form .amount-grid .alternative-slider, .balance-offramp-form .amount-grid .alternative-slider {
            margin-top: 0.875rem;
            padding: 0.5rem 0;
            
        }
.balance-send-form .amount-grid .alternative-slider .rangeSlider, .balance-swap-form .amount-grid .alternative-slider .rangeSlider, .balance-offramp-form .amount-grid .alternative-slider .rangeSlider {
                margin-top: 0;
                margin-bottom: 0;
                margin-left: 0.3125rem;
                font-size: 0.5rem;
            }
.balance-send-form .amount-grid .alternative-slider .rangeSlider .rangeFloat, .balance-swap-form .amount-grid .alternative-slider .rangeSlider .rangeFloat, .balance-offramp-form .amount-grid .alternative-slider .rangeSlider .rangeFloat { 
                    font-size: 0.75rem;
                    translate: -150% 120% 0.01px !important;
                }
.balance-send-form .amount-grid .alternative-slider .rangeSlider .rangeHandle:hover::before, .balance-swap-form .amount-grid .alternative-slider .rangeSlider .rangeHandle:hover::before, .balance-offramp-form .amount-grid .alternative-slider .rangeSlider .rangeHandle:hover::before {
                    box-shadow: 0 0 0 6px var(--color-accent) !important;
                }
.balance-send-form .amount-grid .alternative-slider .rangeSlider .rangeHandle.rsPress:hover::before, .balance-swap-form .amount-grid .alternative-slider .rangeSlider .rangeHandle.rsPress:hover::before, .balance-offramp-form .amount-grid .alternative-slider .rangeSlider .rangeHandle.rsPress:hover::before {
                    box-shadow: 0 0 0 8px var(--color-accent) !important;
                }
/* Make the clickable zone taller than the visual bar */
.balance-send-form .amount-grid .alternative-slider .rangeSlider::before, .balance-swap-form .amount-grid .alternative-slider .rangeSlider::before, .balance-offramp-form .amount-grid .alternative-slider .rangeSlider::before {
                    content: '';
                    position: absolute;
                    top: -12px;      /* Expand upward */
                    bottom: -12px;   /* Expand downward */
                    left: 0;
                    right: 0;
                    /* Invisible but clickable */
                }
.balance-send-form .send-error, .balance-swap-form .send-error, .balance-offramp-form .send-error {
        padding: 0.375rem 0.625rem;
        background: rgba(244, 67, 54, 0.1);
        border: 1px solid rgba(244, 67, 54, 0.3);
        border-radius: var(--radius-xs);
        color: #f44336;
        font-size: 0.8125rem;
        line-height: 1.3;
        text-wrap: balance;
        white-space: pre-line;
    }
.balance-send-form .swap-available, .balance-swap-form .swap-available, .balance-offramp-form .swap-available {
        font-size: 0.8125rem;
        color: var(--text-primary);
        margin-top: 0.25rem;
        padding-left: 5rem;
    }
.balance-send-form .swap-to-section, .balance-swap-form .swap-to-section, .balance-offramp-form .swap-to-section {
        padding: 0rem 0 0rem;
        width: 100%;
        align-self: center;  /* Centers in flex column parent*/
        border-radius: var(--radius-xs);
        position: relative;
    }
.balance-send-form .swap-to-section .swap-detail-row, .balance-swap-form .swap-to-section .swap-detail-row, .balance-offramp-form .swap-to-section .swap-detail-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.625rem 0;
            margin-bottom: 0;
        }
.balance-send-form .swap-to-section .swap-detail-row.swap-to-row, .balance-swap-form .swap-to-section .swap-detail-row.swap-to-row, .balance-offramp-form .swap-to-section .swap-detail-row.swap-to-row {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                padding-top: 0.5rem;
                margin-bottom: 0.125rem;
                position: relative;
            }
.balance-send-form .swap-to-section .swap-detail-row.swap-to-row .label, .balance-swap-form .swap-to-section .swap-detail-row.swap-to-row .label, .balance-offramp-form .swap-to-section .swap-detail-row.swap-to-row .label {
                    font-size: 0.8125rem;
                    color: var(--text-primary);
                    min-width: auto;
                    flex-shrink: 0;
                }
.balance-send-form .swap-to-section .swap-detail-row.swap-to-row .swap-estimate-values, .balance-swap-form .swap-to-section .swap-detail-row.swap-to-row .swap-estimate-values, .balance-offramp-form .swap-to-section .swap-detail-row.swap-to-row .swap-estimate-values {
                    display: flex;
                    flex-direction: column;
                    padding-left: 0.625rem;
                    padding-right: 0.3125rem;
                    gap: 0.1875rem;
                    flex: 1;
                }
.balance-send-form .swap-to-section .swap-detail-row.swap-to-row .swap-estimate-values .value, .balance-swap-form .swap-to-section .swap-detail-row.swap-to-row .swap-estimate-values .value, .balance-offramp-form .swap-to-section .swap-detail-row.swap-to-row .swap-estimate-values .value {
                        font-size: 0.875rem;
                        font-weight: 500;
                        color: var(--text-primary);
                        text-align: right;
                    }
.balance-send-form .swap-to-section .swap-detail-row.swap-to-row .swap-estimate-values .value-fiat, .balance-swap-form .swap-to-section .swap-detail-row.swap-to-row .swap-estimate-values .value-fiat, .balance-offramp-form .swap-to-section .swap-detail-row.swap-to-row .swap-estimate-values .value-fiat {
                        font-size: 0.75rem;
                        color: var(--text-secondary);
                        text-align: right;
                    }
.balance-send-form .swap-to-section .swap-detail-row.swap-to-row .value, .balance-swap-form .swap-to-section .swap-detail-row.swap-to-row .value, .balance-offramp-form .swap-to-section .swap-detail-row.swap-to-row .value {
                    font-size: 0.875rem;
                    font-weight: 500;
                    color: var(--text-primary);
                    flex: 1;
                }
.balance-send-form .swap-to-section .swap-detail-row.swap-impact-row, .balance-swap-form .swap-to-section .swap-detail-row.swap-impact-row, .balance-offramp-form .swap-to-section .swap-detail-row.swap-impact-row {
                border-top: 1px solid var(--border-color);
                border-top: 1px solid var(--item-border);
                padding-left: 0.6875rem;
                cursor: pointer;
                outline: none;
            }
.balance-send-form .swap-to-section .swap-detail-row.swap-impact-row:focus, .balance-swap-form .swap-to-section .swap-detail-row.swap-impact-row:focus, .balance-offramp-form .swap-to-section .swap-detail-row.swap-impact-row:focus {
                    /* background: var(--details-bg);*/
                    /* border-left: 4px solid var(--color-accent);*/
                }
.balance-send-form .swap-to-section .swap-detail-row.swap-impact-row .label, .balance-swap-form .swap-to-section .swap-detail-row.swap-impact-row .label, .balance-offramp-form .swap-to-section .swap-detail-row.swap-impact-row .label {
                    font-size: 0.8125rem;
                    color: var(--text-primary);
                    min-width: 100px;
                    flex-shrink: 0;
                }
.balance-send-form .swap-to-section .swap-detail-row .value, .balance-swap-form .swap-to-section .swap-detail-row .value, .balance-offramp-form .swap-to-section .swap-detail-row .value {
                font-size: 0.875rem;
                font-weight: 500;
                color: var(--text-primary);
                
            }
.balance-send-form .swap-to-section .swap-detail-row .value.fee, .balance-swap-form .swap-to-section .swap-detail-row .value.fee, .balance-offramp-form .swap-to-section .swap-detail-row .value.fee {
                    color: var(--text-primary);
                }
.balance-send-form .swap-to-section .swap-detail-row .price-impact, .balance-swap-form .swap-to-section .swap-detail-row .price-impact, .balance-offramp-form .swap-to-section .swap-detail-row .price-impact {
                color: var(--color-accent);
            }
.balance-send-form .swap-to-section .swap-detail-row .price-impact.rate-warning, .balance-swap-form .swap-to-section .swap-detail-row .price-impact.rate-warning, .balance-offramp-form .swap-to-section .swap-detail-row .price-impact.rate-warning {
                    color: #ff9800;
                }
.balance-send-form .swap-to-section .swap-detail-row .price-impact.rate-critical, .balance-swap-form .swap-to-section .swap-detail-row .price-impact.rate-critical, .balance-offramp-form .swap-to-section .swap-detail-row .price-impact.rate-critical {
                    color: #dc3545;
                    font-weight: 600;
                }
.balance-send-form .swap-to-section .swap-detail-row .price-impact .summary-toggle, .balance-swap-form .swap-to-section .swap-detail-row .price-impact .summary-toggle, .balance-offramp-form .swap-to-section .swap-detail-row .price-impact .summary-toggle {
                    margin-left: 0.5rem;
                    font-size: 0.625rem;
                    opacity: 0.6;
                    transition: opacity 0.2s;
                }
.balance-send-form .swap-to-section .swap-summary-wrapper, .balance-swap-form .swap-to-section .swap-summary-wrapper, .balance-offramp-form .swap-to-section .swap-summary-wrapper {
            padding-top: 0.625rem;
            padding-bottom: 0.625rem;
        }
.balance-send-form .swap-to-section .swap-summary-wrapper .swap-summary-box, .balance-swap-form .swap-to-section .swap-summary-wrapper .swap-summary-box, .balance-offramp-form .swap-to-section .swap-summary-wrapper .swap-summary-box {
                padding: 0.375rem 0.75rem 0.3125rem;
                border: 1px solid var(--border-color);
                background: var(--details-bg);
                border-radius: var(--radius-xs);
            }
.balance-send-form .swap-to-section .summary-dex-winner-line, .balance-swap-form .swap-to-section .summary-dex-winner-line, .balance-offramp-form .swap-to-section .summary-dex-winner-line {
            display: flex;
            justify-content: space-between;
            font-size: 0.75rem;
            color: var(--text-secondary);
            padding: 0.25rem 0 0.75rem;
        }
.balance-send-form .swap-to-section .summary-dex-winner-line .dex-icon-label, .balance-swap-form .swap-to-section .summary-dex-winner-line .dex-icon-label, .balance-offramp-form .swap-to-section .summary-dex-winner-line .dex-icon-label {
                display: flex;
                align-items: center;
                gap: 0.375rem;
            }
.balance-send-form .swap-to-section .summary-dex-winner-line .dex-icon-label img, .balance-swap-form .swap-to-section .summary-dex-winner-line .dex-icon-label img, .balance-offramp-form .swap-to-section .summary-dex-winner-line .dex-icon-label img {
                    width: 0.9375rem;
                    height: 0.9375rem;
                }
.balance-send-form .swap-to-section .summary-dex-winner-line .dex-difference, .balance-swap-form .swap-to-section .summary-dex-winner-line .dex-difference, .balance-offramp-form .swap-to-section .summary-dex-winner-line .dex-difference {
                margin-left: 0.5rem;
                font-weight: 500;
                color:var(--color-accent);
                align-self: center;
            }
.balance-send-form .swap-to-section .kongswap-hops, .balance-swap-form .swap-to-section .kongswap-hops, .balance-offramp-form .swap-to-section .kongswap-hops {
            font-size: 0.625rem;
            font-weight: 500;
            opacity: 0.5;
            color: var(--text-primary);
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--border-color);
        }
.balance-send-form .swap-to-section .kongswap-hops span:not(:first-child)::before, .balance-swap-form .swap-to-section .kongswap-hops span:not(:first-child)::before, .balance-offramp-form .swap-to-section .kongswap-hops span:not(:first-child)::before {
                content: "▾";
                margin-right: 0.3125rem;
                margin-left: 0.3125rem;
            }
.balance-send-form .swap-to-section .kongswap-pool-fee,
        .balance-send-form .swap-to-section .icpswap-pool-fee,
        .balance-send-form .swap-to-section .summary-transfer-fees,
        .balance-swap-form .swap-to-section .kongswap-pool-fee,
        .balance-swap-form .swap-to-section .icpswap-pool-fee,
        .balance-swap-form .swap-to-section .summary-transfer-fees,
        .balance-offramp-form .swap-to-section .kongswap-pool-fee,
        .balance-offramp-form .swap-to-section .icpswap-pool-fee,
        .balance-offramp-form .swap-to-section .summary-transfer-fees {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0;
            margin: 0.5rem 0;
            border-bottom: 1px solid var(--border-color);
            font-size: 0.6875rem;
        }
.balance-send-form .swap-to-section .kongswap-pool-fee .fee-label, .balance-send-form .swap-to-section .icpswap-pool-fee .fee-label, .balance-send-form .swap-to-section .summary-transfer-fees .fee-label, .balance-swap-form .swap-to-section .kongswap-pool-fee .fee-label, .balance-swap-form .swap-to-section .icpswap-pool-fee .fee-label, .balance-swap-form .swap-to-section .summary-transfer-fees .fee-label, .balance-offramp-form .swap-to-section .kongswap-pool-fee .fee-label, .balance-offramp-form .swap-to-section .icpswap-pool-fee .fee-label, .balance-offramp-form .swap-to-section .summary-transfer-fees .fee-label {
                color: var(--text-primary);
                font-weight: 500;
            }
.balance-send-form .swap-to-section .kongswap-pool-fee .fee-value, .balance-send-form .swap-to-section .icpswap-pool-fee .fee-value, .balance-send-form .swap-to-section .summary-transfer-fees .fee-value, .balance-swap-form .swap-to-section .kongswap-pool-fee .fee-value, .balance-swap-form .swap-to-section .icpswap-pool-fee .fee-value, .balance-swap-form .swap-to-section .summary-transfer-fees .fee-value, .balance-offramp-form .swap-to-section .kongswap-pool-fee .fee-value, .balance-offramp-form .swap-to-section .icpswap-pool-fee .fee-value, .balance-offramp-form .swap-to-section .summary-transfer-fees .fee-value {
                color: var(--text-primary);
            }
.balance-send-form .swap-to-section .summary-total, .balance-swap-form .swap-to-section .summary-total, .balance-offramp-form .swap-to-section .summary-total {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.625rem 0 0;
            margin-top: 0rem;
            border-top: 1px solid var(--border-color);
            font-size: 0.75rem;
        }
.balance-send-form .swap-to-section .summary-total .total-label, .balance-swap-form .swap-to-section .summary-total .total-label, .balance-offramp-form .swap-to-section .summary-total .total-label {
                color: var(--text-primary);
                font-weight: 600;
            }
.balance-send-form .swap-to-section .summary-total .total-value, .balance-swap-form .swap-to-section .summary-total .total-value, .balance-offramp-form .swap-to-section .summary-total .total-value {
                color: var(--text-primary);
                font-weight: 600;
                font-family: monospace;
            }
.send-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.send-actions button {
        padding: 0rem 0.625rem;
        min-height: 2.8125rem;
        font-size: 0.875rem;
        font-weight: 500;
        border-radius: var(--radius-xs);
        cursor: pointer;
    }
.send-actions button:disabled,
        .send-actions button[aria-disabled="true"] {
            opacity: 0.6;
            cursor: not-allowed;
        }
@media(max-width: 567px) {
.send-actions button {
            min-height: 3rem
    }
        }
.send-actions .btn-cancel {
        min-width: 5rem;
        background: var(--details-bg);
        color: var(--text-primary);
        border: 1px solid;
        border-color: var(--border-color);
    }
.send-actions .btn-cancel:hover:not(:disabled) {
            transition: border-color 0.5s;
            background: var(--balance-hover-bg);
            border-color: var(--text-muted);
        }
.send-actions .btn-send {
        flex:1;
        background: var(--color-accent);
        color: #ffffff;
        border: 1px solid var(--color-accent);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        line-height: 1.3;
        text-wrap: balance;
    }
.send-actions .btn-send:hover:not(:disabled):not([aria-disabled="true"]) {
            background: oklch(from var(--color-accent) calc(l * 0.9) c h);
        }
.send-actions .btn-send.error {
            background: #dc3545;
            border-color: #dc3545;
            cursor: not-allowed;
        }
.send-actions .btn-send .button-spinner {
            display: inline-block;
            width: 0.875rem;
            height: 0.875rem;
            flex-shrink: 0;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-top-color: #ffffff;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
        }
.send-actions .btn-save-contact {
        flex: 1;
        background: var(--modal-bg);
        color: var(--text-primary);
        border: 1px solid var(--border-color);
    }
.send-actions .btn-save-contact:hover:not(:disabled) {
            background: var(--balance-hover-bg);
            border-color: var(--text-primary);
        }
.send-actions .btn-done {
        flex: 1;
        background: var(--color-accent);
        color: #ffffff;
        border: 1px solid var(--color-accent);
    }
.send-actions .btn-done:hover:not(:disabled) {
            background: oklch(from var(--color-accent) calc(l * 0.9) c h);
        }
.confirmation-wrapper .confirmation-header {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0.625rem;
        padding-top: 0.9375rem;
        padding-left: 1rem;
        display: none !important;
        text-align: center;
    }
.confirmation-wrapper .confirmation-details {
        border-radius: var(--radius-md);
        padding: 0.3125rem 1rem;
        margin-bottom: 1.25rem;
    }
.confirmation-wrapper .confirmation-details .confirmation-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 0.625rem 0;
            gap: 0.75rem;
        }
.confirmation-wrapper .confirmation-details .confirmation-row:not(:last-child) {
                border-bottom: 1px solid var(--border-color);
            }
.confirmation-wrapper .confirmation-details .confirmation-row .confirmation-label {
                font-size: 0.8125rem;
                color: var(--text-primary);
                font-weight: 500;
                min-width: 80px;
                flex-shrink: 0;
            }
.confirmation-wrapper .confirmation-details .confirmation-row .confirmation-value {
                font-size: 0.875rem;
                color: var(--text-primary);
                font-weight: 500;
                text-align: right;
                word-break: break-word;
            }
.confirmation-wrapper .confirmation-details .confirmation-row .confirmation-value:not(.confirmation-nickname) {
                    display: flex;
                    flex-direction: column;
                    gap: 0.25rem;
                }
.confirmation-wrapper .confirmation-details .confirmation-row .confirmation-value.confirmation-fiat {
                    color: var(--text-primary);
                    font-size: 0.8125rem;
                }
.confirmation-wrapper .confirmation-details .confirmation-row .confirmation-value.confirmation-address {
                    font-family: monospace;
                    font-size: 0.75rem;
                    color: var(--text-secondary);
                }
.confirmation-wrapper .confirmation-details .confirmation-row .confirmation-value.confirmation-nickname {
                    text-wrap: balance;
                }
.confirmation-wrapper .confirmation-details .confirmation-row .confirmation-value .contact-icon {
                    color: var(--color-accent);
                    margin-right: 0.25rem;
                }
.confirmation-wrapper .confirmation-details .confirmation-row .confirmation-value .value-main {
                    font-size: 0.875rem;
                    font-weight: 500;
                    color: var(--text-primary);
                }
.confirmation-wrapper .confirmation-details .confirmation-row .confirmation-value .value-main.gas-amount {
                        font-size: 0.8125rem;
                    }
.confirmation-wrapper .confirmation-details .confirmation-row .confirmation-value .hint {
                    font-size: 0.75rem;
                    color: var(--text-secondary, #888);
                    font-weight: 400;
                }
.send-success {
    padding: 1.25rem 0;
    text-align: center;
}
.send-success .success-icon {
        font-size: 3rem;
        color: white;
        margin-bottom: 0.75rem;
        line-height: 1;
    }
.send-success .success-message {
        font-size: 0.875rem;
        color: var(--text-primary);
        line-height: 1.5;
        word-break: break-all;
    }
/* ── Complete: Success icon with scale-in animation ────────────────────────────*/
.balance-item .success-icon {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    background: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5625rem;
    font-weight: bold;
    margin: 0 auto 1.25rem;
    animation: success-scale-in 0.5s ease-out;
}
.balance-item .success-icon svg { 
        fill: white; 
        width: 1.875rem;
        height: 1.875rem;
    }
@keyframes success-scale-in {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@media (max-width: 819px) {
.receive-panel,
.buy-panel,
.support-panel {
    padding: 25px 25px;
    background: var(--modal-bg);
    border-radius: 40px;
    corner-shape: squircle
}
  }
@media (max-width: 567px) {
.receive-panel,
.buy-panel,
.support-panel {
    padding: 0;
    border-radius: 0;
    background: none
}
  }
:root {
  --address-bg: #fff;
  --address-bg-mobile: white;
}
html.dark {
  --address-bg: #3c4044;
  --address-bg: hsl(220, 10%, 9%);
  --address-bg: hsl(220, 10%, 18%);
  --address-bg-mobile: hsl(220, 10%, 18%);
}
.modal-receive .address-section, .modal-buy .address-section, .receive-panel .address-section, .buy-panel .address-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
  }
.modal-receive .address-section .address-label, .modal-buy .address-section .address-label, .receive-panel .address-section .address-label, .buy-panel .address-section .address-label {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 0.125rem;
      -webkit-user-select: none;
         -moz-user-select: none;
              user-select: none;
    }
.modal-receive .address-section .address-box, .modal-buy .address-section .address-box, .receive-panel .address-section .address-box, .buy-panel .address-section .address-box {
      background: var(--address-bg);
      border: 1px solid var(--border-color);
      /* box-shadow: 0px 1px 2px rgba(0,0,0,0.1);*/
      /* box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);*/
      border-radius: var(--radius-md);
      padding: 0.75rem 1rem;
      display: flex;
      /* text-wrap: balance;*/
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
      margin-bottom: 0px;
      color: var(--text-primary);
    }
@media(max-width: 567px) {
.modal-receive .address-section .address-box, .modal-buy .address-section .address-box, .receive-panel .address-section .address-box, .buy-panel .address-section .address-box {
        background: var(--address-bg-mobile)
    }
      }
.modal-receive .address-section .address-box:hover, .modal-buy .address-section .address-box:hover, .receive-panel .address-section .address-box:hover, .buy-panel .address-section .address-box:hover {
        /* background: rgba(0, 0, 0, 0.05);*/
        border-color: var(--text-muted);
      }
.modal-receive .address-section .address-box.copied, .modal-buy .address-section .address-box.copied, .receive-panel .address-section .address-box.copied, .buy-panel .address-section .address-box.copied {
        background: rgba(76, 175, 80, 0.1);
        border-color: #4caf50;
      }
.modal-receive .address-section .address-box.copied .copy-icon svg, .modal-buy .address-section .address-box.copied .copy-icon svg, .receive-panel .address-section .address-box.copied .copy-icon svg, .buy-panel .address-section .address-box.copied .copy-icon svg {
          fill: green;
        }
.modal-receive .address-section .address-box .address-text, .modal-buy .address-section .address-box .address-text, .receive-panel .address-section .address-box .address-text, .buy-panel .address-section .address-box .address-text {
        font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Courier New', monospace;
        font-size: 0.8125rem;
        color: var(--text-primary);
        word-break: break-all;
        line-height: 1.5;
        flex: 1;
        text-align: left;
        max-width: calc(100% - 88px);
        -webkit-user-select: text;
           -moz-user-select: text;
                user-select: text;
      }
@media(max-width: 819px) {
.modal-receive .address-section .address-box .address-text, .modal-buy .address-section .address-box .address-text, .receive-panel .address-section .address-box .address-text, .buy-panel .address-section .address-box .address-text {
          max-width: calc(100% - 45px)
      }
        }
.modal-receive .address-section .address-box .copy-icon, .modal-buy .address-section .address-box .copy-icon, .receive-panel .address-section .address-box .copy-icon, .buy-panel .address-section .address-box .copy-icon {
        flex-shrink: 0;
        
        transition: opacity 0.2s;
        color: var(--text-primary);
        width: 1.875rem;
        height: 1.875rem;
        margin-right: 3px;
      }
.modal-receive .address-section .address-box .copy-icon:not(.checked), .modal-buy .address-section .address-box .copy-icon:not(.checked), .receive-panel .address-section .address-box .copy-icon:not(.checked), .buy-panel .address-section .address-box .copy-icon:not(.checked) {
          opacity: 0.6;
          transform: translateX(2.5px);
        }
.modal-receive .address-section .address-box .copy-icon.checked, .modal-buy .address-section .address-box .copy-icon.checked, .receive-panel .address-section .address-box .copy-icon.checked, .buy-panel .address-section .address-box .copy-icon.checked {
          width: 1.5625rem;
          height: 1.5625rem;
          animation: scale_80 0.2s;
        }
.modal-receive .address-section .address-box .copy-icon.checked svg, .modal-buy .address-section .address-box .copy-icon.checked svg, .receive-panel .address-section .address-box .copy-icon.checked svg, .buy-panel .address-section .address-box .copy-icon.checked svg {
            width: 100%;
            height: 100%;
          }
.modal-receive .address-section .address-box .copy-icon svg, .modal-buy .address-section .address-box .copy-icon svg, .receive-panel .address-section .address-box .copy-icon svg, .buy-panel .address-section .address-box .copy-icon svg {
          height: 1.25rem;
          width: 1.25rem;
        }
.address-box:hover .modal-receive .address-section .address-box .copy-icon, .address-box:hover .modal-buy .address-section .address-box .copy-icon, .address-box:hover .receive-panel .address-section .address-box .copy-icon, .address-box:hover .buy-panel .address-section .address-box .copy-icon {
          opacity: 1;
        }
.modal-receive .address-section .qr-and-address, .modal-buy .address-section .qr-and-address, .receive-panel .address-section .qr-and-address, .buy-panel .address-section .qr-and-address {
      display: flex;
      gap: 8px;
      /* background: var(--address-bg);*/
      /* border-radius: var(--radius-md);*/
    }
/* border:1px solid var(--border-color);*/
.modal-receive .address-section .qr-and-address .address-box, .modal-buy .address-section .qr-and-address .address-box, .receive-panel .address-section .qr-and-address .address-box, .buy-panel .address-section .qr-and-address .address-box {
        /* border:none;*/
        /* border-radius: 0;*/
      }
/* background: none;*/
.modal-receive .address-section .qr-and-address .address-box .address-text, .modal-buy .address-section .qr-and-address .address-box .address-text, .receive-panel .address-section .qr-and-address .address-box .address-text, .buy-panel .address-section .qr-and-address .address-box .address-text {
          max-width: calc(100% - 70px);
          max-width: 80%;
        }
.modal-receive .address-section .qr-section, .modal-buy .address-section .qr-section, .receive-panel .address-section .qr-section, .buy-panel .address-section .qr-section {
      flex-shrink: 0;
      -webkit-user-select: none;
         -moz-user-select: none;
              user-select: none;
      
    }
.modal-receive .address-section .qr-section .qr-code-wrapper, .modal-buy .address-section .qr-section .qr-code-wrapper, .receive-panel .address-section .qr-section .qr-code-wrapper, .buy-panel .address-section .qr-section .qr-code-wrapper {
        position: relative;
        width: 6.875rem;
        height: 6.875rem;
      }
.modal-receive .address-section .qr-section .qr-code, .modal-buy .address-section .qr-section .qr-code, .receive-panel .address-section .qr-section .qr-code, .buy-panel .address-section .qr-section .qr-code {
        width: 6.875rem;
        height: 6.875rem;
        border-radius: var(--radius-md);
        display: block;
      }
.modal-receive .address-section .qr-section .qr-logo, .modal-buy .address-section .qr-section .qr-logo, .receive-panel .address-section .qr-section .qr-logo, .buy-panel .address-section .qr-section .qr-logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 2.125rem;
        height: 2.125rem;
        background: white;
        border-radius: 50%;
        padding: 2px;
      }
.modal-receive .address-section .supported-tokens, .modal-buy .address-section .supported-tokens, .receive-panel .address-section .supported-tokens, .buy-panel .address-section .supported-tokens {
      padding-top: 14px;
      flex: 1;
      min-width: 0;
      /* border-left: 1px solid var(--border-color);*/
      padding-left: 2%;
    }
@media (max-width: 567px) {
.modal-receive .address-section .supported-tokens, .modal-buy .address-section .supported-tokens, .receive-panel .address-section .supported-tokens, .buy-panel .address-section .supported-tokens {
        margin-top: 2px;
        border-color: transparent;
        padding-left: 3%
    }
      }
.modal-receive .address-section .supported-tokens .tokens-label, .modal-buy .address-section .supported-tokens .tokens-label, .receive-panel .address-section .supported-tokens .tokens-label, .buy-panel .address-section .supported-tokens .tokens-label {
        font-size: 0.8125rem;
        color: var(--text-primary);
        margin-bottom: 8px;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
      }
.modal-receive .address-section .supported-tokens .assets-row, .modal-buy .address-section .supported-tokens .assets-row, .receive-panel .address-section .supported-tokens .assets-row, .buy-panel .address-section .supported-tokens .assets-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0 8px;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
      }
.modal-receive .address-section .supported-tokens .assets-row .asset-item, .modal-buy .address-section .supported-tokens .assets-row .asset-item, .receive-panel .address-section .supported-tokens .assets-row .asset-item, .buy-panel .address-section .supported-tokens .assets-row .asset-item {
          display: flex;
          align-items: center;
          gap: 5px;
          padding: 7px 10px 7px 0px;
        }
.modal-receive .address-section .supported-tokens .assets-row .asset-item .asset-icon, .modal-buy .address-section .supported-tokens .assets-row .asset-item .asset-icon, .receive-panel .address-section .supported-tokens .assets-row .asset-item .asset-icon, .buy-panel .address-section .supported-tokens .assets-row .asset-item .asset-icon {
            width: 1.25rem;
            height: 1.25rem;
            border-radius: 50%;
          }
.modal-receive .address-section .supported-tokens .assets-row .asset-item .asset-symbol, .modal-buy .address-section .supported-tokens .assets-row .asset-item .asset-symbol, .receive-panel .address-section .supported-tokens .assets-row .asset-item .asset-symbol, .buy-panel .address-section .supported-tokens .assets-row .asset-item .asset-symbol {
            font-size: 0.8125rem;
            font-weight: 500;
            color: var(--text-primary);
          }
.modal-receive .qr-tokens-wrapper, .modal-buy .qr-tokens-wrapper, .receive-panel .qr-tokens-wrapper, .buy-panel .qr-tokens-wrapper {
    display: flex;
    gap: 5%;
    align-items: flex-start;
    margin-top: 8px;
  }
.modal-receive .accepts-hint, .modal-buy .accepts-hint, .receive-panel .accepts-hint, .buy-panel .accepts-hint {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-secondary);
    /* color: var(--text-primary);*/
    margin-left: 10px;
    /* background: var(--address-bg);*/
    /* padding: 5px 10px 5px 5px;*/
    /* border-radius: var(--radius-md);*/
  }
.modal-receive .inline-token-icon, .modal-buy .inline-token-icon, .receive-panel .inline-token-icon, .buy-panel .inline-token-icon {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin: 0 2px;
    transform: translate(0,-1px);
  }
.modal-receive .account-id-toggle-wrapper, .modal-buy .account-id-toggle-wrapper, .receive-panel .account-id-toggle-wrapper, .buy-panel .account-id-toggle-wrapper {
    margin-top: 35px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: border-color 0.2s;
    
  }
@media (max-width: 567px) {
.modal-receive .account-id-toggle-wrapper, .modal-buy .account-id-toggle-wrapper, .receive-panel .account-id-toggle-wrapper, .buy-panel .account-id-toggle-wrapper {
      border-color: var(--border-color-mobile)
    
  }
    }
.modal-receive .account-id-toggle-wrapper.expanded, .modal-buy .account-id-toggle-wrapper.expanded, .receive-panel .account-id-toggle-wrapper.expanded, .buy-panel .account-id-toggle-wrapper.expanded {
      border-color: var(--text-muted);
    }
.modal-receive .account-id-toggle-wrapper.expanded button.account-id-toggle, .modal-buy .account-id-toggle-wrapper.expanded button.account-id-toggle, .receive-panel .account-id-toggle-wrapper.expanded button.account-id-toggle, .buy-panel .account-id-toggle-wrapper.expanded button.account-id-toggle {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        /* background: rgba(0, 0, 0, 0.015);*/
      }
.modal-receive .account-id-toggle-wrapper:hover, .modal-buy .account-id-toggle-wrapper:hover, .receive-panel .account-id-toggle-wrapper:hover, .buy-panel .account-id-toggle-wrapper:hover {
      border-color: var(--text-muted);
    }
.modal-receive .account-id-toggle-wrapper button.account-id-toggle, .modal-buy .account-id-toggle-wrapper button.account-id-toggle, .receive-panel .account-id-toggle-wrapper button.account-id-toggle, .buy-panel .account-id-toggle-wrapper button.account-id-toggle {
      margin-bottom: 0px;
      width: 100%;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0.75rem 1rem;
      cursor: pointer;
      transition: background-color 0.2s;
      font-size: 0.875rem;
      color: var(--text-primary);
      min-height: 48px;
      border-radius: var(--radius-md);
      overflow: hidden;
    }
.modal-receive .account-id-toggle-wrapper button.account-id-toggle svg, .modal-buy .account-id-toggle-wrapper button.account-id-toggle svg, .receive-panel .account-id-toggle-wrapper button.account-id-toggle svg, .buy-panel .account-id-toggle-wrapper button.account-id-toggle svg { flex-shrink: 0; }
.modal-receive .account-id-toggle-wrapper button.account-id-toggle:hover, .modal-buy .account-id-toggle-wrapper button.account-id-toggle:hover, .receive-panel .account-id-toggle-wrapper button.account-id-toggle:hover, .buy-panel .account-id-toggle-wrapper button.account-id-toggle:hover {
        /* background: rgba(0, 0, 0, 0.02);*/
        border-color: var(--text-secondary);
        color: var(--text-primary);
      }
@media (max-width: 567px) {
.modal-receive .account-id-toggle-wrapper button.account-id-toggle, .modal-buy .account-id-toggle-wrapper button.account-id-toggle, .receive-panel .account-id-toggle-wrapper button.account-id-toggle, .buy-panel .account-id-toggle-wrapper button.account-id-toggle {
        font-size: 1rem
    }
      }
.modal-receive .account-id-toggle-wrapper .account-id-expansion, .modal-buy .account-id-toggle-wrapper .account-id-expansion, .receive-panel .account-id-toggle-wrapper .account-id-expansion, .buy-panel .account-id-toggle-wrapper .account-id-expansion {
      padding: 22px 18px 20px;
    }
.modal-receive .account-id-toggle-wrapper .account-id-expansion .address-label, .modal-buy .account-id-toggle-wrapper .account-id-expansion .address-label, .receive-panel .account-id-toggle-wrapper .account-id-expansion .address-label, .buy-panel .account-id-toggle-wrapper .account-id-expansion .address-label {
        margin-bottom: 0;
      }
@keyframes show-address-copy-feedback {
    0% {
      opacity: 0;
      transform: translateY(-4px);
    }

    20% {
      opacity: 1;
      transform: translateY(0);
    }

    80% {
      opacity: 1;
      transform: translateY(0);
    }

    100% {
      opacity: 0;
      transform: translateY(-4px);
    }
  }
.buy-panel {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
.buy-panel .intro-text p {
        margin: 0;
        font-size: 0.9375rem;
        line-height: 1.6;
        color: var(--text-primary);
      }
.buy-panel .intro-text strong {
        font-weight: 600;
      }
.buy-panel .steps-list {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }
.buy-panel .step-item {
      display: flex;
      gap: 16px;
      align-items: flex-start;
    }
.buy-panel .step-item p {
        margin: 0;
        font-size: 0.875rem;
        line-height: 1.6;
        color: var(--text-primary);
        text-wrap: balance;
      }
.buy-panel .step-number {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.75rem;
      height: 1.75rem;
      min-width: 28px;
      background: var(--color-accent);
      color: white;
      border-radius: 50%;
      font-size: 0.875rem;
      font-weight: 600;
      margin-top: -1px;
    }
.buy-panel .step-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
.buy-panel .label-hint {
      font-size: 12px;
      font-weight: 400;
      color: var(--text-secondary);
    }
.modal-support .feedback-subtitle, .support-panel .feedback-subtitle {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 1.4375rem;
    font-weight: 500;
    text-align: center;
  }
.modal-support .feedback-form, .support-panel .feedback-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
.modal-support .form-group, .support-panel .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
.modal-support .form-group label, .support-panel .form-group label {
      font-size: 0.875rem;
      font-weight: 500;
      color: #1a1a1a;
      -webkit-user-select: none;
         -moz-user-select: none;
              user-select: none;
    }
.modal-support .form-group input[type="email"],
    .modal-support .form-group textarea,
    .support-panel .form-group input[type="email"],
    .support-panel .form-group textarea {
      width: 100%;
      padding: 0.75rem 0.75rem;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      font-size: var(--text-sm);
      color: var(--text-primary);
      background: var(--bg-surface);
      transition: border-color 0.15s ease;
      /* box-shadow: 0px 1px 2px rgba(0,0,0,0.1);*/
    }
@media (max-width: 567px) {
.modal-support .form-group input[type="email"],
    .modal-support .form-group textarea,
    .support-panel .form-group input[type="email"],
    .support-panel .form-group textarea {
          font-size: 1rem /* Prevent iOS zoom on focus*/
    }
      }
.modal-support .form-group input[type="email"]:focus, .modal-support .form-group textarea:focus, .support-panel .form-group input[type="email"]:focus, .support-panel .form-group textarea:focus {
        outline: none;
        border-color: var(--color-accent);
      }
.modal-support .form-group input[type="email"]:focus::-moz-placeholder, .modal-support .form-group input[type="email"]:focus::-moz-placeholder, .modal-support .form-group textarea:focus::-moz-placeholder, .modal-support .form-group textarea:focus::-moz-placeholder, .support-panel .form-group input[type="email"]:focus::-moz-placeholder, .support-panel .form-group input[type="email"]:focus::-moz-placeholder, .support-panel .form-group textarea:focus::-moz-placeholder, .support-panel .form-group textarea:focus::-moz-placeholder {
          opacity: 0.4;
        }
.modal-support .form-group input[type="email"]:focus::placeholder, .modal-support .form-group input[type="email"]:focus::placeholder, .modal-support .form-group textarea:focus::placeholder, .modal-support .form-group textarea:focus::placeholder, .support-panel .form-group input[type="email"]:focus::placeholder, .support-panel .form-group input[type="email"]:focus::placeholder, .support-panel .form-group textarea:focus::placeholder, .support-panel .form-group textarea:focus::placeholder {
          opacity: 0.4;
        }
.modal-support .form-group textarea, .support-panel .form-group textarea {
      resize: vertical;
      min-height: 6.25rem;
      height: auto;
      max-height: 12.5rem;
      resize:none!important;
      field-sizing: content; /* New CSS feature*/
    }
.modal-support .form-group input::-moz-placeholder, .modal-support .form-group textarea::-moz-placeholder, .support-panel .form-group input::-moz-placeholder, .support-panel .form-group textarea::-moz-placeholder {
      color: var(--text-secondary);
      -moz-transition: opacity 0.3s;
      transition: opacity 0.3s;
      opacity: 0.76;
    }
.modal-support .form-group input::placeholder, .modal-support .form-group textarea::placeholder, .support-panel .form-group input::placeholder, .support-panel .form-group textarea::placeholder {
      color: var(--text-secondary);
      transition: opacity 0.3s;
      opacity: 0.76;
    }
.modal-support .field-hint, .support-panel .field-hint {
    padding-left: 0.3125rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    /* font-style: italic;*/
    font-weight: 400;
    margin-top: -0.25rem;
  }
.modal-support .character-count, .support-panel .character-count {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: right;
    margin-top: -4px;
    display: none !important;
  }
.modal-support .screenshot-dropzone, .support-panel .screenshot-dropzone {
    border: 1.5px dashed var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.875rem;
    text-align: center;
    transition: all 0.15s ease;
    background: var(--bg-surface);
    outline: none;
  }
.modal-support .screenshot-dropzone:hover, .modal-support .screenshot-dropzone:focus, .modal-support .screenshot-dropzone:focus-visible, .support-panel .screenshot-dropzone:hover, .support-panel .screenshot-dropzone:focus, .support-panel .screenshot-dropzone:focus-visible {
      border-color: var(--color-accent);
      background: rgba(#0166FF, 0.02);
    }
.modal-support .screenshot-dropzone.has-screenshot, .support-panel .screenshot-dropzone.has-screenshot {
      border-style: solid;
      padding: 0;
      background: transparent;
    }
.modal-support .screenshot-dropzone svg, .support-panel .screenshot-dropzone svg {
      width: 1.25rem;
      height: 1.25rem;
      opacity: 0.5;
    }
.modal-support .screenshot-dropzone input[type="file"], .support-panel .screenshot-dropzone input[type="file"] {
      display: none;
    }
.modal-support .file-label, .support-panel .file-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--text-primary);
  }
.modal-support .file-label svg, .support-panel .file-label svg {
      color: var(--text-secondary);
    }
.modal-support .file-label span, .support-panel .file-label span {
      font-size: 0.875rem;
      color: var(--text-secondary);
    }
.modal-support .file-label span.file-hint, .support-panel .file-label span.file-hint {
        font-size: 0.75rem;
        font-weight: 400;
        opacity: 0.8;
      }
.modal-support .screenshot-preview, .support-panel .screenshot-preview {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    max-height: 6.25rem;
  }
.modal-support .screenshot-preview img, .support-panel .screenshot-preview img {
      width: 100%;
      height: auto;
      display: block;
    }
.modal-support .screenshot-preview .remove-screenshot, .support-panel .screenshot-preview .remove-screenshot {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.95);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
    }
.modal-support .screenshot-preview .remove-screenshot:hover, .support-panel .screenshot-preview .remove-screenshot:hover {
        background: #ffffff;
        transform: scale(1.1);
      }
.modal-support .screenshot-preview .remove-screenshot svg, .support-panel .screenshot-preview .remove-screenshot svg {
        color: var(--text-error);
      }
.modal-support .submit-button, .support-panel .submit-button {
    margin-top: 0.3125rem;
    width: 100%;
    padding: 0.75rem 1.5rem;
    background: oklch(from var(--color-accent) calc(l * 1) c h);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 3rem;
  }
.modal-support .submit-button:hover:not(:disabled):not([aria-disabled="true"]), .support-panel .submit-button:hover:not(:disabled):not([aria-disabled="true"]) {
      background: oklch(from var(--color-accent) calc(l * 0.9) c h);
    }
.modal-support .submit-button:disabled, .support-panel .submit-button:disabled {
      cursor: not-allowed;
    }
@media (max-width: 567px) {
.modal-support .submit-button, .support-panel .submit-button {
      font-size: 1rem
  }
    }
.modal-support .error-message, .support-panel .error-message {
    padding: 0.75rem;
    background: rgba(#d93025, 0.1);
    border: 1px solid rgba(#d93025, 0.3);
    border-radius: var(--radius-md);
    color: #d93025;
    font-size: 0.875rem;
    text-align: center;
  }
.modal-support .feedback-success, .support-panel .feedback-success {
    text-align: center;
    padding: 1.5rem 0 0.625rem;
  }
.modal-support .feedback-success .success-icon, .support-panel .feedback-success .success-icon {
      width: 4rem;
      height: 4rem;
      border-radius: 50%;
      background: #34a853;
      color: #ffffff;
      font-size: 2.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 16px;
    }
.modal-support .feedback-success .success-icon svg, .support-panel .feedback-success .success-icon svg {
        width: 1.875rem;
        height: 1.875rem;
      }
.modal-support .feedback-success h3, .support-panel .feedback-success h3 {
      margin: 0 0 0.5rem;
      font-size: 1.25rem;
      font-weight: 600;
      color: #1a1a1a;
    }
.modal-support .feedback-success p, .support-panel .feedback-success p {
      margin: 0;
      color: var(--text-secondary);
      font-size: 0.875rem;
    }
.modal-support .feedback-success .submitted-message, .support-panel .feedback-success .submitted-message {
      margin-top: 1.875rem;
      padding: 1rem;
      background: var(--bg-surface);
      border-radius: var(--radius-md);
      text-align: left;
    }
.modal-support .feedback-success .submitted-message .message-label, .support-panel .feedback-success .submitted-message .message-label {
        margin: 0 0 8px;
        font-size: 0.625rem;
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
.modal-support .feedback-success .submitted-message .message-content, .support-panel .feedback-success .submitted-message .message-content {
        margin: 0;
        font-size: 0.875rem;
        color: var(--text-primary);
        white-space: pre-wrap;
        line-height: 1.5;
      }
/* glob: no files matched */
.hamburger {
    display: none;
    background: transparent;
    border: none;
    width: 70px;
    height: 70px;
    cursor: pointer;
    color: white;
    margin-left: auto;
    z-index: 2000;
    outline:none;
}
@media (max-width: 820px) {
.hamburger {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center
}
    }
@media (max-width: 567px) {
.hamburger {
        color: var(--text-primary)
}
    }
.hamburger:hover {
        opacity: 0.8;
    }
.hamburger svg {
        display: inline-block;
        width: 24px;
        height: 24px;
        position: relative;
        transition: transform 0.3s;
    }
.hamburger svg rect {
            transition: transform 0.65s ease, opacity 0.25s ease;
            transform: translate3d(0, 0, 0);
        }
@media (max-width: 567px) {
.hamburger svg rect {
                transition: transform 0.5s ease, opacity 0.25s ease
        }
            }
.hamburger svg rect.top {
                transform-origin: 14% 29%;
            }
.hamburger svg rect.middle {
                transform-origin: 50% 50%;
            }
.hamburger svg rect.bottom {
                transform-origin: 30% 80%;
            }
.hamburger.open svg rect.top {                    
                    transform: rotate(45deg) scale(1.25, 1);                    
                }
.hamburger.open svg rect.middle {
                    opacity: 0;
                    transform: scale(0.5); 
                }
.hamburger.open svg rect.bottom {
                    transform: rotate(-45deg) scale(1.25, 1);                    
                }
.hamburger.open.level-2 svg {
            transform: translateX(3px);
        }
/* transform: rotate(180deg) translate3d(5px,0,0);*/
.hamburger.open.level-2 svg rect {
                transition: transform 0.3s ease, opacity 0.25s ease;
            }
.hamburger.open.level-2 svg rect.top {                    
                    transform: rotate(45deg) scale(.6,1) translate(30px,31px)                  
                }
.hamburger.open.level-2 svg rect.bottom {
                    transform: rotate(-45deg) scale(.6,1) translate(15px,-29px)                  
                }
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    background: rgba(0, 0, 0, 0.88);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease-out;
    touch-action: none;
    /* filter: blur(100px);*/
}
.drawer-overlay.visible {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
@media (min-width: 821px) {
.drawer-overlay {
        display: none !important
}
    }
.overlay.level-2 {
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    transition: opacity 300ms ease-out;
}
@media (min-width: 821px) {
.overlay.level-2 {
        display: none !important
}
    }
.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    width: calc(100% - 60px);
    max-width: 280px;
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 1000;
}
@media(min-width: 821px) {
.drawer {
        display: none !important
}
    }
@media(max-width: 819px) {
    }
@media(max-width: 567px) {
.drawer {
        width: 66.66%;
        font-size: 4.4vw
}
    }
.drawer.level-2 {
    width: calc(100% - 20px);
    max-width: 480px;
    z-index: 1001;
}
@media (max-width: 567px) {
.drawer.level-2 {
        max-width: 400px
}
    }
.drawer.level-2 .drawer-top-zone {
        height: 75px;
    }
@media (max-width: 567px) {
.drawer.level-2 .drawer-top-zone {
            height: 60px
    }
        }
.drawer-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    touch-action: none;
    font-size: 1rem;

}
@media(max-width: 567px) {
.drawer-content {
        font-size: 4.4vw

}
    }
.drawer-content .drawer-topbar {
        height: 70px;
    }
.drawer-content .drawer-topbar .minimal-theme-toggle {
            height: 100%;
            width: 70px;
            display: flex;
            padding-left: 25px;
            align-items: center;
            outline:none;
        }
.drawer-content .drawer-topbar .minimal-theme-toggle span {
                display: none;
            }
.drawer-content .drawer-topbar .minimal-theme-toggle svg {
                width: 1.25rem;
                height: 1.25rem;
            }
.drawer-2-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    padding-top: 0;
    touch-action: none;
    touch-action: pan-y;
    
    /* -webkit-overflow-scrolling: touch;*/
}
.drawer-2-content .address-label {
        margin-top: 10px;
    }
.drawer-2-content .drawer-2-title {
        margin-bottom: 20px;
    }
.drawer-nav {
    padding: 0px;
    display: flex;
    flex-direction: column;
}
.drawer-nav .drawer-nav-item {
        width: 100%;
        background: transparent;
        border: none;
        color: white;
        font-weight: 500;
        padding: 1.8vh 25px;
        text-align: left;
        font-size: 1.0625rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
@media(max-width: 567px) {
.drawer-nav .drawer-nav-item {
            color: var(--text-primary)
    }
        }
.drawer-nav .drawer-nav-item:first-of-type, .drawer-nav .drawer-nav-item.contacts, .drawer-nav .drawer-nav-item.support {
            border-top: 1px solid rgba(255,255,255,0.1);
            padding-top: 3.3vh;
        }
@media(max-width: 567px) {
.drawer-nav .drawer-nav-item:first-of-type, .drawer-nav .drawer-nav-item.contacts, .drawer-nav .drawer-nav-item.support {
                border-color: rgba(0,0,0,0.1)
        }
            }
.drawer-nav .drawer-nav-item.buy, .drawer-nav .drawer-nav-item.export {
            padding-bottom: 3.3vh;
        }
.drawer-nav .drawer-nav-item.active + .contacts, 
            .drawer-nav .drawer-nav-item.active + .support {
                border-color: transparent;
            }
.drawer-nav .drawer-nav-item.active:first-of-type {
                border-color: transparent;
            }
.drawer-nav .drawer-nav-item .chevron {
            flex-shrink: 0;
            opacity: 0.6;
            width: 1.25rem;
            height: 1.25rem;
        }
.drawer-nav .drawer-nav-item.support:hover, .drawer-nav .drawer-nav-item.support.active {
                border-color: transparent;
            }
.drawer-actions {
    padding: 24px 20px 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
}
.drawer-actions .drawer-action-item {
        background: transparent;
        border: 1px solid rgba(255,255,255,0.2);
        color: white;
        font-weight: 400;
        padding: 0.9375rem 1rem;
        text-align: left;
        cursor: pointer;
        border-radius: var(--radius-sm);
        transition: background 0.2s, border-color 0.2s;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        font-size: 1rem;
    }
@media(max-width: 567px) {
.drawer-actions .drawer-action-item {
            color: var(--text-primary);
            border-color: var(--border-color-mobile)
    }
        }
.drawer-actions .drawer-action-item:hover {
            background: var(--item-bg-hovered);
            border-color: var(--text-secondary);
        }
.drawer-actions .drawer-action-item span {
            display: inline-flex;
            gap: 8px;
        }
.drawer-actions .drawer-action-item span svg {
                width: 1.125rem;
                height: 1.125rem;
                flex-shrink: 0;
            }
.drawer-actions .drawer-action-item .logout-spinner {
            width: 1.125rem;
            height: 1.125rem;
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-top: 1px solid var(--text-primary);
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
        }
html.dark .logout-spinner {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-top: 1px solid #ffffff !important;
}
/* Generic modal overlay and content structure for ALL modals*/
/* Specific modal styles belong in their own files (contacts.scss, send.scss, order-detail.scss, etc.)*/
.modal-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    /* z-index: 10000;*/
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 100px;
    
    /* Backdrop (background overlay)*/
    background: color-mix(in srgb, #0d2549 70%, transparent);
    backdrop-filter: blur(50px);
    animation: backdrop-fade-in 0.15s ease-out;
}
.modal-wrapper .modal-content {
        animation: dialog-fade-in 0.15s ease-out 0.10s both;
    }
.modal-wrapper.closing .modal-content {
            animation: dialog-fade-out 0.15s ease-out forwards;
        }
.modal-wrapper.closing {
        animation: backdrop-fade-out 0.15s ease-out 0.05s forwards;
}
html.dark .modal-wrapper {
        background: color-mix(in srgb, #050506 28%, transparent);
        backdrop-filter: blur(25px);
    }
/* MODAL CONTENT ===============================*/
.modal-content {
    background: var(--modal-bg);
    border-radius: 12px;
    overflow: hidden;
    max-width: 31.25rem;
    width: calc(100% - 40px);
    max-height: calc(100vh - 130px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    padding-bottom: 6px;
}
@media (max-width: 567px) {
.modal-content {
        margin: 0;
        max-height: 100vh
        /* border-radius: 0;*/
}
    }
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 8%;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    position: relative;
}
.modal-header h3 {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
        padding-top: 5  px;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
    }
.modal-header .modal-close {
        position: absolute;
        top: 0;
        right: 0;
        background: transparent;
        border: none;
        outline:none;
        font-size: 2rem;
        color: #999;
        cursor: pointer;
        padding: 0;
        width: 5rem;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.1s;
    }
.modal-header .modal-close:hover {
            background: #fff;
            color: #333;
        }
.modal-body {
    padding: 1.875rem calc(8% - 8px) 1.875rem 8%;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
@keyframes dialog-fade-in {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes dialog-fade-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.96);
    }
}
@keyframes backdrop-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes backdrop-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}
#orders_card .card_summary {
        position: relative;
    }
#orders_card .card_summary .summary-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
/* Orders List*/
#orders_card .orders-list {
        /* max-height: 430px; */
        margin-top: -4px;
    }
@media (max-width: 567px) {
#orders_card .orders-list {
            margin-top: 0
    }
        }
#orders_card .order-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
#orders_card .order-info .order-main-product {
            display: flex;
            align-items: center;
            gap: 6px;
        }
#orders_card .order-info .order-main-detail {
            display: flex;
            gap: 0.375rem;
            align-items: center;
        }
#orders_card .order-info .order-main-detail .country-flag {
                font-size: 0.9375rem;
                line-height: 1;
                flex-shrink: 0;
            }
#orders_card .order-info .order-main-detail .shipping-indicator {
                font-size: 0.75rem;
                line-height: 1;
                flex-shrink: 0;
                opacity: 0.7;
                display: none !important;
            }
#orders_card .order-info .order-main-detail .order-time {
                font-size: var(--text-xs);
                color: var(--text-secondary);
                /* color: var(--text-muted);*/
            }
#orders_card .product-name {
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--text-primary);
        text-overflow: ellipsis;
        white-space: nowrap;
    }
#orders_card .line-item-qty,
    #orders_card .product-more {
        font-size: 0.75rem;
        font-weight: 400;
        opacity: 0.7;
        color: var(--text-secondary);
        flex-shrink: 0;
    }
#orders_card .order-status {
        font-size: 0.75rem;
        padding: 2px 0.5rem;
        border-radius: var(--radius-xs);
        font-weight: 500;
    }
#orders_card .order-status.status-pending {
            background: #fff3e0;
            color: #f57c00;
        }
#orders_card .order-status.status-confirmed {
            background: #e8f5e9;
            color: #2e7d32;
        }
#orders_card .order-status.status-refunded {
            background: #fce4ec;
            color: #c2185b;
        }
#orders_card .order-amount {
        gap: 4px;
        display: flex;
        flex-direction: column;
        text-align: right;
    }
#orders_card .order-total-token {
        font-size: 0.875rem;
        font-weight: 600;
        /* margin-bottom: 4px;*/
    }
#orders_card .order-total {
        font-size: 13px;
        color: #999;
    }
/* Expanded order details*/
#orders_card .order-details-expanded {
        padding: 0.3125rem 1rem 0.625rem;
        padding: 0.3125rem 0.75rem 0.375rem;
        /* max-width: 370px;*/
        /* margin: 0 auto;*/
        
        /* Performance optimizations for smooth animation*/
        will-change: height;
        transform: translateZ(0);
        backface-visibility: hidden;
        contain: layout;
        
    }
#orders_card .order-details-expanded .line-items-table {
            width: 100%;
            border-radius: var(--radius-md);
            border-collapse: separate;
            border-spacing: 0;
            padding: 0rem 0rem 0.375rem;
            margin-bottom: 0.5625rem;
        }
#orders_card .order-details-expanded .line-items-table tbody tr.line-item-button:not(:last-child) td {
                        border-bottom: 1px solid var(--item-border);;
                    }
#orders_card .order-details-expanded .line-items-table td {
                font-size: 0.75rem;
                padding: 0.5rem 0.5rem;
                vertical-align: top;
            }
#orders_card .order-details-expanded .line-items-table td:first-child {
                    padding-left: 0;
                }
/* vertical-align: middle;*/
#orders_card .order-details-expanded .line-items-table td:last-child {
                    padding-right: 0;
                }
#orders_card .order-details-expanded .line-items-table td.line-item-image {
                    padding-right: 0px;
                    padding-top: 5px;
                    width: 2.1875rem;
                }
#orders_card .order-details-expanded .line-items-table td.line-item-image img {
                        display: block;
                        min-width: 1.875rem;
                        width: 1.875rem;
                        height: 2.125rem;
                        -o-object-fit: cover;
                           object-fit: cover;
                        border-radius: 5px;
                        border: 1px solid var(--border-color);
                    }
#orders_card .order-details-expanded .line-items-table td.line-item-details {
                    padding-top: 0.4375rem;
                }
#orders_card .order-details-expanded .line-items-table td.line-item-details > div {
                        display: block;
                    }
#orders_card .order-details-expanded .line-items-table td.line-item-details > div:not(:last-child) {
                            margin-bottom: 4px;
                        }
#orders_card .order-details-expanded .line-items-table td.line-item-qty {
                    white-space: nowrap;
                    padding-top: 0.5rem;
                    padding-left: 0.25rem;
                    padding-right: 0.25rem;
                }
#orders_card .order-details-expanded .line-items-table td.line-item-price {
                    padding-top: 0.5rem;
                    white-space: nowrap;
                    text-align: right;
                }
#orders_card .order-details-expanded .line-items-table .line-item-name {
                font-size: 0.75rem;
                line-height: 1.2;
                font-weight: 500;
                text-wrap: balance;
                color: var(--text-primary);
                /* color: var(--text-secondary);*/
            }
#orders_card .order-details-expanded .line-items-table .line-item-variant,
            #orders_card .order-details-expanded .line-items-table .line-item-sku {
                font-size: 0.75rem;
                color: var(--text-secondary);
            }
#orders_card .order-details-expanded .line-items-table .line-item-qty {
                font-size: 0.75rem;
                font-weight: 400;
                opacity: 0.7;
                color: var(--text-secondary);
                text-align: right;
                padding-left: 0.25rem;
                padding-right: 0.25rem;
            }
#orders_card .order-details-expanded .line-items-table .line-item-price {
                font-size: 0.75rem;
                font-weight: 500;
                color: var(--text-primary);
                text-align: right;
            }
#orders_card .order-details-expanded .line-items-table .line-item-total {
                width: 100%;
            }
#orders_card .order-details-expanded .line-items-table .line-item-total .line-item-name, 
                #orders_card .order-details-expanded .line-items-table .line-item-total .line-item-price {
                    font-weight: 700;
                }
#orders_card .order-details-expanded .line-items-table .line-item-total td {
                    padding-top: 0.4375rem;
                    padding-bottom: 0.5rem;
                    line-height: 1;
                }
#orders_card .order-details-expanded .line-items-table .line-item-total td.line-item-price {
                        padding-top: 10px;
                    }
#orders_card .order-details-expanded .payment-breakdown-wrapper {
            margin-bottom: 0.75rem;
            text-align: left;
        }
#orders_card .order-details-expanded .payment-breakdown-button {
            border-top: 1px solid var(--item-border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.375rem;
            padding: 0.5625rem 0rem 0.5625rem;
            width: 100%;
            border-radius: 4px;
            font-size: 0.75rem;
            position: relative;
        }
#orders_card .order-details-expanded .payment-breakdown-button .payment-breakdown-label {
                padding-left: 0.5px;
                /* font-weight: 700;*/
                /* visibility: hidden;*/
            }
#orders_card .order-details-expanded .payment-breakdown-button .payment-breakdown-value-container {
                display: flex;
                align-items: center;
                gap: 6px;
            }
#orders_card .order-details-expanded .payment-breakdown-button .payment-breakdown-value {
                font-weight: 600;
                font-size: 0.875rem;
                color: #34a853;
            }
#orders_card .order-details-expanded .payment-breakdown-button .payment-breakdown-token-icon {
                width: 1.125rem;
                height: 1.125rem;
                border-radius: 50%;
                -o-object-fit: cover;
                object-fit: cover;
                display: inline-block;
            }
#orders_card .order-details-expanded .payment-breakdown-button .payment-breakdown-toggle {
                color: var(--color-accent);
                margin-left: 0.25rem;
                font-size: 0.625rem;
                opacity: 0.6;
                transition: opacity 0.2s;
                display: inline;
            }
#orders_card .order-details-expanded .payment-breakdown-details {
            display: flex;
            flex-direction: column;
            gap: 0.4375rem;
            font-size: 0.75rem;
            padding-bottom: 1rem;
            padding: 0.6875rem 0.75rem 0.75rem;
            padding: 0.6875rem 0.9375rem 0.75rem 0.9375rem;
            border: 1px solid var(--border-color);
            background: var(--details-bg);
            border-radius: var(--radius-xs);
        }
#orders_card .order-details-expanded .payment-breakdown-details .breakdown-line {
                display: flex;
                justify-content: space-between;
                align-items: baseline;
                width: 100%;
            }
#orders_card .order-details-expanded .payment-breakdown-details .breakdown-line .breakdown-label {
                    color: var(--text-secondary);
                    font-weight: 400;
                }
#orders_card .order-details-expanded .payment-breakdown-details .breakdown-line .breakdown-label .breakdown-percentage {
                        font-size: 0.6875rem;
                        opacity: 0.8;
                        font-weight: 400;
                        color: var(--text-secondary);
                    }
#orders_card .order-details-expanded .payment-breakdown-details .breakdown-line .breakdown-value {
                    font-size: 0.625rem;
                    color: var(--text-primary);
                    font-weight: 500;
                    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
                }
#orders_card .order-details-expanded .payment-breakdown-details .breakdown-line.breakdown-received {
                    padding-top: 5.5px;
                    border-top: 1px solid var(--border-color);
                }
#orders_card .order-details-expanded .payment-breakdown-details .breakdown-line.breakdown-received .breakdown-label {
                        color: var(--text-primary);
                        font-weight: 500;
                    }
#orders_card .order-details-expanded .payment-breakdown-details .breakdown-line.breakdown-received .breakdown-value {
                        font-weight: 600;
                    }
#orders_card .order-details-expanded .detail-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0;
            gap: 8px;
        }
#orders_card .order-details-expanded .detail-full-date {
            padding: 0.5625rem 0rem 0rem 0rem;
            justify-content: space-between;
            opacity: 0.8;
            
        }
#orders_card .order-details-expanded .detail-full-date span {
                font-weight: 300;
                font-size: 0.75rem;
                color: var(--text-secondary);
            }
#orders_card .order-details-expanded .detail-full-date .order-site-name {
                padding-left: 0;
                /* display: flex;*/
                /* align-items: center;*/
                /* gap: 8px;*/
                /* font-size: rem(13);*/
                /* color: var(--text-muted);*/
                /* text-align: left;*/
                /* margin-bottom: 3px;*/
            }
#orders_card .order-details-expanded .detail-links {
            padding-top: 0;
            padding-bottom: 0;
            display: flex;
            justify-content: space-between;
        }
#orders_card .order-details-expanded .detail-links .detail-link {
                font-size: 0.75rem;
                color: var(--text-link);
                text-decoration: none;
                font-weight: 500;
                transition: color 0.2s;
                text-align: right;
                padding: 0.625rem 0;
                display: flex;
                position: relative;
                outline:none;
                
            }
#orders_card .order-details-expanded .detail-links .detail-link svg {
                    width: 0.6875rem;
                    height: 0.75rem;
                    margin-left: 0px;
                }
#orders_card .order-details-expanded .detail-links .detail-link:after {
                    content:"";
                    position: absolute;
                    bottom: 6px;
                    left: 0px;
                    width: 0%;
                    height: 1px;
                    background: var(--text-link);
                    opacity: 0;
                }
#orders_card .order-details-expanded .detail-links .detail-link:hover:after {
                        opacity: 0.8;
                        width: calc(100% - 0px);
                    }
/* glob: no files matched */
.settings-section-contacts .contact-edit-form {
        width: 100%;
        padding-top: 1.125rem;
        background: var(--details-bg);
        border-top: 1px solid var(--border-color);
        border-radius: 0;
        border-bottom-left-radius: var(--radius-md);
        border-bottom-right-radius: var(--radius-md);
        border:none;
    }
.settings-section-contacts .contact-add-form {
        margin-top: -1px;
        border-top-left-radius: 0;
    }
.settings-section-contacts .form-error {
        color: #ff4444;
        font-size: 0.8125rem;
        margin-bottom: 0.5rem;
        min-height: 1.125rem;
    }
/* Buttons*/
.settings-section-contacts .btn-edit,
    .settings-section-contacts .btn-delete,
    .settings-section-contacts .btn-save {
        padding: 0.5rem 1rem;
        border-radius: var(--radius-xs);
        font-size: 0.8125rem;
        font-weight: 500;
        cursor: pointer;
        /* transition: all 0.2s;*/
        border: 1px solid;
        white-space: nowrap;
    }
.settings-section-contacts .btn-edit {
        background: var(--card-bg);
        color: var(--text-primary);
        border-color: var(--border-color);
        order: -1;
    }
.settings-section-contacts .btn-edit:hover, .settings-section-contacts .btn-edit.opened {
            transition: border-color 0.2s;
            border-color: var(--text-muted);
        }
@media (max-width:819px) {
.settings-section-contacts .btn-edit {
            display: none !important
    }
        }
.settings-section-contacts .btn-delete {
        background: var(--color-card);
        color: #d32f2f;
        border-color: var(--border-color);
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
    }
.settings-section-contacts .btn-delete:hover {
            background: #ffebee;
            border-color: #d32f2f;
        }
.settings-section-contacts .btn-delete .icon {
            display: none;
            width: 1.25rem;
            height: 1.25rem;
        }
.settings-section-contacts .btn-delete .button-spinner {
            width: 0.875rem;
            height: 0.875rem;
            border: 2px solid rgba(239, 68, 68, 0.2);
            border-top-color: rgb(239, 68, 68);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            flex-shrink: 0;
        }
@media (max-width: 819px) {
.settings-section-contacts .btn-delete {
            border:none;
            padding: 0.5rem 0.625rem
    }
            .settings-section-contacts .btn-delete .text {display: none;}
            .settings-section-contacts .btn-delete .icon {display: inline-block;}
        }
/* Messages*/
.settings-section-contacts .loading-text,
    .settings-section-contacts .empty-text {
        color: var(--text-muted);
        font-size: 0.875rem;
        padding: 1rem 0;
    }
.settings-section-contacts .error-text {
        color: #d32f2f;
        font-size: 0.8125rem;
        margin: 0.25rem 0;
    }
/* Contact List*/
.settings-section-contacts .contacts-list {
        padding-top: 40px;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
.settings-section-contacts .contacts-list .contact-item-wrapper {
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            overflow: hidden;
            /* box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);*/
        }
.settings-section-contacts .contacts-list .contact-item {
            background: var(--bg-surface);
            display: flex;
            align-items: center;
            padding: 0.5rem 0.75rem;
            gap: 1rem;
        }
@media (max-width: 567px) {
.settings-section-contacts .contacts-list .contact-item {
                gap: 0.75rem;
                flex-wrap: wrap;
                padding-right: 0.5rem
        }
                .settings-section-contacts .contacts-list .contact-item .btn-delete {
                    margin-left: auto;
                }
            }
.settings-section-contacts .contacts-list .contact-info {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex: 1;
            min-width: 0;
        }
.settings-section-contacts .contacts-list .contact-info .contact-name-trigger {
                background: none;
                border: none;
                padding: 6px 0;
                margin: 0;
                cursor: pointer;
                display: flex;
                align-items: center;
                gap: 1.25rem;
                text-align: left;
                justify-content: space-between;
                
            }
.settings-section-contacts .contacts-list .contact-info .contact-name-trigger:hover .contact-nickname {
                        opacity: 0.8;
                    }
@media (max-width: 567px) {
.settings-section-contacts .contacts-list .contact-info .contact-name-trigger {
                    width: 100%;
                    padding: 10px 0
                
            }
                }
.settings-section-contacts .contacts-list .contact-info .contact-name-trigger .contact-icon-and-name {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                }
.settings-section-contacts .contacts-list .contact-info .contact-name-trigger .contact-icon-and-name .contact-icon {
                        font-size: 1rem;
                        color: var(--color-accent);
                        flex-shrink: 0;
                    }
.settings-section-contacts .contacts-list .contact-info .contact-name-trigger .contact-icon-and-name .contact-nickname {
                        font-weight: 500;
                        color: var(--text-primary);
                        min-width: 14.6875rem;
                        font-size: 1rem;
                        text-wrap: balance;
                    }
@media (max-width: 965px) {
.settings-section-contacts .contacts-list .contact-info .contact-name-trigger .contact-icon-and-name .contact-nickname {
                            min-width: 160px;
                            max-width: 160px
                    }
                        }
@media (max-width: 890px) {
.settings-section-contacts .contacts-list .contact-info .contact-name-trigger .contact-icon-and-name .contact-nickname {
                            min-width: 90px;
                            max-width: 90px
                    }
                        }
@media (max-width: 819px) {
.settings-section-contacts .contacts-list .contact-info .contact-name-trigger .contact-icon-and-name .contact-nickname {
                            min-width: 165px;
                            max-width: 100%
                    }
                        }
@media (max-width: 567px) {
.settings-section-contacts .contacts-list .contact-info .contact-name-trigger .contact-icon-and-name .contact-nickname {
                            min-width: 0
                    }
                        }
.settings-section-contacts .contacts-list .contact-type-badge {
            display: inline-block;
            padding: 0.1875rem 0.5rem;
            border-radius: var(--radius-xs);
            font-size: 0.625rem;
            font-weight: 500;
            white-space: nowrap;
        }
.settings-section-contacts .contacts-list .contact-type-badge.icp {
                background: rgba(41, 98, 255, 0.1);
                color: #2962ff;
            }
.settings-section-contacts .contacts-list .contact-type-badge.eth {
                background: rgba(98, 126, 234, 0.1);
                color: #627eea;
            }
.settings-section-contacts .contacts-list .contact-address {
            font-family: 'SF Mono', Monaco, monospace;
            font-size: 0.75rem;
            color: var(--text-secondary);
            background: none;
            border: none;
            padding: 0.25rem 0.5rem;
            border-radius: var(--radius-xs);
            cursor: pointer;
            transition: all 0.15s;
            white-space: nowrap;
        }
.settings-section-contacts .contacts-list .contact-address:hover {
                background: var(--item-bg-hovered);
                color: var(--text-primary);
            }
.settings-section-contacts .contacts-list .contact-address:active {
                transform: scale(0.98);
            }
.settings-section-contacts .contacts-list .contact-address .copy-success {
                color: #10b981;
                font-weight: 500;
            }
@media (max-width: 819px) {
.settings-section-contacts .contacts-list .contact-address {
                display: none !important
        }
            }
.currency-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0.75rem;
    gap: 0.75rem;
    margin-bottom: 24px;
  }
@media (max-width: 1024px) {
.currency-options {
      grid-template-columns: repeat(3, 1fr)
  }
    }
@media (max-width: 567px) {
.currency-options {
      grid-template-columns: repeat(2, 1fr)
  }
    }
.currency-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0.75rem;
    background-color: var(--item-bg);
    /* border: 1px solid var(--border-color);*/
    color: var(--text-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    /* transition: all 0.2s ease;*/
    text-align: center;
    /* min-height: 100px;*/
  }
.currency-option:hover {
      transition: background-color 0.2s, border-color 0.2s;
      background-color: var(--item-bg-hovered);
      /* border-color: var(--color-accent);*/
    }
.currency-option.active {
      background-color: var(--item-bg-hovered);
      /* border-color: var(--color-accent);*/
      /* box-shadow: 0 0 0 1px var(--color-accent);*/
    }
.currency-flag {
    width: 3rem;
    height: 3rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
.currency-flag img {
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      -o-object-fit: cover;
         object-fit: cover;
    }
.currency-info {
    width: 100%;
  }
.currency-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
  }
.more-currencies-toggle {
    width: 100%;
    padding: 12px 4px;
    margin-top: 32px;
    margin-bottom: 10px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
  }
.more-currencies-toggle:hover {
      /* color: var(--color-text);*/
    }
.more-currencies-toggle .chevron {
      width: 0.75rem;
      height: 0.75rem;
      opacity: 0.6;
      transition: transform 0.2s ease;
      display: flex;
      align-items: center;
      transform: translateY(1px);

    }
.more-currencies-toggle .chevron svg {
        width: 0.875rem;
        height: 0.875rem;
      }
.more-currencies-toggle .chevron.rotated {
        /* transform: translateY(1px) rotate(180deg);*/
      }
.region-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    padding: 0 4px;
  }
.region-button {
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--item-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.region-button:hover {
      /* background: var(--item-bg-hovered);*/
      border-color: var(--text-muted);
      /* border-color: var(--color-accent);*/
      /* color: var(--color-text);*/
    }
.region-button.active {
      background: var(--item-bg-hovered);
      border-color: var(--text-muted);
      /* color: var(--color-accent);*/
      /* font-weight: 600;*/
      /* box-shadow: 0 0 0 1px var(--color-accent);*/
    }
svg.checkmark {
    /* color: var(--color-accent);*/
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.25rem;
    height: 1.25rem;
  }
.settings-section-export .export-form {
    max-width: 500px;
  }
.settings-section-export .form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
  }
.settings-section-export .form-group {
    flex: 1;
  }
.settings-section-export .form-group label {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      margin-bottom: 8px;
      color: var(--text-primary);
    }
.settings-section-export .date-input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    background: var(--modal-bg);
    color: var(--text-primary);
  }
.settings-section-export .date-input:focus {
      outline: none;
      border-color: var(--primary-color);
    }
.settings-section-export .radio-group {
    display: flex;
    gap: 20px;
    margin-top: 8px;
  }
.settings-section-export .radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.875rem;
  }
.settings-section-export .radio-label input[type="radio"] {
      cursor: pointer;
    }
.settings-section-export .what-to-export {
    margin-bottom: 15px;
  }
.settings-section-export .spinner-small {
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
@keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
.settings-section-session .settings-grid {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding-top: 5px;
        margin-bottom: 5px;
    }
.settings-section-session .setting-row {
        display: grid;
        grid-template-columns: minmax(9.375rem, 12.5rem) 12.5rem;
        grid-gap: 1.5rem;
        gap: 1.5rem;
        align-items: start;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--border-color);
    }
.settings-section-session .setting-row:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }
@media (max-width: 768px) {
.settings-section-session .setting-row {
            grid-template-columns: 1fr;
            gap: 1rem
    }
        }
.settings-section-session .setting-info {
        padding-top: 8px;
    }
.settings-section-session .setting-info h3 {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.3rem;
        }
.settings-section-session .setting-description {
        color: var(--text-secondary);
        font-size: 0.875rem;
        line-height: 1.5;
    }
.settings-section-session .setting-description .applies-when {
            display: block;
            font-size: 0.8125rem;
            color: var(--text-tertiary);
            font-style: italic;
        }
.settings-section-session .setting-control {
        display: flex;
        align-items: start;
        padding-top: 0.125rem;
    }
.settings-section-session .setting-note {
        margin-top: 10px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 5px;
        color: var(--text-tertiary);
        font-size: 0.8125rem;
        font-style: italic;
        opacity: 0.5;
    }
.settings-section-session .info-icon {
        flex-shrink: 0;
        opacity: 0.7;
    }
.settings-section-session .setting-select {
        width: 100%;
        padding: 0.75rem 0.875rem;
        font-size: 0.875rem;
        color: var(--text-primary);
        background: var(--item-bg-hovered);
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        cursor: pointer;
        outline: none;
        transition: border-color 0.15s ease;
    }
@media (max-width: 567px) {
.settings-section-session .setting-select {
            height: 48px;
            font-size: 1rem
    }
        }
.settings-section-session .setting-select:hover {
            border-color: var(--text-muted);
        }
.settings-section-session .setting-select option {
            padding: 0.5rem;
            background: var(--bg-primary);
            color: var(--text-primary);
        }
.settings-section-session .tip-block {
        display: inline-block;
        margin-top: 2.5rem;
        /* border-top: 1px solid var(--border-color);*/
        color: var(--text-secondary);
        font-size: 0.875rem;
        line-height: 1.5;
        border-left: 3px solid var(--color-accent);
        background: var(--item-bg-hovered);
        padding: 11px 20px 11px 16px;
        border-radius: var(--radius-xs);
    }
@media (max-width: 567px) {
.settings-section-session .tip-block {
            /* font-size: rem(14);*/
    }
        }
/* ============================================*/
/* SETTINGS PAGE*/
/* ============================================*/
.settings-page {
    display: grid;
    grid-template-columns: 11.25rem 1fr;
    grid-template-rows: minmax(0, 1fr);
    grid-gap: 0px;
    gap: 0px;
    max-width: 62.5rem;
    margin: 0 auto;
    background: var(--settings-bg);
    border-radius: 2.5rem;
    corner-shape: squircle;
    overflow: hidden;
}
@media (max-width: 1024px) {
.settings-page {
        grid-template-columns: 160px 1fr
}
    }
@media (max-width: 567px) {
.settings-page {
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 0
}
    }
/* Sidebar Navigation*/
.settings-sidebar {
    background: var(--bg-surface-subtle);
}
@media (max-width: 567px) {
.settings-sidebar {
        display: none
}
    }
.settings-sidebar .settings-nav {
        gap: 5px;
        padding: 0 15px;
        position: sticky;
        top: 2rem;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--border-color);
        corner-shape: squircle;
        overflow: hidden;
    }
@media (max-width: 567px) {
.settings-sidebar .settings-nav {
            position: static;
            flex-direction: row;
            overflow-x: auto;
            padding-bottom: 0.25rem
    }
        }
.settings-sidebar .settings-nav .settings-nav-item {
            display: flex;
            align-items: center;
            gap: 0.625rem;
            padding: 0.625rem 0.9375rem;
            background: var(--color-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            corner-shape: squircle;
            color: var(--text-primary);
            font-size: 0.9375rem;
            font-weight: 500;
            cursor: pointer;
            transition: color 0.2s;
            white-space: nowrap;
            text-align: left;
        }
.settings-sidebar .settings-nav .settings-nav-item .nav-icon {
                flex-shrink: 0;
                opacity: 0.7;
                transition: opacity 0.2s;
                width: 1.125rem;
                height: 1.125rem;
                display: flex;
                align-items: center;
            }
.settings-sidebar .settings-nav .settings-nav-item .nav-icon svg {
                    width: 100%;
                    height: 100%;
                }
.settings-sidebar .settings-nav .settings-nav-item span { flex: 1; }
.settings-sidebar .settings-nav .settings-nav-item:hover {
                background: var(--item-bg-hovered);
                /* border-color: var(--color-accent);*/
                color: var(--text-primary);
            }
.settings-sidebar .settings-nav .settings-nav-item:hover .nav-icon {
                    opacity: 1;
                }
.settings-sidebar .settings-nav .settings-nav-item.active {
                background: var(--item-bg-hovered);
                /* border-color: var(--color-accent);*/
                color: var(--color-accent);
            }
.settings-sidebar .settings-nav .settings-nav-item.active .nav-icon {
                    opacity: 1;
                }
.settings-sidebar .settings-nav .settings-nav-item.active .nav-icon svg {
                        stroke: var(--color-accent);
                        fill: var(--color-accent);
                    }
@media (max-width: 567px) {
.settings-sidebar .settings-nav .settings-nav-item {
                padding: 10px 14px;
                font-size: 13px
        }
            }
/* Main Content*/
.settings-content {
    padding-top: 20px;
    padding-bottom: 15px;
    min-height: 0;
    width: 100%;
    max-height: calc(100vh - 70px - 60px);
    display: flex;
    /* grid-column: 1 / -1;*/
    flex-direction: column;
}
.settings-section {
    min-width: 0;
    border-radius: 2.5rem;
    corner-shape: squircle;
    padding: 20px 30px 20px 32px;
    min-height: 350px;

}
/* background: var(--bg-surface);*/
@media (max-width:819px) {
.settings-section {
        padding: 25px 30px 25px

}
    }
@media (max-width: 567px) {
.settings-section {
        padding: 1.5rem;
        padding: 0;
        background: transparent

}
    }
.settings-section .section-header {
        margin-bottom: 2rem;
    }
.settings-section .section-header h2 {
            font-size: 1.5rem;
            font-weight: 600;
            margin: 0 0 0.25rem 0;
            color: var(--text-primary);
        }
.settings-section .section-header .section-description {
            font-size: 0.875rem;
            color: var(--text-secondary);
            margin: 0;
            line-height: 1.5;
        }
.settings-section .subtitle {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0.3rem;
    }
.settings-section form {
        padding: 1.5625rem 1.25rem 0.625rem;
        background: var(--details-bg);
        border-radius: var(--radius-md);
        border: 1px solid var(--border-color);
    }
@media (max-width: 820px) {
.settings-section form {
            padding-top: 20px
    }
        }
.settings-section form .form-description {
			color: var(--text-muted);
			font-size: 0.6875rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 15px;
            -webkit-user-select: none;
               -moz-user-select: none;
                    user-select: none;
		}
@media (max-width: 820px) {
.settings-section form .form-description {
                margin-bottom: 20px
		}
            }
.settings-section form .form-grid {
            display: grid;
			grid-template-columns: minmax(82px, max-content) 1fr;
            align-items: center;
            margin-bottom: 10px;
            grid-gap: 0.9375rem 0.9375rem;
            gap: 0.9375rem 0.9375rem;
        }
.settings-section form .form-grid.edit-contact {
                /* margin-bottom: 0;*/
            }
@media (max-width: 820px) {
.settings-section form .form-grid {
                grid-template-columns: 1fr;
                margin-bottom: 16px;
                gap: 0.5rem 0.9375rem
        }
            }
.settings-section form .form-grid .label-container {
                display: inline-block;
            }
.settings-section form .form-grid .label-container label {
                    display: inline-block;
                    font-size: 0.875rem;
                    font-weight: 600;
                    color: var(--text-primary);
                }
@media (max-width: 820px) {
.settings-section form .form-grid .input-container {
                    margin-bottom: 10px
            }
                }
.settings-section form .form-grid input, .settings-section form .form-grid textarea, .settings-section form .form-grid select {
                width: 100%;
                color: var(--text-primary);
                background: var(--bg-surface);
                font-size: 0.875rem;
                min-height: 2.5rem;
                display: flex;
                border-radius: var(--radius-xs);
                align-items: center;
                padding: 0.625rem 1rem;
                border: 1px solid var(--border-color);
                transition: border-color 0.15s ease;
                outline:none;
                max-height: 200px;
                resize:none!important;
                field-sizing: content;
            }
/* New CSS feature*/
.settings-section form .form-grid input::-moz-placeholder, .settings-section form .form-grid textarea::-moz-placeholder, .settings-section form .form-grid select::-moz-placeholder {
                    -moz-transition:  opacity 0.3s;
                    transition:  opacity 0.3s;
                    opacity: 0.55;
                }
.settings-section form .form-grid input::placeholder, .settings-section form .form-grid textarea::placeholder, .settings-section form .form-grid select::placeholder {
                    transition:  opacity 0.3s;
                    opacity: 0.55;
                }
.settings-section form .form-grid input:focus, .settings-section form .form-grid textarea:focus, .settings-section form .form-grid select:focus {
                    outline: none;
                    border-color: var(--color-accent);
                }
.settings-section form .form-grid input:focus::-moz-placeholder, .settings-section form .form-grid textarea:focus::-moz-placeholder, .settings-section form .form-grid select:focus::-moz-placeholder {
                        opacity: 0.35;
                    }
.settings-section form .form-grid input:focus::placeholder, .settings-section form .form-grid textarea:focus::placeholder, .settings-section form .form-grid select:focus::placeholder {
                        opacity: 0.35;
                    }
.settings-section form .form-grid .form-actions {
                display: flex;
                gap: 8px;
            }
.settings-section form .form-grid .form-actions button {
                    display: inline-flex;
                    align-items: center;
                    gap: 8px;
                    padding: 0.625rem 1.25rem;
                    height: 2.1875rem;
                    border-radius: var(--radius-md);
                    corner-shape: squircle;
                    font-size: 0.8125rem;
                    font-weight: 500;
                    border: 1px solid;
                    white-space: nowrap;
                    transition: all 0.2s;
                }
.settings-section form .form-grid .form-actions button:hover:not([disabled]) {
                        opacity: 0.9;
                    }
.settings-section form .form-grid .form-actions button[disabled] {
                        cursor: not-allowed;
                    }
.settings-section form .form-grid .form-actions button.btn-save {
                        color: white;
                        background: var(--color-accent);
                        border-color: var(--color-accent);
                    }
.settings-section form .form-grid .form-actions button.btn-cancel {
                        color: var(--text-secondary);
                        border-color: var(--border-color);
                    }
.settings-section form .form-grid .form-actions button.btn-cancel:hover {
                            color: var(--text-primary);
                            border-color: var(--text-muted);
                        }
.settings-section form .form-grid .form-actions button .button-spinner {
                        display: inline-block;
                        width: 0.875rem;
                        height: 0.875rem;
                        border: 2px solid var(--border-color);
                        border-top-color: var(--color-accent);
                        border-radius: 50%;
                        animation: spin 0.8s linear infinite;
                    }
.settings-section .btn-add-contact,
    .settings-section .btn-add-invite,
    .settings-section .btn-export {
        display: inline-flex;
        align-items: center;
        padding: 0.625rem 1.25rem;
        background: var(--color-accent);
        color: white;
        border: none;
        gap: 0.5rem;
        border-radius: var(--radius-md);
        corner-shape: squircle;
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s, border-color 0.2s;
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
        border:1px solid var(--color-accent);
        border-bottom:none;
        height: 2.375rem;
        outline:none;
        z-index: 10;
    }
.settings-section .btn-add-contact:hover, .settings-section .btn-add-invite:hover, .settings-section .btn-export:hover {
            opacity: 0.9;
        }
.settings-section .btn-add-contact.expanded, .settings-section .btn-add-invite.expanded, .settings-section .btn-export.expanded {
            transition: background-color 0s, border-color 0s !important;
            color: var(--text-primary);
            color: var(--text-secondary);
            background: var(--details-bg);
            border-color: var(--border-color);
            border-bottom-color: var(--item-bg);
            box-shadow: none;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }
.settings-section .btn-add-contact.expanded:hover, .settings-section .btn-add-invite.expanded:hover, .settings-section .btn-export.expanded:hover {
                background: var(--bg-surface);
                /* background: var(--text-muted);*/
            }
.settings-section .btn-add-contact:disabled, .settings-section .btn-add-invite:disabled, .settings-section .btn-export:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
@media (max-width: 567px) {
.settings-section .btn-add-contact,
    .settings-section .btn-add-invite,
    .settings-section .btn-export {
            /* font-size: rem(16);*/
            height: 2.5rem
    }
        }
.settings-section .btn-add-contact svg, .settings-section .btn-add-invite svg, .settings-section .btn-export svg {
            width: 1rem;
            height: 1rem;
        }
.settings-section .list-title {
        display: none !important;
        padding-left: 18px;
        color: var(--text-muted);
        font-size: 0.6875rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 5px;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
        font-weight: 400;
    }
@media (max-width: 820px) {
.settings-section .list-title {
            margin-bottom: 20px
    }
        }
/* Team member remove button*/
.settings-section-team .btn-remove {
		padding: 0.375rem 0.75rem;
		font-size: 0.8125rem;
		color: var(--color-error, #dc2626);
		background: transparent;
		border: 1px solid var(--color-error-border, #d32f2f);
		border-radius: var(--radius-sm);
		cursor: pointer;
		transition: all 0.2s;
		display: flex;
		align-items: center;
		gap: 0.375rem;
	}
.settings-section-team .btn-remove:hover:not(:disabled) {
			background: var(--color-error-bg, #fef2f2);
			border-color: var(--color-error, #dc2626);
		}
.settings-section-team .btn-remove:disabled {
			opacity: 0.6;
			cursor: not-allowed;
		}
.settings-section-team .permission-notice {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.75rem 1rem;
		background: var(--color-info-bg, #e8f4f8);
		border: 1px solid var(--color-info-border, #b3d9e6);
		border-radius: var(--radius-md);
		color: var(--color-info-text, #004d66);
		font-size: 0.875rem;
		margin-bottom: 1.5rem;
	}
.settings-section-team .permission-notice svg {
			flex-shrink: 0;
			opacity: 0.7;
		}
.settings-section-team .add-invite-section {
		padding-top: 0.625rem;
	}
.settings-section-team .invite-form {
		margin-top: -1px;
        border-top-left-radius: 0;
	}
.settings-section-team .invite-form .setting-description {
			color: var(--text-secondary);
			font-size: 0.875rem;
			line-height: 1.5;
		}
.settings-section-team .invite-form .setting-control {
			display: flex;
			align-items: start;
			padding-top: 0.125rem;
		}
@media (max-width: 567px) {
.settings-section-team .invite-form .setting-control .input {
					height: 3rem;
					font-size: 1rem
			}
				}
.settings-section-team .invite-form .setting-control .input:hover, .settings-section-team .invite-form .setting-control .input:focus {
					border-color: var(--color-accent);
				}
.settings-section-team .invite-form .setting-control .input:focus {
					box-shadow: 0 0 0 3px rgba(var(--color-accent), 0.1);
				}
.settings-section-team .invite-form .setting-control select.input {
				cursor: pointer;
			}
.settings-section-team .invite-form .setting-control select.input option {
					padding: 0 0.5rem;
					background: var(--bg-primary);
					color: var(--text-primary);
				}
.settings-section-team .invite-form .setting-control select.input option span {
						color: var(--text-secondary);
					}
.settings-section-team .form-group:last-of-type {
			margin-bottom: 0;
		}
.settings-section-team .form-group select.input {
			cursor: pointer;
		}
.settings-section-team .form-group .input-help {
			display: block;
			font-size: 0.75rem;
			color: var(--text-muted);
			margin-top: 0.375rem;
		}
.settings-section-team .label_wrapper {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		margin-bottom: 0.5rem;
	}
.settings-section-team .label_wrapper label {
			margin-bottom: 0;
		}
.settings-section-team .label_wrapper .input-help {
			margin-top: 0;
		}
.settings-section-team .error-message {
		padding: 0.75rem;
		background: rgba(244, 67, 54, 0.1);
		border: 1px solid rgba(244, 67, 54, 0.3);
		border-radius: var(--radius-md);
		color: #d32f2f;
		font-size: 0.875rem;
		margin-bottom: 1rem;
	}
.settings-section-team .success-content {
		text-align: center;
		padding: 1.25rem 0;
	}
.settings-section-team .success-content .success-icon {
			font-size: 3rem;
			margin-bottom: 1rem;
		}
.settings-section-team .success-content .invite-code-section, 
		.settings-section-team .success-content .invite-url-section {
			text-align: left;
			margin-bottom: 20px;
		}
.settings-section-team .success-content .invite-code-section label, .settings-section-team .success-content .invite-url-section label {
				display: block;
				font-size: 0.8125rem;
				font-weight: 500;
				margin-bottom: 0.5rem;
				color: var(--text-muted);
			}
.settings-section-team .success-content .invite-url-section .url-display {
			display: flex;
			align-items: center;
			gap: 0.5rem;
			padding: 0.75rem;
			background: var(--input-bg);
			border: 1px solid var(--border-color);
			border-radius: var(--radius-md);
		}
.settings-section-team .success-content .invite-url-section .url-display input {
				flex: 1;
			}
.settings-section-team .success-content .help-text {
			font-size: 0.8125rem;
			color: var(--text-muted);
			margin: 1rem 0 1.5rem 0;
		}
.settings-section-team .btn-copy {
		padding: 0.4375rem 1rem;
		background: var(--button-bg);
		color: var(--text-primary);
		border: 1px solid var(--border-color);
		border-radius: var(--radius-sm);
		font-size: 0.8125rem;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.2s;
		white-space: nowrap;
	}
.settings-section-team .btn-copy:hover {
			background: var(--item-bg-hovered);
		}
.settings-section-team .btn {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.625rem 1.25rem;
		border: none;
		border-radius: var(--radius-md);
		font-size: 0.875rem;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.2s;
	}
.settings-section-team .btn.btn-primary {
			background: var(--color-accent);
			color: white;
		}
.settings-section-team .btn.btn-primary:hover {
				opacity: 0.9;
			}
.settings-section-team .btn.btn-secondary {
			background: var(--button-bg);
			color: var(--text-primary);
			border: 1px solid var(--border-color);
		}
.settings-section-team .btn.btn-secondary:hover {
				background: var(--item-bg-hovered);
			}
.settings-section-team .loading-state,
	.settings-section-team .error-state,
	.settings-section-team .empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 3rem 1.5rem 1.875rem;
		text-align: center;
	}
.settings-section-team .loading-state svg, .settings-section-team .error-state svg, .settings-section-team .empty-state svg {
			opacity: 0.3;
			margin-bottom: 16px;
		}
.settings-section-team .loading-state h3, .settings-section-team .error-state h3, .settings-section-team .empty-state h3 {
			margin: 0 0 0.5rem 0;
			font-size: 1.125rem;
			font-weight: 500;
		}
.settings-section-team .loading-state p, .settings-section-team .error-state p, .settings-section-team .empty-state p {
			margin: 0;
			color: var(--text-muted);
			font-size: 0.875rem;
		}
.settings-section-team .spinner {
		width: 2rem;
		height: 2rem;
		border: 3px solid var(--border-color);
		border-top-color: var(--color-accent);
		border-radius: 50%;
		animation: spin 0.8s linear infinite;
		margin-bottom: 1rem;
	}
@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}
.settings-section-team .team-list {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}
.settings-section-team .team-member {
		display: flex;
		align-items: center;
		gap: 1rem;
		padding: 0.875rem 1rem 0.875rem;
		background: var(--bg-surface);
		border: 1px solid var(--border-color);
		border-radius: 12px;
	}
/* transition: border 0.2s;*/
.settings-section-team .team-member.owner-card {
			background: linear-gradient(135deg, rgba(76, 175, 80, 0.05), rgba(56, 142, 60, 0.05));
			border-color: rgba(76, 175, 80, 0.2);
		}
.settings-section-team .team-member:hover {
			/* border-color: var(--color-accent);*/
		}
.settings-section-team .pending-invites-section {
		padding-top: 0.625rem;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		margin-bottom: 0.3125rem;
	}
.settings-section-team .pending-invites-section .subtitle {
			font-size: 0.9375rem;
		}
.settings-section-team .member-info {
		flex: 1;
		min-width: 0;
	}
.settings-section-team .member-info .member-name {
			font-weight: 500;
			font-size: 0.9375rem;
			color: var(--text-primary);
			margin-bottom: 0.3125rem;
		}
.settings-section-team .member-info .member-principal {
			font-size: 0.75rem;
			color: var(--text-secondary);
			font-family: 'Monaco', 'Courier New', monospace;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			line-height: 1.25;
		}
.settings-section-team .member-info .member-meta {
			font-size: 0.75rem;
			color: var(--text-muted);
			margin-top: 0.25rem;
		}
.settings-section-team .member-role {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}
.settings-section-team .role-badge {
		display: inline-flex;
		align-items: center;
		gap: 0.375rem;
		padding: 0.375rem 0.75rem;
		border-radius: var(--radius-sm);
		font-size: 0.75rem;
		font-weight: 500;
		white-space: nowrap;
	}
.settings-section-team .role-badge-owner {
		background: rgba(76, 175, 80, 0.1);
		color: #2e7d32;
	}
.settings-section-team .role-badge-manager {
		background: rgba(255, 152, 0, 0.1);
		color: #e65100;
	}
.settings-section-team .role-badge-viewer {
		background: rgba(158, 158, 158, 0.1);
		color: var(--text-secondary);
	}
.settings-section-team .btn-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2rem;
		height: 2rem;
		padding: 0;
		background: transparent;
		border: none;
		border-radius: var(--radius-sm);
		cursor: pointer;
		transition: background 0.2s;
	}
.settings-section-team .btn-icon:hover {
			background: var(--item-bg-hovered);
		}
.settings-section-team .btn-icon svg {
			opacity: 0.5;
		}
.audit-section {
	padding-top: 3.125rem;
	margin-bottom: 1.5625rem;
}
.audit-section .section-header {
		margin-bottom: 1.25rem;
		
	}
.audit-section .permission-notice {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        background: var(--color-info-bg, #e8f4f8);
        border: 1px solid var(--color-info-border, #b3d9e6);
        border-radius: var(--radius-md);
        color: var(--color-info-text, #004d66);
        font-size: 0.875rem;
        margin-bottom: 1.5rem;
    }
.audit-section .permission-notice svg {
            flex-shrink: 0;
            opacity: 0.7;
        }
.audit-section .audit-controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.25rem;
        gap: 1rem;
    }
.audit-section .control-group {
        display: flex;
        align-items: center;
        gap: 0.625rem;
    }
.audit-section .control-group label {
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--text-primary);
        }
.audit-section .control-group .limit-select {
            padding: 0.625rem 0.75rem;
            padding-right: 1.875rem;
            background: var(--input-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            font-size: 0.875rem;
            color: var(--text-primary);
            cursor: pointer;
        }
.audit-section .control-group .limit-select:focus {
                outline: none;
                border-color: var(--color-accent);
            }
@media (max-width: 567px) {
.audit-section .control-group .limit-select {
                font-size: 0.9375rem;
                height: 3rem
        }
            }
.audit-section .btn-refresh {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.625rem 0.875rem;
        background: var(--button-bg);
        color: var(--text-primary);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        font-size: 0.8125rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }
.audit-section .btn-refresh:hover:not(:disabled) {
            background: var(--item-bg-hovered);
        }
.audit-section .btn-refresh:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
@media (max-width: 567px) {
.audit-section .btn-refresh {
            height: 3rem;
            font-size: 0.9375rem
    }
        }
.audit-section .loading-state,
    .audit-section .error-state,
    .audit-section .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0px 1.5rem;
        text-align: center;
    }
.audit-section .empty-state {
		flex-direction: row;
		gap: 0.5rem;
		justify-content: flex-start;
		padding-left: 0;
	}
.audit-section .empty-state svg {
			display: none !important;
		}
.audit-section .empty-state p {
			color: var(--text-muted) !important;
		}
.audit-section :is(.loading-state, .error-state, .empty-state) svg {
        opacity: 0.3;
        margin-bottom: 0.625rem;
		width: 1.5625rem;
		height: 1.5625rem;
    }
.audit-section :is(.loading-state, .error-state, .empty-state) h3 {
        margin: 0 0 0.5rem 0;
        font-size: 1.125rem;
        font-weight: 500;
    }
.audit-section :is(.loading-state, .error-state, .empty-state) p {
        margin: 0;
        color: var(--text-secondary);
        font-size: 0.875rem;
    }
.audit-section .spinner {
        width: 2rem;
        height: 2rem;
        border: 3px solid var(--border-color);
        border-top-color: var(--color-accent);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        /* margin-bottom: 16px;*/
    }
@keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }
.audit-section .audit-table-wrapper {
        overflow-x: auto;
        border: 1px solid var(--border-color);
        border-radius: 12px;
    }
.audit-section .audit-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.875rem;
    }
.audit-section .audit-table thead {
            background: var(--item-bg-hovered);
            border-bottom: 1px solid var(--border-color);
        }
.audit-section .audit-table thead th {
                text-align: left;
                padding: 0.75rem 1rem;
                font-weight: 600;
                font-size: 0.8125rem;
                color: var(--text-muted);
                white-space: nowrap;
            }
.audit-section .audit-table tbody tr {
                border-bottom: 1px solid var(--border-color);
                transition: background 0.2s;
            }
.audit-section .audit-table tbody tr:last-child {
                    border-bottom: none;
                }
.audit-section .audit-table tbody tr:hover {
                    background: var(--item-bg-hovered);
                }
.audit-section .audit-table tbody td {
                padding: 0.75rem 1rem;
                vertical-align: top;
            }
.audit-section .time-cell {
        white-space: nowrap;
        color: var(--text-muted);
        font-size: 0.8125rem;
    }
.audit-section .action-cell {
        white-space: nowrap;
        font-weight: 500;
    }
.audit-section .user-cell .user-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
.audit-section .user-cell .user-label {
            font-weight: 500;
        }
.audit-section .user-cell .user-principal {
            font-size: 0.75rem;
            font-family: 'Monaco', 'Courier New', monospace;
            color: var(--text-muted);
        }
.audit-section .details-cell {
        max-width: 18.75rem;
    }
.audit-section .details-cell .details-text {
            color: var(--text-muted);
            word-break: break-word;
        }
.audit-section .details-cell .no-details {
            color: var(--text-muted);
            opacity: 0.5;
        }
.audit-section .audit-footer {
        margin-top: 1rem;
        text-align: center;
    }
.audit-section .audit-footer .entry-count {
            font-size: 0.8125rem;
            color: var(--text-muted);
            margin: 0;
        }
.audit-section .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.625rem 1.25rem;
        border: none;
        border-radius: var(--radius-md);
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }
.audit-section .btn.btn-secondary {
            background: var(--button-bg);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
        }
.audit-section .btn.btn-secondary:hover {
                background: var(--item-bg-hovered);
            }
/* glob: no files matched */
.token-select {
    position: relative;
    /* width: 100%;*/
    max-width: 9.375rem;
    min-width: 8.125rem;
}
.token-select .token-select-trigger {
        gap: 0.5rem;
        width: 100%;
        padding: 0.75rem;
        background: var(--details-bg);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
/* transition: all 0.2s;*/
.token-select .token-select-trigger:hover {
            border-color: var(--text-muted);
        }
.token-select.open .token-select-trigger {
        border-color: var(--text-secondary);
        /* box-shadow: 0 0 0 3px rgba(59, 0, 185, 0.1);*/
    }
.token-select .token-selected {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        flex: 1;
    }
.token-select .token-icon {
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
    }
.token-select .token-symbol {
        font-weight: 600;
        font-size: 0.9375rem;
        color: var(--text-primary, #1a1a1a);
    }
.token-select .dropdown-arrow {
        width: 0.75rem;
        height: 0.75rem;
        fill: var(--text-secondary, #666);
        transition: transform 0.2s;
    }
.token-select .token-select.open .dropdown-arrow {
        transform: rotate(180deg);
    }
.token-select .token-dropdown {
        position: absolute;
        width: 100%;
        top: calc(100% + 0rem);
        left: 0;
        right: 0;

        /* right:auto;*/
        /* left: calc(100% + 1px);*/
        /* top: 0;*/

        background: var(--details-bg);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 1000;
        max-height: 17.5rem;
        overflow-y: auto;
    }
.token-select .token-option {
        width: 100%;
        padding: 0.5rem 1rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        border: none;
        cursor: pointer;
        transition: background 0.15s;
    }
.token-select .token-option:hover {
            background: var(--item-bg-hovered);
        }
.token-select .token-option.selected {
            background: var(--item-bg-hovered);
        }
.token-select .token-option:first-child {
            border-radius: 8px 8px 0 0;
        }
.token-select .token-option:last-child {
            border-radius: 0 0 8px 8px;
        }
.token-select .token-info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.125rem;
    }
.token-select label {
      display: block;
      margin-bottom: 0.5rem;
      font-weight: 500;
      font-size: 0.875rem;
      color: var(--text-primary, #1a1a1a);
    }
/* Off-Ramp — offramp-specific overrides only.*/
/* All core styles (send-field, send-actions, send-error, send-success, btn-*)*/
/* come from features/balances/balances.scss.*/
/* ── Form header ──────────────────────────────────────────────────────────────*/
.offramp-form-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 5px;
}
.offramp-form-header strong {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-primary);
    }
.offramp-form-header span {
        font-size: 0.75rem;
        line-height: 1.3;
        text-wrap: balance;
    }
/* ── Review: read-only field labels ───────────────────────────────────────────*/
/* .label-wrapper uses <label> in send; here we use <span class="offramp-label">*/
/* so we match the same visual weight without an accessibility warning.*/
.offramp-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: right;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}
/* Read-only value displayed in review rows*/
.offramp-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    padding: 2px 0;
    display: block;
}
/* Hint text below gas fee estimates*/
.offramp-hint {
    font-size: 12px;
    color: var(--text-secondary, #888);
    display: block;
    margin-top: 4px;
    font-weight: 400;
}
/* ── Review: warning banners ───────────────────────────────────────────────────*/
/* Amber tint for irreversibility notice (overrides the default red send-error)*/
.offramp-caution {
    background: rgba(251, 188, 4, 0.12);
    border-color: rgba(251, 188, 4, 0.5);
    color: var(--text-primary);
}
/* One-time network warning — same structure but with inline dismiss button*/
.offramp-network-warning {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.offramp-network-warning .offramp-dismiss {
        flex-shrink: 0;
        background: none;
        border: none;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-primary);
        cursor: pointer;
        padding: 0;
        opacity: 0.7;
    }
.offramp-network-warning .offramp-dismiss:hover { opacity: 1; }
.offramp-progress {
    padding: 1.25rem 0;
    text-align: center;
}
.offramp-progress .success-icon {
        font-size: 48px;
        color: #28a745;
        margin-bottom: 0.75rem;
        line-height: 1;
    }
.offramp-progress .success-message {
        font-size: 14px;
        color: var(--text-primary);
        line-height: 1.5;
        word-break: break-all;
    }
.offramp-complete {
    padding: 1.25rem 0 0.3125rem;
    text-align: center;
}
.offramp-complete .success-icon {
        font-size: 48px;
        color: #28a745;
        margin-bottom: 0.75rem;
        line-height: 1;
    }
.offramp-complete .success-message {
        font-size: 14px;
        color: var(--text-primary);
        line-height: 1.5;
        word-break: break-all;
    }
/* ── Progress: large spinner (re-uses button-spinner sizing) ──────────────────*/
.offramp-spinner-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: inherit;   /* neutralise the .success-icon font-size*/
    margin-bottom: 10px;
}
.offramp-spinner-wrap .button-spinner {
        display: inline-block;
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        border: 2px solid rgba(0, 0, 0, 0.2);
        border-top-color: var(--color-accent);
        border-radius: 50%;
        animation: spin 0.6s linear infinite;
    }
.offramp-lg-spinner {
    width: 32px !important;
    height: 32px !important;
    border-width: 3px !important;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
/* ── Complete: Etherscan link styled as btn-send ───────────────────────────────*/
.offramp-etherscan-btn {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ── Failed: withdrawal ID note ────────────────────────────────────────────────*/
.offramp-id-note {
    font-size: 12px;
};
.offramp-id-note code {
        font-family: monospace;
        background: rgba(0,0,0,0.06);
        padding: 1px 4px;
        border-radius: 3px;
    }
/*# sourceMappingURL=main.css.map */