/* style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* --- Base Theme Variables (Default) --- */
[data-theme="default"], :root { /* Changed body to [data-theme] */
    --color-primary-rgb: 0, 240, 255;
    --color-secondary-rgb: 160, 160, 255;
    --color-accent-rgb: 255, 0, 255;
    --bg-main: #0a0a14;
    --bg-card: rgba(15, 15, 35, 0.85);
    --text-primary: #e0e0ff;
    --text-secondary: rgb(var(--color-secondary-rgb));
    --border-color: rgba(var(--color-primary-rgb), 0.4);
    --hr-color: rgba(var(--color-primary-rgb), 0.3);
}

/* --- Theme Overrides --- */

/* Nebula Theme */
[data-theme="nebula"] { /* Changed body to [data-theme] */
    --color-primary-rgb: 175, 71, 210; /* Purple AF47D2 */
    --color-secondary-rgb: 255, 128, 212; /* Pink FF80D4 */
    --color-accent-rgb: 255, 0, 255;
}

/* Circuits Theme */
[data-theme="circuits"] { /* Changed body to [data-theme] */
    --color-primary-rgb: 0, 240, 255; /* Cyan */
    --color-secondary-rgb: 65, 105, 225; /* Royal Blue 4169E1 */
    --color-accent-rgb: 0, 255, 255; /* Aqua */
}

/* Glitch Theme */
[data-theme="glitch"] { /* Changed body to [data-theme] */
    --color-primary-rgb: 255, 0, 255; /* Magenta */
    --color-secondary-rgb: 160, 160, 255; /* Muted Purple */
    --color-accent-rgb: 0, 240, 255; /* Cyan */
}

/* Matrix Theme */
[data-theme="matrix"] { /* Changed body to [data-theme] */
    --color-primary-rgb: 57, 255, 20; /* Neon Green 39FF14 */
    --color-secondary-rgb: 0, 143, 17; /* Dark Green 008F11 */
    --color-accent-rgb: 127, 255, 0; /* Chartreuse */
    --bg-main: #050a05; /* Darker Greenish */
    --bg-card: rgba(5, 20, 5, 0.85);
}

/* Sunset Theme */
[data-theme="sunset"] { /* Changed body to [data-theme] */
    --color-primary-rgb: 255, 127, 17; /* Orange FF7F11 */
    --color-secondary-rgb: 255, 69, 0; /* OrangeRed FF4500 */
    --color-accent-rgb: 255, 20, 147; /* DeepPink */
}

/* Abstract Theme */
[data-theme="abstract"] { /* Changed body to [data-theme] */
    --color-primary-rgb: 255, 255, 255; /* White */
    --color-secondary-rgb: 128, 128, 128; /* Gray */
    --color-accent-rgb: 0, 240, 255; /* Cyan */
    --bg-main: #111;
    --bg-card: rgba(30, 30, 30, 0.9);
}

/* Dark Grid Theme */
[data-theme="darkgrid"] { /* Changed body to [data-theme] */
    --color-primary-rgb: 128, 128, 128; /* Gray */
    --color-secondary-rgb: 74, 74, 74; /* Dark Gray 4A4A4A */
    --color-accent-rgb: 100, 100, 100;
    --bg-main: #050505;
    --bg-card: rgba(15, 15, 15, 0.9);
}

/* Blueprints Theme */
[data-theme="blueprints"] { /* Changed body to [data-theme] */
    --color-primary-rgb: 65, 105, 225; /* Royal Blue 4169E1 */
    --color-secondary-rgb: 173, 216, 230; /* Light Blue ADD8E6 */
    --color-accent-rgb: 255, 255, 255; /* White */
    --bg-main: #001f3f; /* Navy */
    --bg-card: rgba(0, 31, 63, 0.9);
    --text-primary: #f0f8ff; /* AliceBlue */
}

/* Neon City Theme */
[data-theme="neoncity"] { /* Changed body to [data-theme] */
    --color-primary-rgb: 218, 112, 214; /* Orchid DA70D6 */
    --color-secondary-rgb: 255, 0, 255; /* Magenta */
    --color-accent-rgb: 0, 240, 255; /* Cyan */
}


