Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
Dark Purple Floral

Author: Def3ct
Category: Dark
Created: January 24, 2026
A Great Layout!
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style>
/*
 * Purple Floral Dream Theme for FriendRewind
 * A mystical purple, blue, and black flowery interface
 */

/* -- Reset & Base Styles -- */
body {
    background-image: url('https://friendrewind.com/uploads/gallery/1/img_69757311d504c1.86952492.webp') !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    font-family: 'Georgia', 'Times New Roman', serif !important;
    font-size: 13px !important;
    color: #e8d4ff !important;
    line-height: 1.6 !important;
}

main {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* -- HEADER & NAVIGATION STYLING -- */
.myspace-header,
#nav {
    background: linear-gradient(135deg, 
                rgba(15, 5, 25, 0.95), 
                rgba(40, 15, 60, 0.95),
                rgba(25, 10, 45, 0.95)) !important;
    border-bottom: 2px solid rgba(138, 43, 226, 0.7) !important;
    box-shadow: 0 4px 20px rgba(138, 43, 226, 0.5),
                0 0 40px rgba(65, 105, 225, 0.3) !important;
    overflow: visible !important;
}

.myspace-header .top-nav,
#nav .top {
    background: linear-gradient(135deg, 
                rgba(75, 0, 130, 0.9), 
                rgba(138, 43, 226, 0.85),
                rgba(65, 105, 225, 0.8)) !important;
    border-bottom: 1px solid rgba(138, 43, 226, 0.5) !important;
}

/* Navigation links container - transparent, let individual items have background */
.myspace-header .main-nav-wrapper,
.myspace-header .main-nav-container,
#nav .links {
    background: transparent !important;
}

/* Navigation list - inline background that fits content */
.myspace-header .main-nav,
.myspace-header .main-nav ul {
    background: linear-gradient(to bottom, 
                rgba(20, 5, 35, 0.95), 
                rgba(10, 2, 20, 0.95)) !important;
    display: inline-flex !important;
    border-radius: 0 0 8px 0 !important;
}

/* Navigation links */
.myspace-header .main-nav li a,
#nav .links ul li a {
    color: #e8d4ff !important;
    text-shadow: 0 0 8px rgba(138, 43, 226, 0.7),
                 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
    transition: all 0.3s ease !important;
}

.myspace-header .main-nav li a:hover,
.myspace-header .main-nav li a.active,
#nav .links ul li a:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, 
                rgba(138, 43, 226, 0.6), 
                rgba(65, 105, 225, 0.5)) !important;
    text-shadow: 0 0 15px rgba(138, 43, 226, 1),
                 0 0 25px rgba(65, 105, 225, 0.8) !important;
}

/* Dropdown menus */
.myspace-header .dropdown-menu,
#nav .links ul li ul {
    background: linear-gradient(135deg, 
                rgba(15, 5, 25, 0.98), 
                rgba(25, 10, 40, 0.98)) !important;
    border: 2px solid rgba(138, 43, 226, 0.7) !important;
    box-shadow: 0 8px 25px rgba(138, 43, 226, 0.5),
                inset 0 0 20px rgba(75, 0, 130, 0.3) !important;
}

.myspace-header .dropdown-menu a,
#nav .links ul li ul li a {
    color: #e8d4ff !important;
    border-bottom: 1px solid rgba(138, 43, 226, 0.3) !important;
}

.myspace-header .dropdown-menu a:hover,
#nav .links ul li ul li a:hover {
    background: linear-gradient(135deg, 
                rgba(138, 43, 226, 0.7), 
                rgba(65, 105, 225, 0.6)) !important;
    color: #ffffff !important;
}

/* Search box styling */
.myspace-header .search-input,
#nav .search input {
    background: rgba(10, 2, 20, 0.9) !important;
    border: 2px solid rgba(138, 43, 226, 0.6) !important;
    color: #e8d4ff !important;
}

.myspace-header .search-input:focus,
#nav .search input:focus {
    border-color: rgba(138, 43, 226, 1) !important;
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.6) !important;
}

