/* 
 * Complete Consolidated Pudd Creators CSS
 * Unified stylesheet combining my-profile.css and pudd-creators.css
 * Includes ALL components from both original files
 */

/* ========= CSS Variables for Consistency ========= */
:root {
  /* Color Palette */
  --primary-color: #3498db;
  --primary-hover: #2980b9;
  --success-color: #4CAF50;
  --success-hover: #45a049;
  --danger-color: #f44336;
  --danger-hover: #c0392b;
  --neutral-color: #6c757d;
  --neutral-hover: #5a6268;
  
  /* Background Colors */
  --public-bg: rgba(76, 175, 80, 0.1);
  --private-bg: rgba(244, 67, 54, 0.1);
  
  /* Border Colors */
  --border-light: #ddd;
  --border-public: #4CAF50;
  --border-private: #f44336;
  
  /* Text Colors */
  --text-dark: #333;
  --text-medium: #666;
  --text-light: #999;
}

/* ========= Global Overrides ========= */
/* Ensure all profile text content is normal weight */
.profile-company-info p,
.profile-basic-info p,
.account-details p,
.wallet-details p,
.product-description p,
.portfolio-item-description,
.portfolio-row p,
.portfolio-item-row p,
.description-text,
.portfolio-row .description-display p,
.portfolio-item-row p,
.file-info,
.about,
.signature-value,
.wallet-address,
.signature-content {
    font-weight: normal !important;
}

/* Make sure all field values after labels are normal weight */
.portfolio-row label + *,
.portfolio-item-row label + *,
p strong + span, 
p strong + *:not(strong) {
    font-weight: normal !important;
}