/* --- Apply Derived Variables --- */
body { /* Keep body styles for overall page */
    --color-primary: rgb(var(--color-primary-rgb));
    --color-secondary: rgb(var(--color-secondary-rgb));
    --color-accent: rgb(var(--color-accent-rgb));
    --color-glow-primary: rgb(var(--color-primary-rgb));
    --color-glow-secondary: rgb(var(--color-accent-rgb));
    --border-color: rgba(var(--color-primary-rgb), 0.4);
    --hr-color: rgba(var(--color-primary-rgb), 0.3);

    background-color: var(--bg-main);
    color: var(--text-primary);
    overflow-x: hidden; /* Prevent horizontal scroll */
    /* Add subtle background pattern */
    background-image: linear-gradient(rgba(var(--color-primary-rgb), 0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(var(--color-primary-rgb), 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
    transition: background-color 0.5s ease; /* Smooth theme transition */
}

/* Add styles for the profile wrapper div */
#profile-wrapper {
    --color-primary: rgb(var(--color-primary-rgb));
    --color-secondary: rgb(var(--color-secondary-rgb));
    --color-accent: rgb(var(--color-accent-rgb));
    --color-glow-primary: rgb(var(--color-primary-rgb));
    --color-glow-secondary: rgb(var(--color-accent-rgb));
    --border-color: rgba(var(--color-primary-rgb), 0.4);
    --hr-color: rgba(var(--color-primary-rgb), 0.3);
     /* Inherit main background settings, let cards override */
    --bg-card: rgba(15, 15, 35, 0.85); /* Default card bg */
    --text-primary: #e0e0ff; /* Default text */
    --text-secondary: rgb(var(--color-secondary-rgb)); /* Default secondary text */
}

/* Apply specific card/text colors within the themed profile */
#profile-wrapper .card { background-color: var(--bg-card); color: var(--text-primary); }
#profile-wrapper .text-secondary { color: var(--text-secondary); }
#profile-wrapper .border-secondary\/20 { border-color: rgba(var(--color-secondary-rgb), 0.2); } /* Tailwind override */
#profile-wrapper .bg-gray-700\/50 { background-color: rgba(var(--color-secondary-rgb), 0.1); } /* Comment bg */
#profile-wrapper .text-gray-300 { color: var(--text-primary); } /* Bio text */
#profile-wrapper .text-gray-200 { color: var(--text-primary); } /* Post text */
#profile-wrapper .bg-gray-900 { background-color: var(--bg-main); } /* Select dropdown bg */


/* Update pulse animation to use variable */
@keyframes pulse-glow {
    0%, 100% { textShadow: 0 0 5px var(--color-glow-primary), 0 0 10px var(--color-glow-primary); }
    50% { textShadow: 0 0 12px var(--color-glow-primary), 0 0 25px var(--color-glow-primary), 0 0 5px var(--color-glow-primary); }
}


/* --- Base Components --- */
.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem; /* Slightly more rounded */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5); /* Stronger shadow */
    /* Add subtle inner glow */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(var(--color-primary-rgb), 0.1);
}

.card-header {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.25rem; /* text-xl */
    line-height: 1.75rem;
    padding: 0.75rem 1rem; /* p-3 px-4 */
    border-bottom: 1px solid var(--hr-color);
    color: var(--color-glow-primary);
    text-shadow: 0 0 8px var(--color-glow-primary), 0 0 15px var(--color-glow-primary); /* Apply intense glow */
}

/* --- Buttons --- */
.btn-primary {
    background: linear-gradient(45deg, rgba(var(--color-primary-rgb), 0.8), rgba(var(--color-secondary-rgb), 0.8));
    color: #000;
    padding-left: 1.25rem; padding-right: 1.25rem; /* px-5 */
    padding-top: 0.6rem; padding-bottom: 0.6rem; /* py-2.5 */
    border-radius: 0.5rem; /* rounded-lg */
    font-weight: 700; /* font-bold */
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: none; /* Remove default shadow */
    border: 1px solid rgba(var(--color-primary-rgb), 0.5);
    box-shadow: 0 3px 8px rgba(var(--color-primary-rgb), 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2);
    letter-spacing: 0.05em; /* Add some spacing */
}
.btn-primary:hover {
    background: linear-gradient(45deg, rgba(var(--color-secondary-rgb), 0.9), rgba(var(--color-primary-rgb), 0.9));
    box-shadow: 0 5px 15px rgba(var(--color-primary-rgb), 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.3);
    transform: translateY(-2px) scale(1.02);
    color: #111;
}