.myspace-header .search-button,
#nav .search button {
    background: linear-gradient(135deg, 
                rgba(138, 43, 226, 0.9), 
                rgba(65, 105, 225, 0.8)) !important;
    border: 2px solid rgba(138, 43, 226, 0.7) !important;
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(138, 43, 226, 0.8) !important;
}

.myspace-header .search-button:hover,
#nav .search button:hover {
    background: linear-gradient(135deg, 
                rgba(138, 43, 226, 1), 
                rgba(65, 105, 225, 0.95)) !important;
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.7) !important;
}

/* -- Profile Picture with Flower Frame -- */
.profile-pic {
    position: relative !important;
    width: 180px !important;
    height: 180px !important;
    display: inline-block !important;
    overflow: hidden !important;
}

.profile-pic img {
    position: absolute !important;
    top: 8% !important;
    left: 8% !important;
    width: 84% !important;
    height: 84% !important;
    object-fit: cover !important;
    z-index: 1 !important;
    border-radius: 12px !important;
}

.profile-pic::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url('https://friendrewind.com/uploads/gallery/1/img_697047160b0bd8.07408738.png') !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* -- Floral Module Containers -- */
.general-about, .profile-playlist-widget, #profile-playlist-container, .contact, .url-info, .table-section, .tunes, .blog-preview, .blurbs, .friends, #comments {
    border: none !important;
    border-radius: 15px !important;
    background: rgba(15, 5, 25, 0.92) !important;
    box-shadow: 0 0 25px rgba(138, 43, 226, 0.5), 
                0 0 50px rgba(65, 105, 225, 0.3),
                inset 0 0 30px rgba(75, 0, 130, 0.4) !important;
    margin-bottom: 25px !important;
    padding: 12px !important;
    overflow: visible !important;
    position: relative !important;
    backdrop-filter: blur(8px) !important;
}

/* -- Decorative Floral Frame on Boxes -- */
.general-about::after, .profile-playlist-widget::after, .contact::after, .url-info::after, .table-section::after, 
.tunes::after, .blog-preview::after, .blurbs::after, 
.friends::after, #comments::after {
    content: "" !important;
    position: absolute !important;
    top: -25px !important;
    left: -25px !important;
    right: -25px !important;
    bottom: -25px !important;
    background-image: url('https://friendrewind.com/uploads/gallery/1/img_69703eb567e2e1.64864617.png') !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

/* -- Taller frame for general-about only -- */
.general-about::after {
    top: -30px !important;
    bottom: -30px !important;
}

/* -- Specific adjustments for profile playlist -- */
.profile-playlist-widget::after {
    top: -20px !important;
    left: -25px !important;
    right: -25px !important;
    bottom: -20px !important;
}

.profile-playlist-widget {
    background: rgba(15, 5, 25, 0.92) !important;
    box-shadow: none !important;
    padding: 10px !important;
}

#profile-playlist-container {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Smaller buttons for profile playlist */
.profile-playlist-widget .pp-remove,
.profile-playlist-widget .pp-add-mine,
.profile-playlist-widget .pp-autoplay-toggle {
    padding: 4px 8px !important;
    font-size: 12px !important;
    min-width: auto !important;
    height: auto !important;
}

/* -- Wider frame for right column boxes -- */
.col.w-60 .table-section::after,
.col.w-60 .blog-preview::after,
.col.w-60 .blurbs::after,
.col.w-60 .friends::after,
.col.w-60 #comments::after,
.col.right .table-section::after,
.col.right .blog-preview::after,
.col.right .blurbs::after,
.col.right .friends::after,
.col.right #comments::after {
    left: -35px !important;
    right: -35px !important;
}

