:root {
    --font-primary: 'IBM Plex Sans', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
    
    --color-bg-deep: #e1e2f9;
    --color-bg-container: #141829;
    --color-border-primary: #2c3040;
    --color-border-secondary: #222636;
    --color-text-primary: #ffffff;
    --color-text-secondary: #e0e0e0;
    --color-text-muted: #a0a3b1;
    --color-text-subtle: #808391;
    --color-accent-green: #50e3c2;
    --color-accent-purple: #7e87ef;
    --color-accent-red: #ff7875;
    --color-placeholder-bg: #3a3f58;
    }
    
    body {
        font-family: var(--font-primary);
        background-color: var(--color-bg-deep);
        color: var(--color-text-secondary);
        margin: 0;
        padding: 0;
    }
    
    .mobile-container {
        width: 100%;
        max-width: 960px;
        min-height: calc(100vh - 80px);
        margin: 40px auto;
        background-color: var(--color-bg-container);
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 0 8px 32px rgba(20, 24, 41, 0.18),
                    0 1.5px 6px rgba(20, 24, 41, 0.10);
    }
    
    
    .address-section {
        padding: 0 20px 10px 20px;
        border-bottom: 1px solid var(--color-border-primary);
    }
    
    .address-bar {
        display: flex;
        gap: 8px;
        align-items: stretch;
    }
    
    .address-input-container {
        flex: 1;
        background-color: #191d30;
        border-radius: 10px;
        border: 1px solid var(--color-border-secondary);
        padding: 6px 8px;
        max-height: 80px;
        overflow-y: auto;
    }
    
    .address-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }
    
    .address-chip {
        display: inline-flex;
        align-items: center;
        padding: 3px 6px;
        border-radius: 999px;
        background-color: var(--color-placeholder-bg);
        font-size: 0.75em;
        font-family: var(--font-mono);
        color: var(--color-text-primary);
    }
    
    .address-chip-text {
        margin-right: 4px;
    }
    
    .address-chip-remove {
        border: none;
        background: transparent;
        color: var(--color-text-muted);
        cursor: pointer;
        padding: 0;
        font-size: 0.9em;
    }
    
    #address-input {
        flex: 1;
        min-width: 160px;
        border: none;
        outline: none;
        background: transparent;
        color: var(--color-text-primary);
        font-size: 0.8em;
        font-family: var(--font-mono);
    }
    
    .address-search-button {
        border-radius: 10px;
        border: 1px solid var(--color-accent-purple);
        background: var(--color-accent-purple);
        color: #ffffff;
        padding: 0 16px;
        font-family: var(--font-primary);
        font-size: 0.85em;
        font-weight: 500;
        cursor: pointer;
        min-width: 80px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .address-search-button:hover {
        opacity: 0.9;
    }
    
    
    .item-chain {
        font-family: var(--font-primary);
        font-size: 0.8em;
        color: var(--color-text-subtle);
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    
    /* Header Styles */
    .app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--color-border-primary);
    flex-shrink: 0;
    }
    
    .profile-pic-placeholder {
    width: 36px;
    height: 36px;
    background-color: var(--color-placeholder-bg);
    border-radius: 50%;
    }
    
    .header-title {
    font-family: var(--font-primary);
    font-size: 1.4em;
    font-weight: 600; /* IBM Plex Sans SemiBold */
    color: var(--color-text-primary);
    }
    
    .settings-icon {
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e0e0e0'%3E%3Cpath d='M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12-.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    opacity: 0.8;
    }
    
    /* Total Balance Section */
    .total-balance-section {
    padding: 25px 20px;
    text-align: center;
    border-bottom: 1px solid var(--color-border-primary);
    flex-shrink: 0;
    }
    
    .total-balance-amount {
    font-family: var(--font-mono); /* Mono for large number */
    font-size: 2.3em;
    font-weight: 700;
    margin: 0;
    color: var(--color-accent-green);
    }
    .total-balance-label {
    font-family: var(--font-primary);
    font-size: 0.85em;
    color: var(--color-text-muted);
    margin-top: 2px;
    cursor: pointer; /* Make it look clickable */
    }
    .total-balance-label:hover {
        color: var(--color-text-primary);
    }
    
    /* Tabs Section */
    .tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border-primary);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    }
    
    .tab-button {
    font-family: var(--font-primary);
    flex-grow: 1;
    padding: 14px;
    text-align: center;
    cursor: pointer;
    background-color: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.95em;
    font-weight: 500; /* IBM Plex Sans Medium */
    border-bottom: 3px solid transparent;
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
    }
    .tab-button:hover {
    color: var(--color-text-primary);
    }
    .tab-button.active {
    color: var(--color-text-primary);
    border-bottom: 3px solid var(--color-accent-purple);
    }
    
    .tab-content {
    padding: 0px 20px 20px 20px;
    flex-grow: 1;
    min-height: 0;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    }
    .tab-pane { display: none; }
    .tab-pane.active { display: block; }
    
    /* Tokens Tab & Activity Tab Styles */
    .list-item {
    display: flex;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border-secondary);
    }
    .list-item:last-child { border-bottom: none; }
    
    .item-icon-placeholder {
    width: 38px;
    height: 38px;
    background-color: #2c3040; /* Using a specific color, not var for contrast */
    border-radius: 50%;
    margin-right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-mono); /* Mono for symbols like ETH */
    font-weight: 500;
    font-size: 0.9em;
    color: #c0c3d1; /* Using specific color */
    flex-shrink: 0;
    overflow: hidden; /* Prevents text overflow if symbol is too long */
    }
    
    .item-info {
    flex-grow: 1;
    min-width: 0; /* Prevents text overflow issues in flex children */
    }
    .item-name { /* Token Name, Activity Type like "Received", "Sent" */
    font-family: var(--font-primary);
    font-size: 1.05em;
    font-weight: 500; /* IBM Plex Sans Medium */
    margin: 0 0 3px 0;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }
    .item-sub-info { /* "1.2345 ETH on Ethereum", "Price: $800.00" */
    font-family: var(--font-primary); /* Sans for descriptive part */
    font-size: 0.85em;
    color: var(--color-text-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }
    .item-sub-info .mono { /* Span class for monospaced parts within sub-info */
    font-family: var(--font-mono);
    }
    
    .item-value-right {
    text-align: right;
    flex-shrink: 0;
    padding-left: 10px;
    }
    .item-usd-value { /* USD value of holding */
    font-family: var(--font-mono); /* Mono for numerical USD value */
    font-size: 1.05em;
    font-weight: 500;
    margin: 0 0 3px 0;
    color: var(--color-text-primary);
    }
    
    /* Activity Tab Specifics */
    .activity-direction { /* "Received ETH", "Sent USDC" */
    font-family: var(--font-primary);
    font-size: 1.05em;
    font-weight: 500; /* IBM Plex Sans Medium */
    margin: 0 0 3px 0;
    }
    .activity-direction.sent { color: var(--color-accent-red); }
    .activity-direction.receive { color: var(--color-accent-green); } /* Ensure class name consistency with JS */
    
    
    .activity-address, .activity-timestamp {
    font-family: var(--font-primary); /* Sans for "From:", "To:" */
    font-size: 0.8em;
    color: var(--color-text-subtle);
    margin: 0;
    }
    .activity-address .mono, .activity-timestamp .mono { /* For address itself and timestamp value */
     font-family: var(--font-mono);
    }
    .activity-amount-right { /* "+0.5 ETH" */
    font-family: var(--font-mono); /* Mono for amount + symbol */
    font-size: 1.05em;
    font-weight: 500;
    }
    .activity-amount-right.sent { color: var(--color-accent-red); }
    .activity-amount-right.receive { color: var(--color-accent-green); }
    
    /* NFT Grid Container */
    .collectibles-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
        padding-top: 20px;
        width: 100%;
    }
    
    /* NFT Item Container */
    .collectible-item-link {
        text-decoration: none;
        color: inherit;
        display: block;
        transition: transform 0.2s ease;
    }
    
    .collectible-item-link:hover {
        transform: translateY(-2px);
    }
    
    .collectible-item {
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        background: var(--color-bg-container);
        border: 1px solid var(--color-border-secondary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    /* Image Container */
    .collectible-image-container {
        position: relative;
        width: 100%;
        padding-bottom: 100%; /* Creates a square aspect ratio */
        background: var(--color-placeholder-bg);
    }
    
    .collectible-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /* Image Placeholder */
    .collectible-image-placeholder {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        font-family: var(--font-primary);
        font-weight: 600;
        font-size: 0.875rem;
    }
    
    /* NFT Info Container - Static (always visible) */
    .collectible-info-static {
        padding: 0.75rem;
        background: var(--color-bg-container);
        border-top: 1px solid var(--color-border-secondary);
    }
    
    /* NFT Info Container - Hover (keep for backwards compatibility but not used) */
    .collectible-info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0.75rem;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
        color: white;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .collectible-item-link:hover .collectible-info {
        opacity: 1;
    }
    
    /* NFT Text Styles */
    .collectible-name {
        font-family: var(--font-primary);
        font-size: 0.9rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--color-text-primary);
    }
    
    .collectible-collection {
        font-family: var(--font-mono);
        font-size: 0.8rem;
        margin-bottom: 0;
        opacity: 0.9;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--color-text-muted);
    }
    
    .collectible-chain {
        font-family: var(--font-primary);
        font-size: 0.7rem;
        opacity: 0.8;
        color: white;
    } 

    .badge-up {
        border-color: rgba(80, 227, 194, 0.5);
        color: var(--color-accent-green);
        background: rgba(80, 227, 194, 0.08);
    }
    .badge-down {
        border-color: rgba(255, 120, 117, 0.5);
        color: var(--color-accent-red);
        background: rgba(255, 120, 117, 0.08);
    }
    
    .total-balance-pnl {
        font-family: var(--font-mono);
        font-size: 0.9em;
        margin: 4px 0;
    }
    
    .pnl-up {
        color: var(--color-accent-green);
    }
    
    .pnl-down {
        color: var(--color-accent-red);
    }
    
    .pnl-neutral {
        color: var(--color-text-muted);
    }
    
    .info-banner {
        font-family: var(--font-primary);
        font-size: 0.8em;
        color: var(--color-text-muted);
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid var(--color-border-secondary);
        border-radius: 10px;
        padding: 8px 10px;
        margin: 10px 0 4px 0;
    }