.btn-primary-red {
    background: linear-gradient(45deg, #ef4444, #b91c1c); /* Updated Red gradient */
    color: white;
    padding-left: 1.25rem; padding-right: 1.25rem; /* px-5 */
    padding-top: 0.6rem; padding-bottom: 0.6rem; /* py-2.5 */
    border-radius: 0.5rem; /* rounded-lg */
    font-weight: 700; /* font-bold */
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(239, 68, 68, 0.5);
    box-shadow: 0 3px 8px rgba(239, 68, 68, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2);
    letter-spacing: 0.05em;
}
.btn-primary-red:hover {
    background: linear-gradient(45deg, #b91c1c, #ef4444);
    box-shadow: 0 5px 15px rgba(239, 68, 68, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.3);
    transform: translateY(-2px) scale(1.02);
}

.btn-secondary {
    background-color: rgba(var(--color-secondary-rgb), 0.15); /* Slightly more visible */
    color: var(--color-secondary);
    padding-left: 1rem; padding-right: 1rem; /* px-4 */
    padding-top: 0.5rem; padding-bottom: 0.5rem; /* py-2 */
    border-radius: 0.5rem; /* rounded-lg */
    font-weight: 600; /* font-semibold */
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    box-shadow: inset 0 0 5px rgba(var(--color-primary-rgb), 0.1);
}
.btn-secondary:hover {
    background-color: rgba(var(--color-primary-rgb), 0.2);
    color: var(--color-primary);
    border-color: rgba(var(--color-primary-rgb), 0.7);
    transform: translateY(-1px);
    box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.3), inset 0 0 8px rgba(var(--color-primary-rgb), 0.2);
}

/* Social Login Buttons */
.social-btn {
    width: 3rem; /* w-12 */
    height: 3rem; /* h-12 */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px; /* rounded-full */
    background-color: rgba(var(--color-secondary-rgb), 0.15);
    transition: all 0.3s ease;
    border: 1px solid rgba(var(--color-secondary-rgb), 0.3);
    color: var(--text-secondary); /* Icon color */
}
.social-btn:hover {
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 0 12px rgba(var(--color-primary-rgb), 0.6);
    background-color: rgba(var(--color-primary-rgb), 0.2);
    border-color: rgba(var(--color-primary-rgb), 0.5);
    color: var(--color-primary);
}


/* --- Navigation --- */
.nav-link {
    color: var(--color-secondary);
    font-weight: 600; /* font-semibold */
    display: flex;
    align-items: center;
    transition: color 0.2s, text-shadow 0.3s ease;
    position: relative; /* For underline effect */
    padding-bottom: 4px;
}
.nav-link:hover {
    color: var(--color-primary);
    text-shadow: 0 0 8px var(--color-primary), 0 0 15px var(--color-primary);
}
/* Active state underline */
.nav-link.text-primary::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Slightly below */
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-primary);
    box-shadow: 0 0 8px var(--color-primary);
    transition: all 0.3s ease;
}

.user-menu-link {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.75rem; /* Slightly more padding */
    border-radius: 0.375rem; /* rounded-md */
    color: var(--color-secondary);
    transition: all 0.2s ease;
}
.user-menu-link:hover {
    background-color: rgba(var(--color-primary-rgb), 0.15);
    color: var(--color-primary);
    text-shadow: 0 0 5px var(--color-primary);
}

/* --- Input Fields (Enhanced) --- */
.cyber-input {
    width: 100%;
    background-color: rgba(0,0,0,0.3); /* Darker transparent bg */
    border: 2px solid var(--border-color);
    border-radius: 0.5rem; /* rounded-lg */
    padding: 0.85rem 0.75rem; /* Slightly more vertical padding */
    color: var(--text-primary);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    caret-color: var(--color-primary);
    font-size: 1rem; /* Ensure consistent size */
}
.cyber-input::placeholder {
    color: transparent;
}
.cyber-input:focus {
    outline: none;
    border-color: rgba(var(--color-primary-rgb), 0.8);
    background: rgba(0,0,0,0.5);
    color: #fff;
    box-shadow: 0 0 18px rgba(var(--color-primary-rgb), 0.5), inset 0 0 8px rgba(var(--color-primary-rgb), 0.3);
}
.cyber-input-group select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='%23a0a0ff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E"); /* Bolder arrow */
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.4em; /* Larger arrow */
    padding-right: 3rem;
}
/* Adjust select arrow color based on theme */
.cyber-input-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='rgb(var(--color-secondary-rgb))'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E");
}