/* -- Decorative Floral Border Glow -- */
.contact::before, .url-info::before, .table-section::before, 
.tunes::before, .blog-preview::before, .blurbs::before, 
.friends::before, #comments::before {
    content: '' !important;
    position: absolute !important;
    top: -3px !important;
    left: -3px !important;
    right: -3px !important;
    bottom: -3px !important;
    border: 3px solid transparent !important;
    border-radius: 17px !important;
    background: linear-gradient(45deg, 
                rgba(138, 43, 226, 0.6), 
                rgba(65, 105, 225, 0.6), 
                rgba(75, 0, 130, 0.6),
                rgba(138, 43, 226, 0.6)) !important;
    background-size: 400% 400% !important;
    animation: floral-glow 6s ease infinite !important;
    pointer-events: none !important;
    z-index: -1 !important;
    filter: blur(5px) !important;
}

@keyframes floral-glow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* -- Floral Headers -- */
.contact .heading, .url-info .heading, .table-section .heading, .tunes .heading, 
.blog-preview h4, .blurbs .heading, .friends .heading, #comments .heading {
    background: linear-gradient(135deg, 
                rgba(75, 0, 130, 0.95), 
                rgba(138, 43, 226, 0.95),
                rgba(65, 105, 225, 0.85)) !important;
    color: #f5e6ff !important;
    font-weight: bold !important;
    font-size: 15px !important;
    text-shadow: 0 0 10px rgba(138, 43, 226, 0.9),
                 0 0 20px rgba(65, 105, 225, 0.7),
                 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
    height: 36px !important;
    line-height: 36px !important;
    padding: 0 15px !important;
    margin: 0 !important;
    border-bottom: 2px solid rgba(138, 43, 226, 0.5) !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    border-top-left-radius: 13px !important;
    border-top-right-radius: 13px !important;
}

/* -- Header Shimmer Effect -- */
.contact .heading::after, .url-info .heading::after, .table-section .heading::after, 
.tunes .heading::after, .blog-preview h4::after, .blurbs .heading::after, 
.friends .heading::after, #comments .heading::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 60% !important;
    height: 100% !important;
    background: linear-gradient(to right, 
                transparent, 
                rgba(255, 255, 255, 0.3), 
                transparent) !important;
    animation: floral-shimmer 5s infinite ease-in-out !important;
    z-index: 1 !important;
}

@keyframes floral-shimmer {
    0% { left: -100%; }
    100% { left: 200%; }
}

/* -- Window Content -- */
.contact .inner, .url-info p, .table-section .inner, .tunes .inner, 
.blog-preview, .blurbs .inner, .friends .inner, #comments .inner {
    padding: 15px !important;
    color: #e8d4ff !important;
    background: linear-gradient(to bottom, 
                rgba(10, 2, 20, 0.95), 
                rgba(20, 5, 35, 0.95)) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7) !important;
    border-bottom-left-radius: 13px !important;
    border-bottom-right-radius: 13px !important;
}

