html, body {
    height: 100%; /* Ensure html and body take full viewport height */
    margin: 0;
    padding: 0;
}

body {
    font-family: 'SF Pro Rounded', sans-serif; /* Use SF Pro Rounded as the primary font */
    background-color: #0A0A0A; /* Default background from palette */
    color: #F5F5F5; /* Default textPrimary from palette */
    line-height: 1.6;
    box-sizing: border-box; /* Include padding in height */
    overflow-y: auto; /* Allow body to scroll when content overflows */
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, filter 0.15s ease-in-out;
    user-select: none; /* Prevent text selection on the entire body */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

.main-wrapper-blur {
    filter: blur(5px);
}

.main-wrapper {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center horizontally */
    justify-content: center; /* Center vertically if content is smaller than viewport */
    min-height: 100%; /* Ensure main-wrapper takes full height of body */
    width: 100%; /* Take full width */
    box-sizing: border-box; /* Include padding in height */
    transition: filter 0.15s ease-in-out; /* Add transition for filter */
}

.header-text-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 15px; /* Increased space above the navigation text */
    margin-bottom: -34px; /* Space between header text and main container, reduced */
}

.header-text-container span {
    font-family: 'SF Pro Rounded', sans-serif;
    font-size: 1.1em; /* Same size as Primary/Background Color text */
    font-weight: 400; /* Regular weight, matching body text */
    color: var(--dynamic-text-primary, #F5F5F5); /* Linked to textPrimary */
    margin-right: 20px; /* Adjust for spacing */
    white-space: nowrap; /* Prevent words from breaking */
    user-select: none; /* Prevent text selection */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    cursor: default; /* Prevent cursor change on hover */
    transition: color 0.15s ease-in-out;
}

.header-text-container span:last-child {
    margin-right: 0; /* No margin after the last word */
}

.header-logo {
    width: 1.8em; /* Adjust size to match text height, made even bigger */
    height: 1.8em; /* Adjust size to match text height, made even bigger */
    margin-right: 18px; /* Space between logo and first word, increased further */
    margin-top: -0.6px; /* Move down slightly for better vertical alignment */
    vertical-align: middle; /* Align with text baseline */
    fill: currentColor !important; /* Ensure fill uses textPrimary color */
    stroke: none !important; /* Ensure no stroke is applied */
    user-select: none; /* Prevent selection */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    cursor: default; /* Prevent cursor change on hover */
    transition: fill 0.15s ease-in-out;
}

.header-text-pulse {
    color: var(--dynamic-primary-color) !important; /* Link to primary color */
    transition: color 0.15s ease-in-out;
}

/* SF Pro Rounded Fonts */
@font-face {
    font-family: 'SF Pro Rounded';
    src: url('fonts/SF Pro/SF-Pro-Rounded-Ultralight.otf') format('opentype');
    font-weight: 100; /* Ultralight */
    font-style: normal;
}

@font-face {
    font-family: 'SF Pro Rounded';
    src: url('fonts/SF Pro/SF-Pro-Rounded-Thin.otf') format('opentype');
    font-weight: 200; /* Thin */
    font-style: normal;
}

@font-face {
    font-family: 'SF Pro Rounded';
    src: url('fonts/SF Pro/SF-Pro-Rounded-Light.otf') format('opentype');
    font-weight: 300; /* Light */
    font-style: normal;
}

@font-face {
    font-family: 'SF Pro Rounded';
    src: url('fonts/SF Pro/SF-Pro-Rounded-Regular.otf') format('opentype');
    font-weight: 400; /* Regular */
    font-style: normal;
}

@font-face {
    font-family: 'SF Pro Rounded';
    src: url('fonts/SF Pro/SF-Pro-Rounded-Medium.otf') format('opentype');
    font-weight: 500; /* Medium */
    font-style: normal;
}

@font-face {
    font-family: 'SF Pro Rounded';
    src: url('fonts/SF Pro/SF-Pro-Rounded-Semibold.otf') format('opentype');
    font-weight: 600; /* Semibold */
    font-style: normal;
}

@font-face {
    font-family: 'SF Pro Rounded';
    src: url('fonts/SF Pro/SF-Pro-Rounded-Bold.otf') format('opentype');
    font-weight: 700; /* Bold */
    font-style: normal;
}

@font-face {
    font-family: 'SF Pro Rounded';
    src: url('fonts/SF Pro/SF-Pro-Rounded-Heavy.otf') format('opentype');
    font-weight: 800; /* Heavy */
    font-style: normal;
}

@font-face {
    font-family: 'SF Pro Rounded';
    src: url('fonts/SF Pro/SF-Pro-Rounded-Black.otf') format('opentype');
    font-weight: 900; /* Black */
    font-style: normal;
}

/* SF Mono Font */
@font-face {
    font-family: 'SF Mono';
    src: url('fonts/SF Mono/SF-Mono-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.container {
    max-width: 720px; /* Slightly wider container */
    width: 100%;
    margin: 0 auto;
    background-color: #141414; /* Default backgroundSecondary from palette */
    padding: 30px 30px 8px 30px; /* Reduced bottom padding from 30px to 15px */
    border-radius: 12px; /* More rounded corners */
    position: relative; /* Add this to make absolute positioning of children work */
    transform: scale(0.9); /* Scale down by 10% */
    transform-origin: center center; /* Scale from the center for proper centering */
    border: 3px solid var(--dynamic-primary-stroke, #252525); /* Default primaryStroke from palette */
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out, transform 0.15s ease-in-out;
}

h1 {
    text-align: center;
    color: #F5F5F5; /* Default textPrimary from palette */
    font-size: 2.2em; /* Larger title */
    margin-top: 8px; /* Move title up slightly without affecting button hover areas */
    margin-bottom: 30px;
    max-width: 400px; /* Reduce horizontal space to prevent overlap with buttons */
    margin-left: auto;
    margin-right: auto;
    font-weight: 500; /* Regular font-weight for the title */
    user-select: none; /* Prevent text selection */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    cursor: default; /* Prevent cursor change on hover */
    transition: color 0.15s ease-in-out;
    transform: translateZ(0);
    contain: layout paint;
}

.input-group, .output-group {
    margin-bottom: 25px;
}

.input-group {
    margin-bottom: 25px;
    display: flex;
    align-items: center; /* Vertically center children */
    flex-wrap: wrap; /* Allow items to wrap */
    user-select: none; /* Prevent text selection within the input group */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

.input-group label {
    user-select: none; /* Prevent text selection */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    cursor: default; /* Prevent cursor change on hover */
}

.output-group {
    margin-bottom: 25px;
    user-select: text; /* Allow text selection within the output group - matches popup-content behavior */
    -webkit-user-select: text; /* Safari */
    -moz-user-select: text; /* Firefox */
    -ms-user-select: text; /* IE10+ */
}

.output-group label {
    user-select: none; /* Prevent text selection */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    cursor: default; /* Prevent cursor change on hover */
}

.output-group .sol-tip-toggle {
    user-select: none; /* Prevent text selection */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

.output-group .copyable-wallet-address {
    user-select: none; /* Prevent selection of the container itself */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

/* Invisible selectable text to fix text selection boundaries */
.invisible-text {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

/* Info button styling */
.info-button {
    position: absolute;
    top: 15px;
    left: 15px;
    background: none;
    border: none;
    padding: 20px;
    font-size: 2.0em;
    cursor: pointer;
    color: var(--dynamic-text-tertiary, #888888);
    border-radius: 8px;
    z-index: 10; /* Ensure buttons are above the title */
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.info-button:hover {
    color: var(--dynamic-primary-color, #526FFF);
}

.info-button svg.icon-default,
.info-button svg.icon-hover {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    fill: currentColor !important;
    stroke: none !important;
    transition: opacity 0.15s ease-in-out;
}

.info-button svg.icon-hover {
    opacity: 0;
}

.info-button:hover svg.icon-default {
    opacity: 0;
}

.info-button:hover svg.icon-hover {
    opacity: 1;
}

/* Reset button styling */
.reset-button {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    padding: 20px;
    font-size: 2.0em;
    cursor: pointer;
    color: var(--dynamic-text-tertiary, #888888);
    border-radius: 8px;
    z-index: 10; /* Ensure buttons are above the title */
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.reset-button:hover {
    color: var(--dynamic-primary-color, #526FFF);
}

.reset-button svg.icon-default,
.reset-button svg.icon-hover {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    fill: currentColor !important;
    stroke: none !important;
    transition: opacity 0.15s ease-in-out;
}

.reset-button svg.icon-hover {
    opacity: 0;
}

.reset-button:hover svg.icon-default {
    opacity: 0;
}

.reset-button:hover svg.icon-hover {
    opacity: 1;
}

.separator {
    height: 3px; /* Match 3px border thickness */
    background-color: var(--dynamic-primary-stroke, #252525); /* Default primaryStroke */
    margin: 20px 0 38px 0; /* Reduced bottom margin to bring content closer */
    transition: background-color 0.15s ease-in-out;
}

label {
    display: block;
    width: 100%; /* Ensure label takes full width */
    margin-bottom: 5px; /* Small margin below label */
    font-weight: 500; /* Medium weight */
    color: #CCCCCC; /* Default textSecondary from palette */
    font-size: 1.1em;
    user-select: none; /* Prevent text selection */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    cursor: default; /* Prevent cursor change on hover */
    transition: color 0.15s ease-in-out;
}

#colorInput, #primaryColorInput {
    width: 150px; /* Slightly wider input */
    padding: 6px 8px; /* Reserve space for focus border */
    margin-right: 15px;
    margin-top: 5px; /* Space between label and input */
    border: 3px solid var(--dynamic-secondary-stroke, #333333); /* Use dynamic secondaryStroke from palette */
    border-radius: 8px;
    font-family: 'SF Mono', monospace; /* Use SF Mono font for consistency */
    font-size: 1em;
    background-color: #1C1C1C; /* Default backgroundTertiary from palette */
    color: #888888; /* Default textTertiary from palette */
    box-shadow: none !important; /* Remove any default box-shadow from Safari */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out, color 0.15s ease-in-out;
    -webkit-appearance: none; /* Remove default styling for consistency */
    -moz-appearance: none;
    appearance: none;
    user-select: text; /* Allow text selection within the input field */
    -webkit-user-select: text; /* Safari */
    -moz-user-select: text; /* Firefox */
    -ms-user-select: text; /* IE10+ */
}

#colorInput:focus, #primaryColorInput:focus {
    border-color: var(--dynamic-primary-color); /* Just change border color, no width change */
    outline: none;
    text-shadow: none !important; /* Force removal of text shadow for Safari */
}

/* Custom selection style for input text */
#colorInput::selection, #primaryColorInput::selection {
    background: var(--dynamic-primary-color); /* Use the dynamic primary color for selection background */
    color: #F5F5F5; /* Set text color to textPrimary for contrast */
    text-shadow: none !important; /* Remove any default text-shadow */
    box-shadow: none !important; /* Remove any default box-shadow */
}

#colorPicker, #primaryColorPicker {
    width: 37.5px;
    height: 37.5px;
    margin-top: 5.5px;
    border: 3px solid var(--dynamic-secondary-stroke, #333333); /* Use dynamic secondaryStroke from palette */
    padding: 0;
    background: none;
    cursor: pointer;
    border-radius: 8px; /* Rounded corners for color picker */
    outline: none; /* Remove outline on focus */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    overflow: hidden; /* Hide default color input border */
    transition: border-color 0.15s ease-in-out;
}

/* Target the internal color swatch for Webkit/Blink browsers */
#colorPicker::-webkit-color-swatch, #primaryColorPicker::-webkit-color-swatch {
    border: none !important; /* Remove border */
    outline: none !important; /* Remove outline */
    width: 31.5px !important;
    height: 31.5px !important;
}

/* Target the internal color swatch for Firefox */
#colorPicker::-moz-color-swatch, #primaryColorPicker::-moz-color-swatch {
    border: none !important; /* Remove border */
    outline: none !important; /* Remove outline */
    width: 31.5px !important;
    height: 31.5px !important;
}

#colorPicker::-webkit-color-swatch-wrapper, #primaryColorPicker::-webkit-color-swatch-wrapper {
    padding: 0;
}

#jsonOutput {
    width: 100%;
    min-height: 250px; /* Taller output box */
    padding: 13px; /* Reserve space for focus border */
    border: 3px solid var(--dynamic-secondary-stroke, #333333); /* Use dynamic secondaryStroke from palette */
    border-radius: 8px;
    font-family: 'SF Mono', monospace; /* Use SF Mono font */
    background-color: #1C1C1C; /* Default backgroundTertiary from palette */
    box-sizing: border-box;
    resize: none; /* Prevent manual resizing */
    font-size: 0.95em;
    line-height: 1.45;
    color: #888888; /* Default textTertiary from palette */
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    user-select: text; /* Allow text selection within the textarea */
    -webkit-user-select: text; /* Safari */
    -moz-user-select: text; /* Firefox */
    -ms-user-select: text; /* IE10+ */
}

#jsonOutput:focus {
    border-color: var(--dynamic-primary-color); /* Just change border color, no width change */
    outline: none;
    /* box-shadow: 0 0 0 3px var(--dynamic-primary-color, rgba(0, 122, 255, 0.25)); */
}

/* Custom selection style for JSON output */
#jsonOutput::selection {
    background: var(--dynamic-primary-color); /* Use the dynamic primary color for selection background */
    color: #F5F5F5; /* Set text color to textPrimary for contrast */
}

.json-output-flash {
    border: 3px solid var(--dynamic-primary-color) !important; /* Ensure 3px thickness and primary color */
    padding: 13px !important; /* Compensate for thicker border and match focus state */
    transition: border-color 0.15s ease-in-out;
}

/* .solana-wallet-flash - removed with textarea */

#copyButton {
    display: block;
    width: 100%;
    padding: 12px;
    background-color: #526FFF; /* Default primaryColor from palette */
    color: #F5F5F5; /* Default textPrimary from palette */
    border: none;
    border-radius: 8px; /* Rounded button */
    cursor: pointer;
    font-family: 'SF Pro Rounded', sans-serif; /* Use SF Pro Rounded for button text */
    font-size: 1.1em;
    margin-top: 15px;
    font-weight: 500;
    user-select: none; /* Prevent text selection */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#copyButton:hover {
    background-color: #005ecb; /* Darker blue on hover */
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
}

#copyButton:active {
    background-color: #004b9a;
    box-shadow: none;
}

/* Range Slider Styling */
#distanceFactorInput {
    width: calc(100% - 150px); /* Adjust width to fit next to color picker */
    margin-top: 10px;
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    background: #1C1C1C; /* Default backgroundTertiary from palette */
    outline: none;
    border-radius: 5px;
    border: 3px solid var(--dynamic-secondary-stroke, #333333); /* Use dynamic secondaryStroke from palette */
    transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

#distanceFactorInput::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--dynamic-primary-color); /* Default primaryColor from palette */
    cursor: pointer;
    box-shadow: none !important; /* Remove any box-shadow that might act as an outline */
    border: none !important; /* Remove any border that might act as an outline */
    outline: none !important; /* Remove outline */
    transition: background 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#distanceFactorInput::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--dynamic-primary-color); /* Default primaryColor from palette */
    cursor: pointer;
    box-shadow: none !important; /* Remove any box-shadow that might act as an outline */
    border: none !important; /* Remove any border that might act as an outline */
    outline: none !important; /* Remove outline */
    transition: background 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#distanceFactorValue {
    font-weight: 600;
    margin-left: 5px;
    color: #526FFF; /* Default primaryColor from palette */
    transition: color 0.15s ease-in-out;
}

/* Dark Mode Styles for Range Slider */
/* body.dark-mode #distanceFactorInput {
    background: #4a4a4a;
} */

/* body.dark-mode #distanceFactorInput::-webkit-slider-thumb,
body.dark-mode #distanceFactorInput::-moz-range-thumb {
    background: #005ecb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
} */

body.dark-mode #distanceFactorValue {
    color: #99ccff;
}

/* Dark Mode Styles */
/* body.dark-mode h1 {
    color: #f5f5f5;
} */

/* body.dark-mode label {
    color: #cccccc;
} */

/* body.dark-mode #colorInput {
    border-color: #4a4a4a;
    background-color: #3a3a3a;
    color: #f5f5f5;
} */

body.dark-mode #colorPicker, body.dark-mode #primaryColorPicker {
    border-color: #4a4a4a;
}

/* body.dark-mode #jsonOutput {
    border-color: #4a4a4a;
    background-color: #3a3a3a;
    color: #f5f5f5;
} */

body.dark-mode #copyButton {
    background-color: #005ecb;
}

body.dark-mode #copyButton:hover {
    background-color: #004b9a;
}

body.dark-mode #copyButton:active {
    background-color: #003a7a;
}