/* Floating Label Logic (Smoother) */
.cyber-label {
    position: absolute;
    left: 0.75rem;
    top: 0.85rem; /* Adjusted for padding */
    color: var(--color-secondary);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
    background: none; /* Remove background */
    padding: 0 0.25rem; /* Add horizontal padding */
}
.cyber-input:focus + .cyber-label,
.cyber-input:not(:placeholder-shown) + .cyber-label {
    top: -0.6rem;
    left: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--color-primary);
    /* Create background effect using pseudo-element or border-image */
    /* Simpler: just ensure it sits above the border */
    background-color: var(--bg-main); /* Match nearest solid background */
}
/* Adjust label background for cards */
.card .cyber-input:focus + .cyber-label,
.card .cyber-input:not(:placeholder-shown) + .cyber-label {
     background-color: var(--bg-card); /* Use card's bg */
}
/* Adjust label for select */
.cyber-input-group label {
     top: -0.6rem;
     left: 0.5rem;
     font-size: 0.75rem;
     line-height: 1rem;
     background-color: var(--bg-main); /* Match nearest solid background */
     padding: 0 0.25rem;
     color: var(--color-secondary);
}
.card .cyber-input-group label {
      background-color: var(--bg-card); /* Use card's bg */
}


/* --- Effects --- */

/* Login Background */
.login-bg {
    background-image: url('https://placehold.co/1920x1080/0a0a14/0a0a14?text=+'), linear-gradient(rgba(var(--bg-main-rgb), 0.9), rgba(10, 10, 30, 0.95)); /* Darker gradient */
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center center;
}
/* Login Grid Overlay */
.login-grid-overlay {
  background-image:
    linear-gradient(to right, rgba(var(--color-primary-rgb), 0.15) 1px, transparent 1px), /* Brighter grid */
    linear-gradient(to bottom, rgba(var(--color-primary-rgb), 0.15) 1px, transparent 1px);
  background-size: 50px 50px; /* Larger grid */
}
/* Login Corner Effects */
.corner-overlay {
    position: absolute;
    width: 30px;
    height: 30px;
    border-style: solid;
    border-color: var(--color-primary);
    opacity: 0.7;
    box-shadow: 0 0 10px var(--color-primary);
}
.corner-overlay.top-left { top: 10px; left: 10px; border-width: 3px 0 0 3px; }
.corner-overlay.top-right { top: 10px; right: 10px; border-width: 3px 3px 0 0; }
.corner-overlay.bottom-left { bottom: 10px; left: 10px; border-width: 0 0 3px 3px; }
.corner-overlay.bottom-right { bottom: 10px; right: 10px; border-width: 0 3px 3px 0; }

.scan-lines {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(26, 26, 46, 0) 50%, rgba(var(--color-primary-rgb), 0.05) 50%); /* Brighter scanline */
    background-size: 100% 3px; /* Thinner line */
    animation: scan 12s linear infinite; /* Faster scan */
    opacity: 0.6;
    z-index: 5;
}
@keyframes scan {
    from { background-position: 0 0; }
    to { background-position: 0 100vh; }
}

.neon-glow-primary {
    box-shadow: 0 0 12px var(--color-primary), 0 0 25px var(--color-primary), inset 0 0 10px rgba(var(--color-primary-rgb), 0.3); /* Brighter glow */
}

.text-glow-primary {
    text-shadow: 0 0 8px var(--color-primary), 0 0 15px var(--color-primary), 0 0 2px var(--color-primary); /* Add subtle core glow */
}
.text-glow-secondary {
    text-shadow: 0 0 8px var(--color-glow-secondary), 0 0 15px var(--color-glow-secondary), 0 0 2px var(--color-glow-secondary);
}
.text-glow-red {
     text-shadow: 0 0 6px #f00, 0 0 12px #f00;
}