/* -- URL Info Section - Match Socials/Interests Style -- */
.url-info {
    border: 2px solid rgba(138, 43, 226, 0.7) !important;
    border-radius: 15px !important;
    background: rgba(10, 2, 20, 0.95) !important;
    box-shadow: 0 0 25px rgba(138, 43, 226, 0.5), 
                0 0 50px rgba(65, 105, 225, 0.3),
                inset 0 0 30px rgba(75, 0, 130, 0.4) !important;
    margin-bottom: 25px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Hide the first empty p tag */
.url-info p:first-child {
    display: none !important;
}

/* Header - second p with the label (nth-child(2)) */
.url-info p:nth-child(2) {
    background: linear-gradient(135deg, 
                rgba(75, 0, 130, 0.95), 
                rgba(138, 43, 226, 0.95),
                rgba(65, 105, 225, 0.85)) !important;
    color: #f5e6ff !important;
    font-weight: bold !important;
    font-size: 15px !important;
    text-shadow: 0 0 10px rgba(138, 43, 226, 0.9),
                 0 0 20px rgba(65, 105, 225, 0.7),
                 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
    height: 36px !important;
    line-height: 36px !important;
    padding: 0 15px !important;
    margin: 0 !important;
    border-bottom: 2px solid rgba(138, 43, 226, 0.5) !important;
    text-align: center !important;
    border-top-left-radius: 13px !important;
    border-top-right-radius: 13px !important;
}

/* Hide the b tag styling - inherit from parent */
.url-info p:nth-child(2) b {
    background: transparent !important;
    color: inherit !important;
    text-shadow: inherit !important;
}

/* Body - third p with the actual URL (nth-child(3) / last-child) */
.url-info p:nth-child(3),
.url-info p:last-child {
    color: #e8d4ff !important;
    background: rgba(10, 2, 20, 0.95) !important;
    text-shadow: 0 0 10px rgba(138, 43, 226, 0.9),
                 2px 2px 4px rgba(0, 0, 0, 0.95) !important;
    font-weight: normal !important;
    margin: 0 !important;
    padding: 15px !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.6 !important;
    border-bottom-left-radius: 13px !important;
    border-bottom-right-radius: 13px !important;
}

.url-info a {
    color: #d4a6ff !important;
    text-shadow: 0 0 10px rgba(138, 43, 226, 0.9),
                 2px 2px 4px rgba(0, 0, 0, 0.95) !important;
}

.url-info a:hover {
    color: #eeccff !important;
    text-shadow: 0 0 15px rgba(138, 43, 226, 0.95),
                 0 0 20px rgba(65, 105, 225, 0.8) !important;
}

/* -- Contact Section Buttons -- */
.contact a {
    display: block !important;
    position: relative !important;
    text-align: center !important;
    text-decoration: none !important;
    font-size: 13px !important;
    line-height: 32px !important;
    font-weight: bold !important;
    color: #f5e6ff !important;
    background: linear-gradient(to bottom, 
                rgba(138, 43, 226, 0.8), 
                rgba(75, 0, 130, 0.8)) !important;
    border: 2px solid rgba(138, 43, 226, 0.9) !important;
    border-radius: 8px !important;
    margin: 8px 0 !important;
    padding: 5px 10px !important;
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.5),
                inset 0 0 10px rgba(65, 105, 225, 0.3) !important;
    text-shadow: 0 0 8px rgba(138, 43, 226, 0.9),
                 1px 1px 3px rgba(0, 0, 0, 0.8) !important;
    transition: all 0.3s ease !important;
}

