/* ----------- INTEREST SHRINE (SKEUOMORPHIC) ----------- */

/* Tab Bar */
body.skeuomorphic .tab-bar {
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

/* Tabs */
body.skeuomorphic .tab {
    background: linear-gradient(135deg, rgba(80, 80, 80, 0.9), rgba(50, 50, 50, 0.9));
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-bottom: none;
    color: #e4e4e4;
    transition: all 0.3s ease;
    border-radius: 8px 8px 0 0;
    bottom: -2px;
    box-shadow: none;
}

body.skeuomorphic .tab:hover {
    background: linear-gradient(135deg, rgba(100, 100, 100, 0.9), rgba(70, 70, 70, 0.9));
    transform: translateY(-2px);
}

body.skeuomorphic .tab.active {
    background: linear-gradient(135deg, rgba(120, 120, 255, 0.7), rgba(80, 80, 200, 0.7));
    border-color: rgba(150, 150, 255, 0.8);
    box-shadow: 0 -2px 10px rgba(120, 120, 255, 0.3);
}

/* Grid Container */
body.skeuomorphic .grid-container {
    background: rgba(30, 30, 30, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

/* Grid Items */
body.skeuomorphic .grid-item {
    background: rgba(40, 40, 40, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

body.skeuomorphic .grid-item:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: rgba(120, 120, 255, 0.8);
    box-shadow: 0 8px 20px rgba(120, 120, 255, 0.4), 0 0 30px rgba(120, 120, 255, 0.2);
}