/* Glitch Effect */
.glitch { position: relative; }
.glitch::before, .glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: inherit; overflow: hidden;
    color: var(--color-primary);
    mix-blend-mode: screen; /* Blend mode for effect */
    opacity: 0.9;
}
.glitch::before {
    left: 2px;
    text-shadow: -2px 0 var(--color-accent);
    animation: glitch-anim-1 3s infinite linear alternate-reverse;
}
.glitch::after {
    left: -2px;
    text-shadow: 2px 0 var(--color-secondary); /* Reverse shadow */
    animation: glitch-anim-2 2.5s infinite linear alternate-reverse;
}
/* More subtle glitch */
@keyframes glitch-anim-1 { 0%, 100% { clip-path: inset(45% 0 50% 0); transform: translateX(-1px); } 20% { clip-path: inset(10% 0 85% 0); } 40% { clip-path: inset(90% 0 5% 0); } 60% { clip-path: inset(55% 0 35% 0); transform: translateX(1px); } 80% { clip-path: inset(25% 0 70% 0); } }
@keyframes glitch-anim-2 { 0%, 100% { clip-path: inset(5% 0 90% 0); transform: translateX(1px); } 20% { clip-path: inset(75% 0 15% 0); } 40% { clip-path: inset(35% 0 60% 0); transform: translateX(-1px); } 60% { clip-path: inset(95% 0 2% 0); } 80% { clip-path: inset(60% 0 20% 0); } }

/* Form Transition */
.form-transition {
    transition: opacity 0.5s ease-out, visibility 0.5s, transform 0.5s ease-out; /* Added transform */
    transform: translateY(0);
}
.form-transition.hidden {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -30%); /* Move up slightly on hide */
    width: 80%;
}
/* Specific transition for register form */
#register-form {
     transform: translate(0, 20px); /* Start slightly lower */
}
#register-form.visible {
     transform: translate(0, 0);
}

/* Glowing HR */
.glow-hr {
    border-color: var(--hr-color);
    box-shadow: 0 0 8px rgba(var(--color-primary-rgb), 0.5);
}


/* --- Profile Page Polish --- */

/* Profile Header Background */
.profile-header-bg {
    height: 14rem; /* Taller */
    background-size: cover;
    background-position: center;
    border-radius: 0.75rem 0.75rem 0 0; /* Match card radius */
    position: relative;
    overflow: hidden; /* Ensure overlay fits */
}
.profile-header-bg::after { /* Darker gradient overlay */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--bg-card) 20%, rgba(15, 15, 35, 0.3) 80%);
}

/* Profile Avatar */
.profile-avatar-wrapper {
    margin-top: -6rem; /* Adjust for taller header */
    position: relative;
    z-index: 10; /* Ensure avatar is above header content */
}
.profile-avatar {
    width: 10rem; /* w-40 Larger */
    height: 10rem; /* h-40 Larger */
    border-radius: 9999px;
    border: 5px solid var(--color-primary); /* Thicker border */
    box-shadow: 0 0 25px var(--color-primary), 0 5px 10px rgba(0,0,0,0.6); /* Brighter glow + darker shadow */
    margin-left: auto;
    margin-right: auto;
    background-color: var(--bg-card); /* Add background to prevent transparency issues */
}

/* Profile Main Card */
.profile-main-card {
    border-radius: 0 0 0.75rem 0.75rem !important; /* !rounded-t-none */
}

/* Profile Sections Spacing & Styling */
.profile-section {
    margin-top: 2rem; /* mt-8 More spacing */
}
.profile-section-header {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem; /* text-2xl */
    color: var(--color-glow-primary);
    text-shadow: 0 0 10px var(--color-glow-primary), 0 0 20px var(--color-glow-primary);
    margin-bottom: 1.25rem; /* mb-5 */
    border-bottom: 1px solid var(--hr-color);
    padding-bottom: 0.75rem; /* More padding */
    position: relative;
}
/* Add line accent */
.profile-section-header::after {
    content: '';
    position: absolute;
    bottom: -1px; /* Align with border */
    left: 0;
    width: 50px; /* Width of the accent line */
    height: 3px;
    background-color: var(--color-primary);
    box-shadow: 0 0 8px var(--color-primary);
}


/* Profile Info Grid */
.profile-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Responsive columns */
    gap: 1.25rem; /* gap-5 */
    font-size: 0.9rem; /* Slightly smaller text */
}
.profile-info-item strong {
    display: block;
    color: var(--color-secondary);
    font-weight: 700;
    margin-bottom: 0.25rem;
    letter-spacing: 0.05em;
    text-transform: uppercase; /* Uppercase labels */
}