/* ========= Layout Containers ========= */
/* Profile width container - controls overall content width */
.profile-width-container {
    width: 80%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Two-column layout for profile pages */
.profile-columns-container {
    display: flex !important;
    gap: 30px !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.left-column {
    flex: 1 1 55% !important;
    min-width: 350px !important;
    max-width: 65% !important;
}

.right-column {
    flex: 1 1 40% !important;
    min-width: 300px !important;
    max-width: 45% !important;
}

.profile-column {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    box-sizing: border-box;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.left-column {
    background-color: #f0f8ff;
}

.right-column {
    background-color: #f5f5f5;
}

/* User info bar */
.user-info-bar {
    width: 80%;
    margin-left: 0;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: #f8f8f8;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Full width sections */
.full-width-sections {
    width: 100%;
    clear: both;
    margin: 20px 0;
    border-top: 1px solid #eee;
    padding-top: 20px;
    box-sizing: border-box;
}

.full-width-sections .profile-about,
.full-width-sections .profile-social-links {
    width: 100%;
    padding: 15px;
    margin-bottom: 15px;
    background-color: #f9f9f9;
    border-radius: 4px;
    box-sizing: border-box;
}

/* ========= Section Formats ========= */
.modified-indicator {
    color: #f44336;
    font-weight: bold;
    cursor: help;
}

.format-section {
   background: white;
   border-radius: 8px;
   border-left: 4px solid var(--primary-color);
   padding: 15px;
   margin: 15px 0;
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.format-item {
   background: #f8f9fa;
   padding: 12px;
   border-radius: 8px;
   border-left: 4px solid var(--primary-color);
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   transition: box-shadow 0.2s ease-in-out;
   margin-bottom: 15px;
}

.format-item:hover {
   box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Style for the creator card to match user info bar width */
.creator-card.format-section {
    width: 100%;
    box-sizing: border-box;
}

/* ========= Creator Profile Card ========= */
.creator-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    padding: 1.5em;
    transition: transform 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.creator-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.creator-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.avatar-container {
    margin-right: 20px;
    position: relative;
}

.creator-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary-color);
}

.creator-name {
    margin: 0;
    color: var(--text-dark);
}

/* ========= Form Elements ========= */
.form-section-title {
    font-weight: bold;
    font-size: 1.2em;
    margin: 20px 0 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
    color: var(--primary-color);
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="url"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
}

.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.form-full-width {
    grid-column: 1 / -1;
}

/* ========= Locked Field Styling ========= */
.locked-field {
    position: relative;
}

.locked-input {
    background-color: #f2f2f2 !important;
    cursor: not-allowed;
    border-color: #ccc !important;
}

.locked-field-message {
    display: none;
    position: absolute;
    background-color: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 100;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;
}

.locked-field:hover .locked-field-message {
    display: block;
}

/* Field Locked Popup */
.field-locked-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #333;
    color: white;
    padding: 15px 20px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 1000;
    max-width: 300px;
    text-align: center;
}

.popup-content {
    font-size: 14px;
}

/* ========= Avatar Upload Styling ========= */
.avatar-upload-section {
    margin-bottom: 20px;
}

.avatar-preview {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 10px;
    border: 2px solid var(--border-light);
}

.current-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========= Portfolio Section ========= */
.portfolio-section {
    margin: 30px 0;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 15px;
}

.portfolio-item {
    position: relative;
    transition: all 0.3s ease;
}

/* Portfolio Item States - Public/Private */
.portfolio-item[data-public="1"] {
    border-left: 3px solid var(--border-public) !important;
}

.portfolio-item[data-public="0"] {
    border-left: 3px solid var(--border-private) !important;
}

/* Visibility Status Indicator */
.visibility-status {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 10px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

.visibility-status {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: bold;
    margin-bottom: 10px;
    transition: background-color 0.3s, color 0.3s;
}

.visibility-status.public {
    background-color: var(--success-color);
    color: white;
}

.visibility-status.private {
    background-color: var(--danger-color);
    color: white;
}

/* ========= Profile Visibility Settings ========= */
.profile-visibility {
    margin-top: 20px;
}

.visibility-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.visibility-option {
    border: 2px solid var(--border-light);
    padding: 15px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.visibility-option:hover {
    border-color: var(--primary-color);
}

.visibility-option label {
    cursor: pointer;
}

.visibility-details {
    margin-top: 10px;
    padding-left: 15px;
    font-size: 13px;
    list-style: disc;
}

.visibility-details li {
    margin: 5px 0;
    color: var(--text-medium);
}

/* Public Active State */
.visibility-option.public-active,
.visibility-option.public-selected {
    background-color: var(--public-bg);
    border-color: var(--border-public);
}

/* Private Active State */
.visibility-option.private-active,
.visibility-option.private-selected {
    background-color: var(--private-bg);
    border-color: var(--border-private);
}

/* ========= Portfolio Item File Information ========= */
.file-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    padding: 8px;
    background: #f5f5f5;
    border-radius: 4px;
}

.file-info {
    margin-top: 15px;
    width: 100%;
}

.file-type {
    padding: 3px 8px;
    background: #e0e0e0;
    border-radius: 3px;
    font-size: 0.9em;
    text-transform: uppercase;
}

.file-hash {
    display: block;
    width: 100%;
    padding: 8px;
    margin: 10px 0;
    background-color: #f5f5f5;
    border-radius: 4px;
    font-family: monospace;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-all;
    white-space: normal;
    max-width: 100%;
    box-sizing: border-box;
}

.file-hash {
    display: block;
    background: #f0f8ff;
    border: 1px solid #d1e0ff;
    border-radius: 4px;
    padding: 10px;
    margin-top: 10px;
    position: relative;
}

.file-hash strong {
    display: block;
    color: #333;
    margin-bottom: 5px;
    font-weight: bold;
}

.file-hash .copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
}

.signature-valid {
    color: var(--success-color);
    font-weight: bold;
    font-size: 1.2em;
}

/* ========= Public Key Handling (Consolidated) ========= */
.public-key-info {
    margin-top: 10px;
    width: 100%;
}

.toggle-key-display {
    background-color: #4CAF50;
    color: white;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: normal;
    font-size: 14px;
    border: none;
    transition: background-color 0.3s;
    margin-top: 15px;
}

.toggle-key-display:hover {
    background-color: #45a049;
}

/* Container that appears when button is clicked */
.key-display-container {
    display: none !important;
    margin-top: 15px;
}

/* When show-key class is added, show the container */
.key-display-container.show-key {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px;
    align-items: flex-start;
}

/* Download button container */
.download-key-container {
    flex: 0 0 auto;
    align-items: center;
}

/* Download button styles - now square */
.download-public-key {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    background-color: #2196F3;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.download-public-key:hover {
    background-color: #0b7dda;
}

/* Public key textarea container - reduced width by 30% */
.key-text-container {
    flex-grow: 1;
    min-width: 200px;
}

/* Public key textarea styles */
.public-key-text {
    width: 100%;
    height: 100px;
    font-family: monospace;
    padding: 8px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: both;
    min-height: 80px;
    max-height: 400px;
    min-width: 200px;
    box-sizing: border-box;
    font-size: 12px;
    overflow: auto;
    word-break: break-all;
}

.key-content {
    position: relative;
    width: 100%;
    background: white;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 100;
    display: none; /* Hidden by default, toggled by JavaScript */
}

/* ========= Digital Signature Container (Consolidated) ========= */
.digital-signature-container {
    display: block !important;
    visibility: visible !important;
    background: #f0f8ff;
    border: 1px solid #d1e0ff;
    border-radius: 4px;
    padding: 10px;
    margin-top: 10px;
    position: relative;
}

.signature-container {
    margin: 10px 0;
    padding: 8px;
    background-color: #f5f5f5;
    border-left: 3px solid #4CAF50;
    border-radius: 3px;
}

.signature-content {
    width: 100%;
    max-height: 100px;
    overflow-y: auto;
    padding: 8px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.95em;
    white-space: pre-wrap;
    word-break: break-all;
    user-select: none;
    -webkit-user-select: none;
    cursor: not-allowed;
    color: #555;
    position: relative;
}

.lock-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 16px;
    color: #888;
}

.signature-label {
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
    display: flex;
    align-items: center;
}

.signature-label i {
    margin-right: 5px;
}

.signature-verified {
    color: #4CAF50;
    font-weight: bold;
    padding: 5px 10px;
    background-color: #f0fff0;
    border-radius: 3px;
    border-left: 3px solid #4CAF50;
    margin: 8px 0;
}

.signature-verified strong {
    display: flex;
    align-items: center;
}

.signature-verified strong:before {
    content: "✓";
    margin-right: 8px;
    color: #4CAF50;
    font-size: 18px;
}

.signature-value {
    font-family: monospace;
    background: #fff;
    padding: 3px 6px;
    border-radius: 3px;
    border: 1px solid #ddd;
    word-break: break-all;
}

/* ========= Portfolio Items (Consolidated) ========= */
.portfolio-item-row {
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.portfolio-item-row:last-child {
    border-bottom: none;
}

.portfolio-item-title {
    font-size: 20px;
    color: #333;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
}

.portfolio-item-created,
.portfolio-item-description,
.portfolio-item-price {
    margin: 8px 0;
}

.portfolio-item-description {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 15px;
    color: #555;
}

.portfolio-item-price {
    font-size: 16px;
    font-weight: bold;
    color: #2E8B57;
    background-color: #f5f5f5;
    padding: 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Portfolio item details container */
.portfolio-item-details {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    background-color: #f9f9f9;
}

/* Portfolio item row styling for better organization */
.portfolio-row {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.portfolio-row:last-child {
    border-bottom: none;
}

.portfolio-row label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.portfolio-row input[type="text"],
.portfolio-row input[type="number"],
.portfolio-row textarea {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

/* ========= Portfolio Management Section ========= */
.portfolio-management-section {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #a1a7d4;
    border-radius: 4px;
    border-left: 10px solid #007cba;
}

.portfolio-management-section h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
    font-size: 1.2em;
}

.portfolio-management-section h5 {
    margin-top: 20px;
    margin-bottom: 10px;
    color: #555;
}

.portfolio-item-count {
    margin: 15px 0;
    padding: 10px;
    background-color: #f0f8ff;
    border-radius: 114px;
    border-left: 3px solid #007bff;
}

.portfolio-item-count p {
    margin: 0;
    font-size: 1.1em;
}

.portfolio-transfer-section,
.portfolio-remove-section {
    margin: 15px 0;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 4px;
    border-left: 3px solid #007bff;
}

.portfolio-remove-section {
    padding-top: 15px;
    border-top: 1px solid #ddd;
}

.remove-portfolio-select {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.transfer-portfolio-btn,
.remove-portfolio-btn {
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 5px;
}

.remove-portfolio-btn:enabled {
    background-color: #dc3545;
}

.transfer-portfolio-btn:enabled:hover,
.remove-portfolio-btn:enabled:hover {
    background-color: #c82333;
}

/* ========= Private Key Note ========= */
.private-key-note {
    margin: 15px 0;
    padding: 10px;
    background-color: #fff3cd;
    border-left: 3px solid #ffc107;
    border-radius: 4px;
}

/* ========= Buttons (Consolidated) ========= */
.edit-profile-btn,
.update-button,
.add-portfolio-item-inline,
.remove-portfolio-item,
.view-all-portfolio-btn,
.view-portfolio-item-btn {
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

.edit-profile-btn {
    background-color: var(--primary-color);
    color: white;
    margin-top: 20px;
    display: block;
    width: 100%;
}

.edit-profile-btn:hover {
    background-color: var(--primary-hover);
}

.update-button {
    background-color: var(--success-color);
    color: white;
    margin-top: 20px;
    width: 100%;
}

.update-button:hover {
    background-color: var(--success-hover);
}

.update-button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

.add-portfolio-item-inline {
    background-color: var(--primary-color);
    color: white;
    margin-top: 15px;
}

.add-portfolio-item-inline:hover {
    background-color: var(--primary-hover);
}

.remove-portfolio-item {
    background-color: var(--danger-color);
    color: white;
    margin-top: 10px;
}

.remove-portfolio-item:hover {
    background-color: var(--danger-hover);
}

/* Close and Finish Editing Buttons */
.close-button,
.finish-editing-button {
    background-color: var(--neutral-color) !important;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 15px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
    display: block;
    width: 100%;
    margin-top: 10px;
}

.close-button:hover,
.finish-editing-button:hover {
    background-color: var(--neutral-hover) !important;
}

/* Description editing buttons */
.edit-description-btn {
    background-color: #2196F3;
    color: #f2e4f5;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    margin-top: 8px;
    transition: background-color 0.3s;
}

.edit-description-btn:hover {
    background-color: #0b7dda;
}

.save-description-btn {
    background-color: #4CAF50;
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.save-description-btn:hover {
    background-color: #45a049;
}

.cancel-edit-btn {
    background-color: #f44336;
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.cancel-edit-btn:hover {
    background-color: #d32f2f;
}

/* Portfolio management buttons */
.view-all-portfolio-btn {
    background-color: #4CAF50;
    color: white;
    padding: 12px 24px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.3s;
}

.view-all-portfolio-btn:hover {
    background-color: #45a049;
}

.view-portfolio-item-btn {
    background-color: #2196F3;
    color: white;
    padding: 10px 15px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    margin-bottom: 10px;
    transition: background-color 0.3s;
}

.view-portfolio-item-btn:hover {
    background-color: #0b7dda;
}

.view-portfolio-item-btn[data-item-id$="-edit"]:hover {
    background-color: #375fc9;
}

/* Download buttons styling */
.download-button {
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin: 10px 5px;
}

#downloadKey {
    background-color: var(--primary-color);
}

#downloadKey:hover {
    background-color: var(--primary-hover);
}

#downloadPublicKey {
    background-color: var(--success-color);
}

#downloadPublicKey:hover {
    background-color: var(--success-hover);
}

/* Download file button */
.download-file {
    display: inline-block;
    background-color: #4CAF50;
    color: white;
    padding: 8px 15px;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 10px;
    transition: background-color 0.3s;
    font-weight: bold;
}

.download-file:hover {
    background-color: #45a049;
    text-decoration: none;
    color: white;
}

.download-btn {
    display: inline-block;
    margin: 10px 0;
    padding: 10px 18px;
    background-color: #4CAF50;
    color: white !important;
    text-decoration: none !important;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.download-btn:hover {
    background-color: #3e8e41;
}

/* ========= Copy Buttons ========= */
.copy-btn {
    display: inline-block;
    margin-left: 5px;
    padding: 3px 8px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.copy-btn:hover {
    background-color: #e0e0e0;
}

/* ========= Wallet & Social Media Styling ========= */
.wallet-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.wallet-label {
    font-weight: bold;
    min-width: 80px;
    margin-right: 10px;
}

.wallet-address {
    background: #f5f5f5;
    padding: 8px 10px;
    border-radius: 4px;
    font-family: monospace;
    letter-spacing: 0.5px;
    font-size: 14px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    border: 1px solid #e0e0e0;
}

.wallet-copy {
    margin-left: 8px;
    padding: 3px 10px;
    font-size: 12px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.wallet-copy:hover {
    background-color: #2980b9;
}

.wallet-copy.copied {
    background-color: #27ae60;
}

/* Wallet input validation */
input[name^="wallet_"] {
    font-family: monospace;
    letter-spacing: 0.5px;
    padding: 10px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all 0.3s ease;
}

input.wallet-valid {
    border-color: #4CAF50 !important;
    background-color: rgba(76, 175, 80, 0.05) !important;
}

input.wallet-error {
    border-color: #f44336 !important;
    background-color: rgba(244, 67, 54, 0.05) !important;
}

.wallet-format-helper {
    display: block;
    font-size: 12px;
    margin-top: 4px;
    color: #666;
}

.wallet-format-helper.success-text {
    color: #4CAF50;
}

.wallet-format-helper.error-text {
    color: #f44336;
}

/* Social Media URL Validation Styles */
.social-format-helper {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #777;
    font-style: italic;
    transition: all 0.3s ease;
}

.social-format-helper.error-text {
    color: #f44336;
}

.social-format-helper.success-text {
    color: #4CAF50;
}

/* Input state styling */
input[type="url"].url-valid {
    border-color: #4CAF50;
    background-color: rgba(76, 175, 80, 0.05);
}

input[type="url"].url-error {
    border-color: #f44336;
    background-color: rgba(244, 67, 54, 0.05);
}

/* Add a subtle animation for focus */
input[type="url"]:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
    outline: none;
    transition: all 0.3s ease;
}

/* ========= Social Media Icons ========= */
.social-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    top: -1px;
}

/* Individual social media icons */
.social-icon.imdb {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23F5C518"><path d="M14.31 9.588v4.824h-1.537V9.588h1.537zm5.189 0v4.824H18.2v-3.06c0-.12-.035-.215-.105-.286a.375.375 0 00-.286-.105h-.388c-.101 0-.191.035-.271.105a.354.354 0 00-.12.286v3.06h-1.302v-3.06c0-.12-.035-.215-.105-.286a.354.354 0 00-.271-.105h-.403c-.092 0-.177.035-.256.105a.366.366 0 00-.121.286v3.06h-1.302V9.588h3.347c.194 0 .369.07.524.211.156.14.248.321.279.541a.979.979 0 01.806-.752h2.284zM8.822 9.588v4.824H7.74a.463.463 0 01-.422-.271L6.21 11.717v2.695H4.971V9.588h1.08a.463.463 0 01.423.27L7.582 12.3V9.588h1.24zM24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12zm-9.802-5.895H4.019v11.79h10.18v-11.79z"/></svg>');
}

.social-icon.linkedin {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%230A66C2"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>');
}

.social-icon.youtube {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23FF0000"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>');
}

.social-icon.tiktok {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23000000"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>');
}

.social-icon.x-twitter {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23000000"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>');
}

.social-icon.facebook {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%231877F2"><path d="M24 12.073c0-5.8-4.762-10.5-10.636-10.5-5.875 0-10.636 4.7-10.636 10.5 0 5.244 3.88 9.587 8.96 10.373v-7.337h-2.696v-3.036h2.696V9.379c0-2.63 1.582-4.082 3.99-4.082 1.156 0 2.363.201 2.363.201v2.576h-1.33c-1.31 0-1.718.808-1.718 1.636v1.961h2.92l-.466 3.036h-2.454v7.337c5.08-.786 8.96-5.13 8.96-10.373Z"/></svg>');
}

.social-icon.instagram {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23E4405F"><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913a5.885 5.885 0 001.384 2.126A5.868 5.868 0 004.14 23.37c.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558a5.898 5.898 0 002.126-1.384 5.86 5.86 0 001.384-2.126c.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913a5.89 5.89 0 00-1.384-2.126A5.847 5.847 0 0019.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227a3.81 3.81 0 01-.899 1.382 3.744 3.744 0 01-1.38.896c-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421a3.716 3.716 0 01-1.379-.899 3.644 3.644 0 01-.9-1.38c-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678a6.162 6.162 0 100 12.324 6.162 6.162 0 100-12.324zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405a1.441 1.441 0 01-2.88 0 1.44 1.44 0 012.88 0z"/></svg>');
}

/* Position the social media icons consistently with wallet icons */
label .social-icon {
    position: relative;
    top: -1px;
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
}

/* ========= Wallet Icons ========= */
.wallet-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.wallet-icon.bitcoin { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23F7931A"><path d="M23.638 14.904c-1.602 6.43-8.113 10.34-14.542 8.736C2.67 22.05-1.244 15.525.362 9.105 1.962 2.67 8.475-1.243 14.9.358c6.43 1.605 10.342 8.115 8.738 14.548v-.002zm-6.35-4.613c.24-1.59-.974-2.45-2.64-3.03l.54-2.153-1.315-.33-.525 2.107c-.345-.087-.705-.167-1.064-.25l.526-2.127-1.32-.33-.54 2.165c-.285-.067-.565-.132-.84-.2l-1.815-.45-.35 1.4s.975.225.955.236c.535.136.63.486.615.766l-1.477 5.92c-.075.166-.24.406-.614.314.015.02-.96-.24-.96-.24l-.66 1.51 1.71.426.93.242-.54 2.19 1.32.327.54-2.17c.36.1.705.19 1.05.273l-.51 2.154 1.32.33.545-2.19c2.24.427 3.93.257 4.64-1.774.57-1.637-.03-2.58-1.217-3.196.854-.193 1.5-.76 1.68-1.93h.01zm-3.01 4.22c-.404 1.64-3.157.75-4.05.53l.72-2.9c.896.23 3.757.67 3.33 2.37zm.41-4.24c-.37 1.49-2.662.735-3.405.55l.654-2.64c.744.18 3.137.52 2.75 2.084v.006z"/></svg>'); }
.wallet-icon.ethereum { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23627EEA"><path d="M11.944 17.97L4.58 13.62 11.943 24l7.37-10.38-7.372 4.35h.003zM12.056 0L4.69 12.223l7.365 4.354 7.365-4.35L12.056 0z"/></svg>'); }
.wallet-icon.solana { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="10.9" y1="12" x2="21.9" y2="12"><stop offset=".2" stop-color="%239945FF"/><stop offset=".5" stop-color="%238752F3"/><stop offset=".8" stop-color="%235497D5"/></linearGradient><path d="M4.2 19.5c-.2 0-.3-.1-.4-.2-.1-.1-.1-.3 0-.5l2-2.8c.1-.2.3-.3.5-.3h9.7c.3 0 .5.2.4.5-.1.1-.2.3-.4.3H7.5l-2.5 2.7c-.2.2-.5.3-.8.3zm0-15c-.2 0-.3.1-.4.2-.1.1-.1.3 0 .5l2 2.8c.1.2.3.3.5.3h9.7c.3 0 .5-.2.4-.5-.1-.1-.2-.3-.4-.3H7.5L5 4.8c-.2-.2-.5-.3-.8-.3zm17 7.5c.2 0 .3-.1.4-.2.1-.1.1-.3 0-.5l-2-2.8c-.1-.2-.3-.3-.5-.3H9.4c-.3 0-.5.2-.4.5.1.1.2.3.4.3h8.5l2.5 2.7c.2.2.5.3.8.3z" fill="%23000"/><path d="M18.2 17.4c.1-.1.1-.3 0-.5l-2-2.8c-.1-.2-.3-.3-.5-.3H6.1c-.3 0-.5.2-.4.5.1.1.2.3.4.3h8.5l2.5 2.7c.3.3.8.3 1.1.1z" fill="url(%23a)"/></svg>'); }
.wallet-icon.usdc { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%232775CA"><path d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12z"/><path d="M15.09 8.316c.596.65.95 1.481 1.03 2.368h-2.305a2.548 2.548 0 00-.754-1.193 2.568 2.568 0 00-1.207-.652v3.691h1.24c1.404 0 2.708.795 3.302 2.095a3.699 3.699 0 01-.126 3.16 3.785 3.785 0 01-2.412 1.915 3.861 3.861 0 01-3.07-.461 3.763 3.763 0 01-1.67-2.494h2.305c.154.323.406.596.73.788.323.192.702.256 1.06.186v-3.691h-1.24c-1.404 0-2.709-.795-3.303-2.095a3.698 3.698 0 01.126-3.16 3.786 3.786 0 012.412-1.915 3.862 3.862 0 013.07.461 3.762 3.762 0 011.812 2.997" fill="%23fff"/><path d="M12.75 15.95v3.691a3.661 3.661 0 001.06-.186 3.67 3.67 0 00.731-.788h2.304a3.762 3.762 0 01-1.67 2.494 3.863 3.863 0 01-3.07.46 3.784 3.784 0 01-2.412-1.914 3.699 3.699 0 01-.126-3.16c.595-1.3 1.9-2.095 3.303-2.095h1.24m0-7.83v3.691a2.57 2.57 0 00-1.207.652 2.55 2.55 0 00-.753 1.194H8.484a3.763 3.763 0 011.812-2.997 3.862 3.862 0 013.07-.461 3.783 3.783 0 012.412 1.914 3.698 3.698 0 01.126 3.16c-.595 1.3-1.9 2.096-3.303 2.096h-1.24" fill="%232775CA"/></svg>'); }
.wallet-icon.dai { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23F5AC37"><path d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12z"/><path d="M8.55 12v3.55H6v-3.55H8.55zm9.45-5.55v9.1H7.98c-.544 0-1.02-.476-1.02-1.02v-7.06c0-.544.476-1.02 1.02-1.02H18zm-3.3 6.132a3.548 3.548 0 000-3.163H12a.544.544 0 01-.544-.544v-.816H9.1v5.882h2.356v-.816c0-.3.244-.544.544-.544h2.7zm-4.54-2.127H12c.3 0 .544.244.544.544a.544.544 0 01-.544.544H9.66v-1.088z" fill="%23fff"/></svg>'); }
.wallet-icon.tether { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%2326A17B"><path d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12z"/><path d="M13.24 8.348v1.591h4.796V7.217H5.964v2.722h4.795V8.35h1.24V15.9s-3.479-.46-5.964-1.362c0 0-.306-.153-.306-.613 0-.46 0-7.066 0-7.066h14.54s0 6.607 0 7.066c0 .46-.307.614-.307.614-2.57.9-5.963 1.36-5.963 1.36v-7.55h1.24z" fill="%23fff"/></svg>'); }
.wallet-icon.polygon { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%238247E5"><path d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12z"/><path d="M15.79 9.455l2.339-1.35a.617.617 0 01.93.531v5.727c0 .221-.119.425-.311.534l-4.256 2.452a.617.617 0 01-.619 0L9.83 15.332 15.79 9.455z" fill="%23fff"/><path d="M15.792 9.455L9.829 15.332l-2.958-1.717a.617.617 0 01-.31-.534V7.354c0-.221.118-.425.31-.534l4.257-2.452a.617.617 0 01.618 0l4.046 2.328-4.83 2.771L8.87 7.95l4.041 7.015 2.88-5.51z" fill="%23fff"/></svg>'); }

/* ========= Status Messages & Indicators ========= */
.modified-indicator {
    color: #f44336;
    font-weight: bold;
    cursor: help;
}

.edit-date-display {
    font-size: 10px;
    color: #777;
    font-style: italic;
    margin-left: 5px;
    display: inline-block;
}

.update-message {
    width: 80%;
    margin-left: 0;
    box-sizing: border-box;
    background-color: #dff0d8;
    color: #3c763d;
    padding: 10px; 
    margin-bottom: 20px;
    border-radius: 4px;
    transition: opacity 0.5s ease-in-out;
}

/* Popup Messages */
.popup-message {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    padding: 15px 25px !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    z-index: 9999 !important;
    font-size: 16px !important;
    font-weight: bold !important;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translateY(-20px);
    opacity: 0;
}

.popup-message.show {
    opacity: 1;
    transform: translateY(0);
}

.popup-message.success {
    background-color: var(--success-color) !important;
    color: white !important;
}

.popup-message.error {
    background-color: var(--danger-color) !important;
    color: white !important;
}

/* ========= File Upload & Collection ========= */
/* File Upload Zone */
.file-upload-zone {
    border: 2px dashed #6c757d;
    padding: 2em;
    text-align: center;
    border-radius: 8px;
    margin: 1em 0;
    transition: all 0.3s ease;
}

.file-upload-zone:hover {
    border-color: var(--primary-color);
    background-color: rgba(52, 152, 219, 0.05);
}

.file-upload-zone.drag-over {
    border-color: var(--primary-color);
    background-color: rgba(52, 152, 219, 0.1);
}

.file-upload-zone p {
    margin-bottom: 15px;
    color: var(--text-medium);
}

.file-upload-zone input[type="file"] {
    display: none;
}

/* File upload container */
.file-upload-container {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    background-color: #f9f9f9;
}

.file-upload-container.highlight {
    border-color: #2ea3f2;
    background-color: rgba(46, 163, 242, 0.05);
}

.file-upload-message {
    margin-bottom: 15px;
    color: #666;
}

.file-upload-input {
    display: none;
}

.file-upload-button {
    background-color: #2ea3f2;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
    margin-bottom: 15px;
}

.file-upload-button:hover {
    background-color: #0e8ad7;
}

.selected-files {
    margin-top: 15px;
    text-align: left;
}

/* File List */
.file-list {
    margin: 10px 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.file-list li {
    display: flex;
    justify-content: space-between;
    background-color: #f2f2f2;
    padding: 8px 15px;
    margin-bottom: 5px;
    border-radius: 4px;
    font-size: 14px;
}

.file-item {
    display: flex;
    align-items: center;
    padding: 0.8em;
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: 0.5em;
}

.file-icon {
    margin-right: 10px;
    font-size: 1.2em;
}

.file-name {
    flex-grow: 1;
    word-break: break-all;
}

.file-size {
    color: #666;
    font-size: 0.9em;
}

.remove-file {
    background: transparent;
    border: none;
    color: var(--danger-color);
    cursor: pointer;
    font-weight: bold;
    padding: 5px;
    margin-left: 10px;
}

/* Collection files list styling */
.collection-files-list {
    margin-top: 15px;
    margin-bottom: 15px;
    clear: both;
}

.collection-files-list h5 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: bold;
}

.collection-file-item {
    background-color: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px;
}

.collection-file-item .signature-container {
    margin: 8px 0;
}

.file-info-details {
    margin-top: 10px;
    width: 100%;
    display: block;
    clear: both;
}

.file-number-indicator {
    background-color: #e7f3ff;
    padding: 5px 10px;
    margin-bottom: 10px;
    border-radius: 3px;
    border-left: 3px solid #0073aa;
    font-size: 13px;
    color: #333;
    text-align: center;
}

.file-number-indicator strong {
    font-weight: bold;
}

.file-count {
    display: block;
    margin: 8px 0;
    padding: 5px 10px;
    background-color: #e7f3ff;
    border-radius: 3px;
    border-left: 3px solid #0073aa;
}

/* Collection Controls */
.portfolio-collection-container {
    background: #fff;
    padding: 1.5em;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    margin: 1.5em 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.portfolio-collection-container.new-portfolio {
    margin: 20px 0;
    padding: 20px;
    border: 2px solid var(--border-light);
    border-radius: 8px;
    background: #fff;
}

.portfolio-name {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 1em;
    color: var(--text-dark);
}

.add-files,
.finish-collection-btn {
    display: block;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease;
}

.add-files {
    background-color: var(--primary-color);
    color: white;
    margin-top: 10px;
}

.add-files:hover {
    background-color: var(--primary-hover);
}

.finish-collection-btn {
    background-color: var(--success-color);
    color: white;
    margin-top: 15px;
}

.finish-collection-btn:hover {
    background-color: var(--success-hover);
}

/* ========= Currency & Portfolio Pricing ========= */
.currency-price-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.price-selection {
    display: flex;
    flex-direction: column;
}

.price-input-container {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 4px;
}

.currency-dropdown-container,
.price-input-container {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.portfolio-price-currency {
    width: 100%;
    padding: 8px;
    display: flex;
    align-items: center;
}

.currency-option {
    display: flex;
    align-items: center;
    gap: 10px;
}

.currency-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.2em;
}

.currency-flag {
    width: 24px;
    height: 16px;
    background-size: cover;
    background-position: center;
    border-radius: 2px;
}

.portfolio-price-input {
    flex-grow: 1;
    border: none;
    outline: none;
    padding-left: 10px;
}

.price-label {
    font-size: 0.9em;
    font-style: italic;
    color: #666;
    margin-right: 8px;
}

.price-value {
    font-weight: 600;
}

/* Currency-specific styles */
.currency-icon.usd { background-color: #4CAF50; color: white; }
.currency-icon.cad { background-color: #FF5722; color: white; }
.currency-icon.eur { background-color: #2196F3; color: white; }
.currency-icon.btc { background-color: #FF9800; color: white; }
.currency-icon.eth { background-color: #9C27B0; color: white; }
.currency-icon.sol { background-color: #673AB7; color: white; }
.currency-icon.matic { background-color: #3F51B5; color: white; }
.currency-icon.usdc { background-color: #00BCD4; color: white; }
.currency-icon.dai { background-color: #795548; color: white; }
.currency-icon.usdt { background-color: #8BC34A; color: white; }

/* ========= Product Image Styles ========= */
.product-image-container {
    margin: 15px 0;
}

.product-thumbnail {
    max-width: 150px;
    max-height: 150px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}

.product-image-link {
    display: inline-block;
    position: relative;
}

.product-image-link:after {
    content: '🔍';
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: rgba(255,255,255,0.7);
    border-radius: 50%;
    padding: 2px;
    font-size: 14px;
}

.current-product-image {
    max-width: 150px;
    max-height: 150px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    margin-bottom: 5px;
}

.current-product-image.preview {
    border: 2px solid #4CAF50;
}

.product-image-preview {
    margin-bottom: 10px;
}

.no-image-placeholder {
    border: 1px dashed #ccc;
    padding: 15px;
    text-align: center;
    background: #f9f9f9;
    color: #777;
    border-radius: 4px;
    margin-bottom: 10px;
}

.upload-status {
    color: #4CAF50;
    font-style: italic;
    margin-top: 5px;
}

/* ========= Dialogs & Modals (Consolidated) ========= */
/* Common Dialog Styles */
.portfolio-dialog,
.signing-dialog,
.success-dialog,
.error-dialog,
.loading-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dialog-content {
    background: white;
    padding: 2em;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.dialog-content h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2em;
    color: var(--text-dark);
}

.dialog-content button {
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 15px;
}

/* Portfolio Dialog Styles */
.portfolio-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.portfolio-dialog-box {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    padding: 25px;
    width: 90%;
    max-width: 650px;
    max-height: 90vh;
    overflow-y: auto;
}

.portfolio-dialog-box h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
    font-size: 24px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.portfolio-dialog-box .form-group {
    margin-bottom: 20px;
}

.portfolio-dialog-box label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

.portfolio-dialog-box input[type="text"],
.portfolio-dialog-box input[type="number"],
.portfolio-dialog-box textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.portfolio-dialog-box textarea {
    min-height: 120px;
    resize: vertical;
}

.portfolio-dialog-box .dialog-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 25px;
}

.portfolio-dialog-box button {
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.2s ease;
}

.portfolio-dialog-box .btn-cancel {
    background-color: #f2f2f2;
    border: 1px solid #ddd;
    color: #333;
}

.portfolio-dialog-box .btn-continue,
.portfolio-dialog-box .btn-ok {
    background-color: #2ea3f2;
    border: none;
    color: white;
}

.portfolio-dialog-box .btn-cancel:hover {
    background-color: #e5e5e5;
}

.portfolio-dialog-box .btn-continue:hover,
.portfolio-dialog-box .btn-ok:hover {
    background-color: #0e8ad7;
}

/* Portfolio visibility section */
.portfolio-visibility {
    margin-top: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 8px;
}

.visibility-option {
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
}

.visibility-option input[type="radio"] {
    margin-top: 3px;
    margin-right: 10px;
}

.visibility-option label {
    margin-bottom: 0;
}

/* Success Dialog */
.success-dialog .dialog-content h3 {
    color: var(--success-color);
}

.success-dialog .close-dialog {
    background-color: var(--success-color);
    color: white;
    width: 100%;
}

.success-dialog .close-dialog:hover {
    background-color: var(--success-hover);
}

/* Error Dialog */
.error-dialog .dialog-content h3 {
    color: var(--danger-color);
}

.error-dialog .close-error {
    background-color: var(--danger-color);
    color: white;
    width: 100%;
}

.error-dialog .close-error:hover {
    background-color: var(--danger-hover);
}

/* Loading Dialog */
.loading-dialog .loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

.loading-dialog .spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin: 0 auto 15px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Signing Dialog */
.signing-dialog .hash-display {
    font-family: monospace;
    padding: 1em;
    background: #f5f5f5;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    margin: 1em 0;
    word-break: break-all;
    overflow-wrap: break-word;
    font-size: 0.9em;
    color: var(--text-dark);
}

.signing-dialog .key-upload {
    margin: 1.5em 0;
}

.signing-dialog .sign-hash {
    display: block;
    width: 100%;
    padding: 12px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
}

.signing-dialog .sign-hash:hover {
    background-color: var(--primary-hover);
}

.signing-dialog .cancel-signing {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: var(--neutral-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    margin-top: 10px;
}

.signing-dialog .cancel-signing:hover {
    background-color: var(--neutral-hover);
}

/* Modal styling */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
}

.modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    position: relative;
}

.close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 15px;
}

.close-modal:hover,
.close-modal:focus {
    color: black;
    text-decoration: none;
}

/* ========= Accordions ========= */
.accordion-container {
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.accordion-toggle {
    background-color: #3498db;
    color: white;
    cursor: pointer;
    padding: 12px 15px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: 600;
    transition: 0.3s;
    position: relative;
    border-radius: 4px 4px 0 0;
    box-sizing: border-box;
}

.accordion-toggle:hover {
    background-color: #2980b9;
}

.accordion-toggle.active {
    background-color: #2980b9;
}

.accordion-toggle.active .toggle-icon {
    transform: rotate(45deg);
}

.toggle-icon {
    margin-right: 10px;
    display: inline-block;
    width: 14px;
    text-align: center;
    font-weight: bold;
}

.accordion-content {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.2s ease;
    background-color: #f9f9f9;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-radius: 0 0 4px 4px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #eee;
}

.accordion-content.show {
    padding: 15px;
    max-height: 500px;
    transition: max-height 0.5s ease-in, padding 0.3s ease;
}

.accordion-content .form-group {
    width: 100%;
}

.account-details, 
.wallet-details {
    width: 100%;
}

.accordion-toggle.active + .accordion-content {
    padding: 15px;
    border-top: 1px solid #e0e0e0;
}

/* Accounts and Cryptocurrency Wallets Styling */
.accounts-crypto-section {
    margin-top: 30px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
}

.accounts-subsection, .crypto-wallet-subsection {
    margin-bottom: 25px;
}

.accounts-subsection h4, .crypto-wallet-subsection h4 {
    font-size: 18px;
    margin-bottom: 15px;
    color: #333;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

.form-subsection-title {
    font-size: 16px;
    font-weight: bold;
    margin: 15px 0 10px;
    color: #555;
}

/* ========= Profile Sections ========= */
.profile-about {
    margin: 10px 0;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 4px;
    border-left: 4px solid #3498db;
}

.profile-social-links {
    margin: 10px 0;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 4px;
    border-left: 3px solid #007bff;
}

.social-links-list {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.social-links-list li {
    margin-bottom: 5px;
}

/* Profile timestamps */
.profile-current-time {
    margin-top: 15px;
    margin-left: 3;
    padding: 10px 15px;
    border-radius: 5px;
    background-color: #fad28e;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.profile-creation-date {
    margin-top: 15px;
    margin-bottom: 15px;
}

/* ========= Field Notes & Helpers ========= */
.field-note {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #666;
    font-style: italic;
}

/* Description editing form styles */
.description-form {
    margin-top: 10px;
}

.description-form textarea {
    width: 100%;
    min-height: 100px;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
}

/* Button group for edit actions */
.button-group {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

/* Description text styling */
.description-text {
    margin: 0;
    padding: 8px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 4px;
    min-height: 60px;
}

/* ========= Permalink Styles ========= */
.permalink-button {
    display: inline-block;
    background-color: #5c6bc0;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 15px;
    transition: background-color 0.3s;
}

.permalink-button:hover {
    background-color: #3f51b5;
    text-decoration: none;
    color: white;
}

.portfolio-item-wrapper {
    margin-bottom: 15px;
}

.permalink-info {
    margin-top: 15px;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 4px;
}

.permalink-info input {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    margin-bottom: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.permalink-info small {
    color: #666;
    font-style: italic;
}

/* Notification for permalink copy */
.copy-notification {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* ========= Login & Register UI ========= */
.login-register-bar {
    margin-bottom: 15px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-align: center;
}

.login-register-separator {
    margin: 0 1em;
    color: var(--text-medium);
}

.login-form-container {
    text-align: center;
    margin: 20px 0;
}

.login-toggle-button {
    padding: 10px 30px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.login-toggle-button:hover {
    background-color: var(--primary-hover);
}

.login-form-inline {
    max-width: 300px;
    margin: 20px auto;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 4px;
}

.login-form-inline form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.login-form-inline input[type="text"],
.login-form-inline input[type="password"] {
    padding: 8px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
}

.login-form-inline input[type="submit"] {
    padding: 10px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.login-form-inline input[type="submit"]:hover {
    background-color: var(--primary-hover);
}

/* ========= Deletion Records & Portfolio Management ========= */
/* Portfolio Deletion Records styles */
.portfolio-deletion-records {
    margin-top: 30px;
}

.portfolio-deletion-records h3 {
    margin-bottom: 15px;
}

.portfolio-deletion-records table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.portfolio-deletion-records th,
.portfolio-deletion-records td {
    padding: 10px 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    font-size: 12px;
    vertical-align: top;
}

.portfolio-deletion-records th {
    background-color: #f5f5f5;
    font-weight: bold;
    font-size: 11px;
}

.portfolio-deletion-records table th:nth-child(1),
.portfolio-deletion-records table td:nth-child(1) {
    max-width: 150px;
    word-wrap: break-word;
}

.portfolio-deletion-records table th:nth-child(5),
.portfolio-deletion-records table td:nth-child(5) {
    max-width: 120px;
    word-wrap: break-word;
}

.portfolio-deletion-records table th:nth-child(6),
.portfolio-deletion-records table td:nth-child(6) {
    max-width: 150px;
    word-wrap: break-word;
}

.deletion-record-hash {
    font-family: 'Courier New', monospace;
    word-break: break-all;
    max-width: 120px;
    display: inline-block;
    vertical-align: middle;
    font-size: 10px;
    background-color: #f8f9fa;
    padding: 2px 4px;
    border-radius: 3px;
    border: 1px solid #dee2e6;
}

.deletion-records-note {
    font-style: italic;
    color: #666;
    margin-top: 15px;
}

.portfolio-deletion-toggle {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 16px;
    background-color: var(--primary-color, #007cba);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.portfolio-deletion-toggle:hover {
    background-color: var(--primary-hover, #005a87);
}

#deletion-records-container {
    display: none;
    margin-top: 15px;
}

.no-deletion-records {
    margin-top: 10px;
    font-style: italic;
    color: #666;
}

.permanently-destroyed {
    background-color: #ffe6e6 !important;
}

.destroyed-indicator {
    background-color: #dc3545;
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: bold;
    margin-left: 8px;
}

/* Digital signature styling in deletion records */
.deletion-record-signature {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    background-color: #f8f9fa;
    padding: 2px 4px;
    border-radius: 3px;
    border: 1px solid #dee2e6;
    word-break: break-all;
    margin-bottom: 5px;
}

.signature-verified-icon {
    color: #28a745;
    font-size: 14px;
    margin-left: 5px;
    cursor: help;
}

.no-signature {
    color: #6c757d;
    font-style: italic;
    font-size: 12px;
}

.file-signature-short {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    background-color: #f8f9fa;
    padding: 1px 3px;
    border-radius: 2px;
    border: 1px solid #dee2e6;
}

.deletion-copy-btn {
    font-size: 10px;
    padding: 3px 8px;
    margin-left: 5px;
    background-color: #007cba;
    color: white;
    border: 1px solid #005a87;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.deletion-copy-btn:hover {
    background-color: #005a87;
}

.deletion-record-row:hover {
    background-color: #f1f1f1;
}

.show-files-btn {
    background-color: var(--primary-color) !important;
    color: white !important;
    font-size: 11px;
    padding: 4px 8px;
}

.show-files-btn:hover {
    background-color: var(--primary-hover) !important;
}

/* File details styling */
.file-details {
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 4px;
    margin: 5px 0;
}

.file-details h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--primary-color);
}

.file-list-table {
    margin-top: 10px;
    border-collapse: collapse;
    width: 100%;
    font-size: 11px;
}

.file-list-table th, 
.file-list-table td {
    padding: 8px;
    border: 1px solid #ddd;
    text-align: left;
}

.file-list-table th {
    background-color: #f0f0f0;
    font-weight: bold;
}

.file-hash-short {
    font-family: monospace;
    background-color: #f5f5f5;
    padding: 2px 4px;
    border-radius: 3px;
}

/* ========= Transfer Requests ========= */
.request-transfer-btn {
    display: block;
    width: 100%;
    padding: 10px 15px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 5px;
    transition: background-color 0.3s;
}

.request-transfer-btn:hover {
    background-color: #45a049;
}

.request-transfer-btn.disabled {
    background-color: #cccccc;
    color: #666666;
    cursor: not-allowed;
}

.transfer-not-available-note {
    font-size: 12px;
    color: #f44336;
    margin-top: 5px;
    text-align: center;
}

.portfolio-item-info {
    background-color: #f9f9f9;
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
}

.form-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.submit-transfer-request,
.cancel-transfer-request {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.submit-transfer-request {
    background-color: #4CAF50;
    color: white;
}

.cancel-transfer-request {
    background-color: #f44336;
    color: white;
}

.transfer-request-message {
    margin-top: 20px;
    padding: 15px;
    border-radius: 4px;
}

.success-message {
    background-color: #dff0d8;
    color: #3c763d;
    padding: 15px;
    border-radius: 4px;
    text-align: center;
}

.error-message {
    background-color: #f2dede;
    color: #a94442;
    padding: 15px;
    border-radius: 4px;
    text-align: center;
}

.close-modal-btn {
    background-color: #337ab7;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    margin-top: 10px;
    cursor: pointer;
    font-weight: bold;
}

/* ========= Delete Reason Portfolio Items ========= */
.delete-reason-container {
    margin: 10px 0;
    display: none;
}

.delete-reason-container.visible {
    display: block;
}

.delete-reason-container label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.delete-reason-container select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.full-destroy-option {
    margin-top: 10px;
    padding: 8px;
    background-color: #f8d7da;
    border-radius: 3px;
}

/* ========= Backup Codes ========= */
.backup-codes-display {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 15px 0;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.backup-code {
    background: white;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: monospace;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 1px;
}

.btn-2fa {
    padding: 8px 16px;
    margin: 5px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.btn-2fa.btn-primary {
    background-color: #007cba;
    color: white;
}

.btn-2fa.btn-warning {
    background-color: #ffb900;
    color: white;
}

.btn-2fa.btn-danger {
    background-color: #d63638;
    color: white;
}

.btn-2fa.btn-success {
    background-color: #46b450;
    color: white;
}

.btn-2fa.btn-secondary {
    background-color: #6c757d;
    color: white;
}

/* ========= Additional Detail Rows ========= */
.detail-row {
    margin-bottom: 12px;
    padding: 8px;
    border-radius: 4px;
}

.detail-row code {
    font-family: monospace;
    background: #f8f8f8;
    padding: 3px 6px;
    border-radius: 3px;
    border: 1px solid #ddd;
    word-break: break-all;
}

/* ========= Responsive Design ========= */
/* Tablet responsiveness */
@media (max-width: 1200px) and (min-width: 901px) {
    .profile-width-container {
        width: 85%;
    }

    .profile-columns-container {
        gap: 30px !important;
    }
    
    .left-column {
        flex: 1.2 !important;
        min-width: 350px !important;
    }
    
    .right-column {
        flex: 0.8 !important;
        min-width: 300px !important;
    }
}

/* Mobile responsiveness */
@media (max-width: 980px) {
    .profile-width-container {
        width: 90%;
    }
}

@media (max-width: 900px) {
    .profile-columns-container {
        flex-direction: column !important;
        gap: 25px !important;
    }
    
    .profile-column {
        min-width: unset !important;
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    .left-column,
    .right-column {
        flex: none !important;
        min-width: unset !important;
        max-width: 100% !important;
    }
}

@media screen and (max-width: 768px) {
    .profile-width-container {
        width: 95%;
    }

    .user-info-bar {
        width: 95%;
    }

    .portfolio-grid,
    .visibility-options {
        grid-template-columns: 1fr;
    }
    
    .creator-header {
        flex-direction: column;
        text-align: center;
    }
    
    .avatar-container {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .dialog-content {
        width: 95%;
        padding: 1.5em;
    }

    .file-upload-zone {
        padding: 1.5em;
    }

    /* Key display responsive */
    .key-display-container.show-key {
        flex-direction: column;
    }
    
    .download-key-container {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .download-public-key {
        width: 100%;
        height: auto;
        padding: 15px;
        flex-direction: row;
    }
    
    .key-text-container {
        flex: 1;
        width: 100%;
    }

    .wallet-item {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 15px;
    }

    .wallet-label {
        margin-bottom: 5px;
    }

    .wallet-address {
        max-width: 100%;
        margin-bottom: 5px;
    }

    .wallet-copy {
        align-self: flex-end;
    }

    .portfolio-dialog-box {
        width: 95%;
        padding: 15px;
    }

    .portfolio-dialog-box .dialog-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .portfolio-dialog-box button {
        width: 100%;
    }
}