/* Info Toggle Button Styling */
.info-toggle {
    position: absolute; /* Position relative to the nearest positioned ancestor (.container) */
    top: 20px; /* Adjust as needed, moved inward */
    left: 20px; /* Adjust as needed, moved inward */
}

.reset-toggle {
    position: absolute;
    top: 20px; /* Adjust as needed, moved inward */
    right: 20px; /* Adjust as needed, moved inward */
}

.info-toggle button, .reset-toggle button {
    background: none; /* Remove background */
    border: none; /* Remove border */
    padding: 25px; /* Adjust padding for icon */
    font-size: 1.8em; /* Larger icon size */
    cursor: pointer;
    color: var(--dynamic-text-tertiary, #888888) !important; /* Enforce dynamic textTertiary for icon color */
    position: relative; /* Needed for absolute positioning of icons */
    transform: translateZ(0);
}

.info-toggle button:hover, .reset-toggle button:hover {
    color: var(--dynamic-primary-color, #007aff) !important; /* Enforce dynamic primaryColor on hover */
}

svg.icon-default, svg.icon-hover {
    width: 32px; /* Adjust size as needed, increased to prevent clipping */
    height: 32px; /* Adjust size as needed, increased to prevent clipping */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    fill: currentColor !important; /* Enforce fill to use currentColor */
    stroke: none !important; /* Remove stroke to prevent bolded appearance */
    transition: opacity 0.15s ease-in-out;
    color: currentColor !important; /* Add color property for consistency with currentColor usage */
}

svg.icon-hover {
    opacity: 0; /* Hidden by default */
}

.info-toggle button:hover svg.icon-default,
.reset-toggle button:hover svg.icon-default {
    opacity: 0; /* Hide default icon on hover */
}

.info-toggle button:hover svg.icon-hover,
.reset-toggle button:hover svg.icon-hover {
    opacity: 1; /* Show hover icon on hover */
}

/* Popup Modal Styling */
.popup-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */
}

.popup-content {
    background-color: #141414; /* Default backgroundSecondary from palette */
    padding: 30px;
    border: 3px solid var(--dynamic-primary-stroke, #252525); /* Use dynamic primaryStroke from palette */
    border-radius: 12px;
    width: 90%; /* Max width */
    max-width: 600px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    position: absolute; /* Changed to absolute for precise centering */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for element's own size */
    color: #F5F5F5; /* Default textPrimary from palette */
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    user-select: text; /* Allow text selection within the popup content */
    -webkit-user-select: text; /* Safari */
    -moz-user-select: text; /* Firefox */
    -ms-user-select: text; /* IE10+ */
}

/* Specific styling for the popup content selection */
.popup-content p::selection,
.popup-content h2::selection,
.popup-content h3::selection,
.popup-content li::selection, /* Include list items */
.popup-content b::selection,   /* Include bold text within list items */
.popup-content i::selection   /* Include italic text within list items */ {
    background: var(--dynamic-primary-color, #007bff) !important; /* Use dynamic primary color */
    color: #F5F5F5 !important; /* Ensure text is readable against primary color */
    text-shadow: none !important;
    box-shadow: none !important;
}
.popup-content p::-moz-selection,
.popup-content h2::-moz-selection,
.popup-content h3::-moz-selection,
.popup-content li::-moz-selection, /* Include list items for Firefox */
.popup-content b::-moz-selection,   /* Include bold text within list items for Firefox */
.popup-content i::-moz-selection   /* Include italic text within list items for Firefox */ {
    background: var(--dynamic-primary-color, #007bff) !important; /* For Firefox */
    color: #F5F5F5 !important; /* Ensure text is readable against primary color */
    text-shadow: none !important;
    box-shadow: none !important;
}

/* body.dark-mode .popup-content {
    background-color: #2a2a2a;
    border-color: #3a3a3a;
    color: #f5f5f5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
} */

.popup-close-button {
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 20px;
    padding: 5px;
    color: #888888; /* Default textTertiary from palette */
    user-select: none; /* Prevent text selection */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

.popup-close-button:hover,
.popup-close-button:focus {
    color: var(--dynamic-primary-color, #007aff); /* Change to dynamic primary color on hover/focus */
    text-decoration: none;
}

/* Removed dark-mode specific hover for close button as dynamic variable handles it */
/* body.dark-mode .popup-close-button:hover,
body.dark-mode .popup-close-button:focus {
    color: #fff;
} */

.popup-content h2,
.popup-content h3 {
    color: #526FFF; /* Default primaryColor from palette */
    margin-top: 20px;
    margin-bottom: 10px;
    transition: color 0.15s ease-in-out;
}

/* body.dark-mode .popup-content h2,
body.dark-mode .popup-content h3 {
    color: #99ccff;
} */

.popup-content ul {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 15px;
}

.popup-content ul li {
    margin-bottom: 5px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .popup-content {
        margin: 5% auto; /* Adjust margin for smaller screens */
        width: 95%;
    }
}

/* New Button Group above title */
.button-group-above-title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: -15px; /* Adjusted vertical position to move it down */
    margin-bottom: 20px; /* Adjusted space between button group and title */
    padding: 0;
    box-sizing: border-box;
}

/* Solana Tip Button Styling */
.sol-tip-toggle {
    /* border: 3px solid var(--dynamic-secondary-stroke, #333333); */ /* Removed border from container */
    border-radius: 8px; /* Rounded corners */
    margin: 15px 0 0 0; /* Adjusted margin to position it below the Copy button */
    /* padding: 2px; */ /* Removed padding from container */
    /* transition: border-color 0.15s ease-in-out, border-width 0.15s ease-in-out, padding 0.15s ease-in-out; */ /* Removed transition from container */
}

.sol-tip-toggle:hover {
    /* border-color: var(--dynamic-primary-color, #007aff); */ /* Removed border-color from container hover */
    /* border-width: 3px; */ /* Removed border-width from container hover */
    /* padding: 0; */ /* Removed padding from container hover */
}

.sol-tip-toggle button {
    background-color: var(--dynamic-background-tertiary, #1C1C1C); /* Set background color to match other inputs */
    color: var(--dynamic-text-primary, #F5F5F5); /* Text color set to textPrimary */
    border: 3px solid var(--dynamic-secondary-stroke, #333333); /* Default border on the button itself */
    border-radius: 8px; /* Rounded corners to match the container */
    width: 100%; /* Ensure button fills the container */
    padding: 8px 16px; /* Adjusted padding for desired button size */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    font-family: 'SF Pro Rounded', sans-serif; /* Use SF Pro Rounded for button text */
    font-size: 1.0em; /* Adjusted Font size */
    font-weight: 500;
    cursor: pointer;
    margin: 0; /* Remove margin from button itself */
    user-select: none; /* Prevent text selection */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.sol-tip-toggle button:hover {
    border-color: var(--dynamic-primary-color, #007aff); /* Primary color on hover */
    color: var(--dynamic-text-primary, #F5F5F5); /* Explicitly set to textPrimary on hover */
}

/* Adjust Info and Reset toggle positioning to be relative within the new group */
.info-toggle,
.reset-toggle {
    /* These were incorrectly set to static, reverting to absolute positioning */
    position: absolute;
    top: 17px;
    margin: 0;
}

.info-toggle { left: 20px; }
.reset-toggle { right: 20px; }

.info-toggle button,
.reset-toggle button {
    padding: 15px; /* Adjust padding for visual balance with new button */
    font-size: 1.6em;
}

/* Solana Tip Popup specific styling */
.solTipPopup .popup-content h2 {
    color: var(--dynamic-primary-color, #526FFF); /* Use primary color for headings */
}

.solTipPopup .popup-content p {
    /* Default text color for paragraphs (will be textTertiary from popup-content general rule) */
}

.solTipPopup .popup-content h3 {
    color: var(--dynamic-primary-color, #526FFF); /* Use primary color for headings */
}

/* SOL Tip Jar Address textarea removed - keeping copy button for future use */

/* SOL Address Container - matching main page copyable-wallet-address behavior */
.sol-address-container {
    position: relative;
    user-select: none; /* Prevent selection of the container itself */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

/* New Textarea Foundation - matching main JSON textarea styling */
#newTextarea {
    width: 100%;
    min-height: 44px; /* Compact height for single line address */
    padding: 13px; /* Reserve space for focus border */
    border: 3px solid var(--dynamic-secondary-stroke, #333333); /* Use dynamic secondaryStroke from palette */
    border-radius: 8px;
    font-family: 'SF Mono', monospace; /* Use SF Mono font */
    background-color: #1C1C1C; /* Default backgroundTertiary from palette */
    box-sizing: border-box;
    resize: none; /* Prevent manual resizing */
    font-size: 0.95em;
    line-height: 1.5;
    color: #888888; /* Default textTertiary from palette */
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    user-select: text; /* Allow text selection within the textarea */
    -webkit-user-select: text; /* Safari */
    -moz-user-select: text; /* Firefox */
    -ms-user-select: text; /* IE10+ */
}

#newTextarea:focus {
    border-color: var(--dynamic-primary-color); /* Just change border color, no width change */
    outline: none;
}

/* Custom selection style for new textarea */
#newTextarea::selection {
    background: var(--dynamic-primary-color); /* Use the dynamic primary color for selection background */
    color: #F5F5F5; /* Set text color to textPrimary for contrast */
}

/* Flash effect for new textarea when copying - matching main JSON textarea approach */
.new-textarea-flash {
    border: 3px solid var(--dynamic-primary-color) !important; /* Ensure 3px thickness and primary color */
    padding: 13px !important; /* Keep same padding since border is already 3px */
    transition: border-color 0.15s ease-in-out;
}

/* EXACT COPY OF JSON OUTPUT STYLING FOR TEST */
#jsonOutputTest {
    width: 100%;
    min-height: 400px; /* Even taller output box to ensure all JSON is visible */
    padding: 15px;
    border: 3px solid var(--dynamic-secondary-stroke, #333333); /* Use dynamic secondaryStroke from palette */
    border-radius: 8px;
    font-family: 'SF Mono', monospace; /* Use SF Mono font */
    background-color: var(--dynamic-background-tertiary, #1C1C1C); /* Use dynamic background color like original */
    box-sizing: border-box;
    resize: none; /* Prevent manual resizing */
    font-size: 0.95em;
    line-height: 1.5;
    color: #888888; /* Default textTertiary from palette */
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, border-width 0.15s ease-in-out, padding 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    user-select: text; /* Allow text selection within the textarea */
    -webkit-user-select: text; /* Safari */
    -moz-user-select: text; /* Firefox */
    -ms-user-select: text; /* IE10+ */
}

#jsonOutputTest:focus {
    border: 3px solid var(--dynamic-primary-color); /* Thicker border on focus */
    padding: 13px; /* Compensate for thicker border to maintain size */
    outline: none;
}

#jsonOutputTest::selection {
    background: var(--dynamic-primary-color); /* Use the dynamic primary color for selection background */
    color: #F5F5F5; /* Set text color to textPrimary for contrast */
}

/* Styling for the new Copy Address button */
#copySolanaAddressButton {
    display: block;
    width: 100%;
    padding: 12px;
    background-color: #526FFF; /* Default primaryColor from palette */
    color: #F5F5F5; /* Default textPrimary from palette */
    border: none;
    border-radius: 8px; /* Rounded button */
    cursor: pointer;
    font-family: 'SF Pro Rounded', sans-serif; /* Use SF Pro Rounded for button text */
    font-size: 1.1em;
    margin-top: 15px;
    font-weight: 500;
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    user-select: none; /* Prevent text selection */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

#copySolanaAddressButton:hover {
    background-color: #526FFF; /* Keep default primaryColor on hover */
    box-shadow: none; /* Remove box-shadow on hover */
}

#copySolanaAddressButton:active {
    background-color: #004b9a;
    box-shadow: none;
}

.copyable-wallet-address {
    user-select: none; /* Prevent selection of the container itself */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

@media (max-width: 480px) {
    .button-group-above-title {
        flex-direction: column;
        margin-bottom: 10px;
    }

    .sol-tip-toggle button {
        margin: 10px 0;
        width: 100%;
    }

    .info-toggle button,
    .reset-toggle button {
        padding: 10px;
        font-size: 1.4em;
    }
}