.contact a:hover {
    background: linear-gradient(to bottom, 
                rgba(153, 50, 204, 0.9), 
                rgba(138, 43, 226, 0.9)) !important;
    box-shadow: 0 0 25px rgba(138, 43, 226, 0.8),
                0 0 40px rgba(65, 105, 225, 0.5),
                inset 0 0 15px rgba(65, 105, 225, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* -- Edit Profile Button - Keep Normal -- */
.profile-info a {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-shadow: 0 0 8px rgba(138, 43, 226, 0.8) !important;
}

/* -- Profile Info Section -- */
.profile-info {
    background: linear-gradient(135deg, 
                rgba(15, 5, 25, 0.95), 
                rgba(25, 10, 40, 0.95)) !important;
    border: 2px solid rgba(138, 43, 226, 0.7) !important;
    border-radius: 15px !important;
    padding: 20px !important;
    box-shadow: 0 0 25px rgba(138, 43, 226, 0.5),
                0 0 50px rgba(65, 105, 225, 0.3) !important;
    color: #e8d4ff !important;
}

.profile-info h1 {
    color: #f5e6ff !important;
    text-shadow: 0 0 15px rgba(138, 43, 226, 0.9),
                 0 0 25px rgba(65, 105, 225, 0.7),
                 2px 2px 5px rgba(0, 0, 0, 0.9) !important;
    font-size: 24px !important;
    font-weight: bold !important;
    margin-bottom: 10px !important;
}


/* -- USERNAME H1 - Inside main box, no nested box -- */
.col.left > span > h1,
.col.left h1,
h1[style*="margin: 0px"] {
    background: transparent !important;
    color: #ffffff !important;
    padding: 0 0 15px 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: 0 0 15px rgba(138, 43, 226, 1),
                 0 0 25px rgba(65, 105, 225, 1),
                 3px 3px 8px rgba(0, 0, 0, 1) !important;
    font-weight: bold !important;
    display: block !important;
    font-size: 28px !important;
    text-align: center !important;
}

/* -- AVATAR AREA CONTAINER -- */
.general-about {
    background: linear-gradient(135deg, 
                rgba(15, 5, 25, 0.95), 
                rgba(25, 10, 40, 0.95)) !important;
    border: 2px solid rgba(138, 43, 226, 0.7) !important;
    border-radius: 15px !important;
    padding: 20px !important;
    box-shadow: 0 0 25px rgba(138, 43, 226, 0.5),
                0 0 50px rgba(65, 105, 225, 0.3) !important;
    margin-bottom: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.general-about .profile-pic {
    margin: 0 auto 15px auto !important;
}

/* -- Online status - no box, just text -- */
.general-about .details p.online,
.general-about .details p.offline {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 5px 0 !important;
    margin: 5px 0 !important;
    text-align: center !important;
}

/* -- Status/tagline boxes - below photo -- */
.general-about .details {
    background: transparent !important;
    display: block !important;
    width: 100% !important;
    margin-top: 15px !important;
}

.general-about .details p {
    background: rgba(0, 0, 0, 0.95) !important;
    color: #ffffff !important;
    padding: 10px 14px !important;
    margin: 8px 0 !important;
    border-radius: 6px !important;
    border: 2px solid rgba(138, 43, 226, 0.9) !important;
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.7) !important;
    text-shadow: 0 0 15px rgba(138, 43, 226, 1),
                 0 0 25px rgba(65, 105, 225, 1),
                 3px 3px 8px rgba(0, 0, 0, 1) !important;
    font-weight: bold !important;
    display: block !important;
    font-size: 14px !important;
}

.general-about .details p.last-login {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 5px 0 !important;
}

.general-about .details img {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 8px 0 0 !important;
    vertical-align: middle !important;
}

/* Parent container needs position relative */
.col.left {
    position: relative !important;
}

/* Username span positioning - inside general-about visually */
.col.left > span {
    display: block !important;
    position: absolute !important;
    top: 35px !important;
    left: 20px !important;
    right: 20px !important;
    z-index: 5 !important;
}

/* Make room for username at top */
.general-about {
    padding-top: 55px !important;
    margin-top: 0 !important;
}

/* Profile frame CSS is at the top of the file - don't override it */

/* -- Mood Section -- */
.mood, .mood-section, .user-mood {
    background: rgba(5, 1, 10, 1) !important;
    color: #ffffff !important;
    padding: 15px !important;
    border-radius: 0 !important;
    border: 2px solid rgba(138, 43, 226, 0.7) !important;
    box-shadow: 0 0 25px rgba(138, 43, 226, 0.5),
                0 0 50px rgba(65, 105, 225, 0.3) !important;
    margin-bottom: 25px !important;
}

.mood p, .mood-section p, .user-mood p {
    color: #ffffff !important;
    text-shadow: 0 0 15px rgba(138, 43, 226, 1),
                 0 0 25px rgba(65, 105, 225, 0.8),
                 3px 3px 8px rgba(0, 0, 0, 1) !important;
    font-weight: bold !important;
    margin: 8px 0 !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.mood b, .mood-section b, .user-mood b {
    color: #ffffff !important;
}

/* -- View My Links Section -- */
.view-my, .profile-links, .view-links {
    background: linear-gradient(to right, 
                rgba(15, 5, 25, 0.95), 
                rgba(25, 10, 40, 0.90)) !important;
    padding: 10px 15px !important;
    border-radius: 8px !important;
    border: 2px solid rgba(138, 43, 226, 0.6) !important;
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.5) !important;
    margin: 10px 0 !important;
}

.view-my a, .profile-links a, .view-links a {
    color: #f5e6ff !important;
    background: linear-gradient(to bottom, 
                rgba(138, 43, 226, 0.6), 
                rgba(75, 0, 130, 0.6)) !important;
    padding: 5px 12px !important;
    border-radius: 5px !important;
    border: 1px solid rgba(138, 43, 226, 0.7) !important;
    text-shadow: 0 0 8px rgba(138, 43, 226, 0.9),
                 1px 1px 3px rgba(0, 0, 0, 0.9) !important;
    font-weight: bold !important;
    margin: 0 5px !important;
    display: inline-block !important;
}

.view-my a:hover, .profile-links a:hover, .view-links a:hover {
    background: linear-gradient(to bottom, 
                rgba(153, 50, 204, 0.8), 
                rgba(138, 43, 226, 0.8)) !important;
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.7) !important;
}

/* -- Links -- */
a {
    color: #d4a6ff !important;
    text-decoration: none !important;
    text-shadow: 0 0 5px rgba(138, 43, 226, 0.6) !important;
    transition: all 0.3s ease !important;
}

a:hover {
    color: #eeccff !important;
    text-shadow: 0 0 10px rgba(138, 43, 226, 0.9),
                 0 0 15px rgba(65, 105, 225, 0.7) !important;
}

/* -- Tables -- */
table {
    width: 100% !important;
    border-collapse: collapse !important;
    color: #e8d4ff !important;
}

table td, table th {
    padding: 10px !important;
    border: 1px solid rgba(138, 43, 226, 0.4) !important;
    background: rgba(20, 5, 35, 0.6) !important;
    color: #e8d4ff !important;
}

table th {
    background: linear-gradient(to bottom, 
                rgba(75, 0, 130, 0.8), 
                rgba(138, 43, 226, 0.8)) !important;
    font-weight: bold !important;
    color: #f5e6ff !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7) !important;
}

/* -- Forms and Inputs -- */
input[type="text"], input[type="password"], input[type="email"], 
textarea, select {
    background: rgba(30, 10, 50, 0.8) !important;
    border: 2px solid rgba(138, 43, 226, 0.6) !important;
    border-radius: 8px !important;
    color: #e8d4ff !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    box-shadow: inset 0 0 10px rgba(75, 0, 130, 0.5) !important;
}

input[type="text"]:focus, input[type="password"]:focus, 
input[type="email"]:focus, textarea:focus, select:focus {
    border-color: rgba(138, 43, 226, 0.9) !important;
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.7),
                inset 0 0 15px rgba(75, 0, 130, 0.6) !important;
    outline: none !important;
}