/* Friends List Polish */
.friend-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.2s ease;
    position: relative;
}
.friend-item:hover {
    transform: translateY(-5px);
}
.friend-item img {
    width: 4.5rem; /* w-18 */
    height: 4.5rem; /* h-18 */
    border-radius: 9999px;
    border: 3px solid rgba(var(--color-secondary-rgb), 0.4);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 0.5rem; /* mb-2 */
}
.friend-item:hover img {
    border-color: var(--color-primary);
    box-shadow: 0 0 12px var(--color-primary);
}
.friend-item span {
    font-size: 0.8rem; /* text-xs */
    font-weight: 600;
    color: var(--text-secondary);
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.friend-item:hover span {
    color: var(--color-primary);
}

/* Badges List Polish */
.badge-item {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* space-x-3 */
    padding: 0.5rem 0;
    border-bottom: 1px dashed rgba(var(--color-secondary-rgb), 0.2);
}
.badge-item:last-child {
    border-bottom: none;
}
.badge-item i {
    color: var(--color-primary);
    filter: drop-shadow(0 0 5px var(--color-primary)); /* Glow effect on icon */
}
.badge-item span {
    font-weight: 600;
    color: var(--text-primary);
}
.badge-item[title]:hover::after { /* Custom tooltip style (basic) */
    content: attr(title);
    position: absolute;
    /* Basic styling - needs refinement */
}


/* --- Admin Panel --- */
.admin-panel-tab { /* Renamed from .admin-tab */
    padding: 0.5rem 1rem; /* px-4 py-2 */
    font-weight: 600; /* font-semibold */
    color: var(--color-secondary);
    border-bottom: 3px solid transparent; /* Thicker border */
    transition: color 0.2s, border-color 0.2s, text-shadow 0.2s;
    margin-bottom: -1px; /* Align with container border */
}
.admin-panel-tab:hover {
    color: var(--color-primary);
    text-shadow: 0 0 5px var(--color-primary);
}
.admin-panel-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    text-shadow: 0 0 8px var(--color-primary);
}
/* Admin table min-width to prevent squishing */
#admin-user-list-table, #admin-post-list-table, #admin-comment-list-table {
    min-width: 900px; /* Increased min-width */
}


/* --- Message Toasts --- */
.message-toast {
     opacity: 0; /* Start hidden for animation */
     border-radius: 0.375rem; /* rounded-md */
     border-width: 1px;
     animation: slide-in 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; /* Ensure animation class is applied */
}
.animate-slide-out { animation: slide-out 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards; }

/* Role Colors */
.role-owner { color: #FF4136; font-weight: bold; text-shadow: 0 0 5px #f87171; } /* Brighter red glow */
.role-moderator { color: #39CCCC; font-weight: bold; text-shadow: 0 0 5px #67e8f9; } /* Brighter cyan glow */
.role-staff { color: #f0abfc; font-weight: bold; text-shadow: 0 0 5px #f0abfc; } /* Lighter purple glow */
/* Ensure links within roles keep their color */
.role-owner a, .role-moderator a, .role-staff a { color: inherit; }


/* Ensure sufficient height for message area */
.h-\[calc\(100vh-10rem\)\] {
    height: calc(100vh - 10rem); /* Adjust 10rem based on header/padding */
    min-height: 350px; /* Slightly larger minimum height */
}

/* --- Notification Dropdown --- */
.notification-item {
    display: flex;
    text-decoration: none;
    padding: 0.75rem; /* p-3 */
    border-bottom: 1px solid var(--hr-color); /* Use hr color */
    transition: background-color 0.2s ease;
    color: var(--text-primary);
}
.notification-item:hover {
    background-color: rgba(var(--color-primary-rgb), 0.1);
}
.notification-item:last-child {
    border-bottom: none;
}

/* Unread state */
.notification-item.unread {
    background-color: rgba(var(--color-primary-rgb), 0.08);
}
.notification-item.unread:hover {
    background-color: rgba(var(--color-primary-rgb), 0.15);
}

/* --- Settings Page: Layout Presets --- */
.layout-preset-item {
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    position: relative; /* Needed for absolute positioning inside */
}

.layout-preset-item:hover {
    transform: scale(1.03);
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.5);
}