input[type="submit"], input[type="button"], button {
    background: linear-gradient(to bottom, 
                rgba(138, 43, 226, 0.8), 
                rgba(75, 0, 130, 0.8)) !important;
    border: 2px solid rgba(138, 43, 226, 0.9) !important;
    border-radius: 8px !important;
    color: #f5e6ff !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.5) !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8) !important;
    transition: all 0.3s ease !important;
}

input[type="submit"]:hover, input[type="button"]:hover, button:hover {
    background: linear-gradient(to bottom, 
                rgba(153, 50, 204, 0.9), 
                rgba(138, 43, 226, 0.9)) !important;
    box-shadow: 0 0 25px rgba(138, 43, 226, 0.8),
                0 0 40px rgba(65, 105, 225, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* -- Music Player Buttons - Smaller Size -- */
.tunes button,
.music-controls button,
.playlist button,
#music-player button {
    padding: 6px 12px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
}

/* -- Friends List -- */
.friends .inner {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    justify-content: center !important;
}

.friend-item {
    background: linear-gradient(to bottom, 
                rgba(75, 0, 130, 0.7), 
                rgba(45, 0, 80, 0.7)) !important;
    border: 2px solid rgba(138, 43, 226, 0.6) !important;
    border-radius: 10px !important;
    padding: 12px !important;
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.4) !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
}

.friend-item:hover {
    box-shadow: 0 0 25px rgba(138, 43, 226, 0.7),
                0 0 40px rgba(65, 105, 225, 0.5) !important;
    transform: scale(1.05) !important;
}

/* -- Comments Section -- */
#comments .inner {
    max-height: 600px !important;
    overflow-y: auto !important;
}

.comment {
    background: rgba(30, 10, 50, 0.7) !important;
    border: 1px solid rgba(138, 43, 226, 0.5) !important;
    border-radius: 10px !important;
    padding: 12px !important;
    margin-bottom: 15px !important;
    box-shadow: 0 0 10px rgba(138, 43, 226, 0.3) !important;
}

.comment-author {
    color: #d4a6ff !important;
    font-weight: bold !important;
    text-shadow: 0 0 5px rgba(138, 43, 226, 0.7) !important;
    margin-bottom: 8px !important;
}

.comment-text {
    color: #e8d4ff !important;
    line-height: 1.6 !important;
}

/* -- Scrollbar Styling -- */
::-webkit-scrollbar {
    width: 12px !important;
    height: 12px !important;
}

::-webkit-scrollbar-track {
    background: rgba(15, 5, 25, 0.8) !important;
    border-radius: 6px !important;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, 
                rgba(138, 43, 226, 0.8), 
                rgba(75, 0, 130, 0.8)) !important;
    border-radius: 6px !important;
    border: 2px solid rgba(138, 43, 226, 0.5) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, 
                rgba(153, 50, 204, 0.9), 
                rgba(138, 43, 226, 0.9)) !important;
}

/* -- Music Player -- */
.tunes .inner {
    background: linear-gradient(to bottom, 
                rgba(20, 5, 35, 0.95), 
                rgba(30, 10, 50, 0.95)) !important;
}

.music-controls {
    background: rgba(75, 0, 130, 0.6) !important;
    border: 2px solid rgba(138, 43, 226, 0.5) !important;
    border-radius: 8px !important;
    padding: 10px !important;
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.4) !important;
}

/* -- Blog Preview -- */
.blog-preview {
    background: linear-gradient(to bottom, 
                rgba(15, 5, 25, 0.95), 
                rgba(25, 10, 40, 0.95)) !important;
}

.blog-post {
    border-bottom: 1px solid rgba(138, 43, 226, 0.4) !important;
    padding: 15px 0 !important;
    color: #e8d4ff !important;
}

.blog-post:last-child {
    border-bottom: none !important;
}

.blog-title {
    color: #d4a6ff !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-shadow: 0 0 8px rgba(138, 43, 226, 0.7) !important;
    margin-bottom: 8px !important;
}

/* -- Floating Floral Particles Effect -- */
body::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(138, 43, 226, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(65, 105, 225, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(75, 0, 130, 0.1) 0%, transparent 50%) !important;
    pointer-events: none !important;
    z-index: -1 !important;
    animation: floral-ambient 15s ease-in-out infinite !important;
}

@keyframes floral-ambient {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.9; }
}

/* -- Badges Section -- */
.badges-container, .badges .inner, .badge-list, .badges-list, 
.badges-widget .badges-list, .friends.badges-widget .inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

.badge-item, .badge, .badges-widget .badge-item {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 !important;
    width: auto !important;
    flex: 0 0 auto !important;
    max-width: 70px !important;
}

.badge-item img, .badge img, .badge-icon {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 4px !important;
}

.badges-widget .badge-label, .badge-label {
    color: #f5e6ff !important;
    text-shadow: 0 0 8px rgba(138, 43, 226, 0.9),
                 2px 2px 4px rgba(0, 0, 0, 0.9) !important;
    font-weight: bold !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

/* -- Additional Mystical Glow -- */
.profile-pic, .contact, .url-info, .table-section, .tunes, 
.blog-preview, .blurbs, .friends, #comments {
    filter: drop-shadow(0 0 8px rgba(138, 43, 226, 0.3)) !important;
}</style>