:root {    --primary-color: #c17d1d;    --secondary-color: #8b0000;    --background-dark: #0F0F0F;    --background-light: #1a1a1a;    --text-color: #d4c4a1;    --border-color: #3d3d3d;    --edge-margin: 10px;}

/* Global Styles */
body {
    margin: 0;
    padding: 0;
    font-family: 'Cinzel', serif;
    background-color: var(--background-dark);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    position: relative;
}

.poe-background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../images/ui/background.jpg');
    background-size: cover;
    opacity: 0.1;
    z-index: -1;
}

/* Navigation */nav {    background-color: rgba(10, 10, 10, 0.95);    border-bottom: 1px solid var(--border-color);    padding: 0.5rem 0;    width: 100%;    max-width: 100vw;    overflow: visible !important; /* Force dropdowns to be visible */    position: relative;    z-index: 1;}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

/* Left side navigation */.nav-left {    display: flex;    justify-content: flex-start;    align-items: center;    width: 30%;}

/* Center logo */.nav-center {    display: flex;    justify-content: center;    align-items: center;    width: 40%;    text-align: center;}

/* Right navigation */.nav-right {    display: flex;    justify-content: flex-end;    align-items: center;    gap: 15px;    width: 30%;    padding-right: 15px;}

.nav-coins {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color);
}

.coin-icon {
    font-size: 1.2rem;
    color: #ffd700;
    animation: coinRotate 4s infinite linear;
}

.coin-count {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--primary-color);
}

.coin-text {
    font-size: 0.9rem;
    color: var(--text-color);
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    user-select: none;
    margin: 0 auto;
}

.logo-img {
    width: 140px;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* Navigation links */
.nav-links {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
}

.nav-links a, .nav-coins {
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.9rem; /* Smaller unified font size */
    transition: color 0.3s ease;
    white-space: nowrap; /* Prevent text wrapping */
}

.nav-links a:hover {
    color: var(--primary-color);
}

.nav-links .nav-auth-btn {
    font-size: 0.9rem; /* Match font size */
}

/* Adjust for smaller screens */
@media (max-width: 1024px) {
    .nav-links {
        gap: 10px; /* Smaller gap on tablets */
    }
    
    .nav-links a, .nav-coins, .nav-links .nav-auth-btn {
        font-size: 0.8rem !important; /* Even smaller on tablets */
    }
    
    .coin-count, .coin-icon {
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .nav-links {
        gap: 8px;
    }
    
    .nav-links a, .nav-links .nav-auth-btn {
        font-size: 0.75rem !important;
        padding: 5px 6px !important;
    }
}

/* POE Official text styles */
.nav-links a .full-text,
.nav-links a .short-text,
.mobile-dropdown-menu a .full-text,
.mobile-dropdown-menu a .short-text,
.dropdown-menu a .full-text,
.dropdown-menu a .short-text {
    font-size: inherit;
    white-space: nowrap;
}

/* Responsive layout for nav */
@media (max-width: 1024px) {
    .short-text {
        display: inline;
    }
    
    .full-text {
        display: none;
    }
}

/* Hamburger Menu */
.hamburger-icon {    width: 28px;    height: 22px;    position: relative;    cursor: pointer;    display: flex;    flex-direction: column;    justify-content: space-between;    padding: 0;    margin: 0;    z-index: 9999;}.hamburger-icon span {    display: block;    height: 3px;    width: 100%;    background-color: var(--primary-color);    border-radius: 3px;    transition: all 0.3s ease;    margin: 0;    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}

/* Responsive navigation */
@media (max-width: 1024px) {
    .nav-container {
        padding: 0.5rem 1rem;
        flex-wrap: nowrap;
    }
    
    .nav-left, .nav-center, .nav-right {
        width: auto;
    }
    
    .logo-img {
        width: 100px; /* Smaller logo */
    }

    .nav-coins {
        font-size: 1rem;
    }

    .coin-icon {
        font-size: 1.1rem;
    }

    .coin-count {
        font-size: 1rem;
    }

    .coin-text {
        display: none; /* Hide on mobile */
    }
    
    .desktop-only {
        display: none !important;
    }
    
    .mobile-only {
        display: block !important;
    }
}

/* Mobile navigation and dropdown adjustments */
@media (max-width: 768px) {
    .nav-container {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    .nav-left {
        width: 25%;
        justify-content: flex-start;
    }
    
    .nav-center {
        width: 50%;
        justify-content: center;
    }
    
    .nav-right {
        width: 25%;
        justify-content: flex-end;
        gap: 8px;
        padding-right: 5px;
    }
    
    /* Mobile dropdown menu adjustments */
    .mobile-dropdown-menu, .dropdown-menu {
        top: 45px;
        z-index: 9999;
        max-height: 85vh;
        overflow-y: auto;
        right: 0;
    }
    
    /* Make text consistent size in dropdowns */
    .mobile-dropdown-menu a, .dropdown-menu a {
        font-size: 0.85rem !important;
        padding: 10px 15px !important;
    }
    
    /* Adjust dropdown position for profile icon */
    .user-profile-dropdown .dropdown-menu {
        right: 0;
    }
    
    /* Allow mobile navigation in dropdown when authenticated */
    .dropdown-menu .mobile-only {
        display: block !important;
    }
    
    /* Hide duplicate menu items in mobile dropdown */
    .mobile-dropdown-menu .mobile-only {
        display: none !important;
    }
    
    /* Style dropdown menus on mobile */
    .dropdown-menu {
        width: 200px;
        right: 0;
    }
    
    .dropdown-menu a {
        border-bottom: 1px solid rgba(61, 61, 61, 0.3);
    }
    
    .dropdown-menu a:last-child {
        border-bottom: none;
    }
    
    /* Profile elements on mobile */
    .profile-icon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
    
    /* Fix image comparison on mobile */
    .image-comparison {
        grid-template-columns: 1fr;
    }
    
    .image-container {
        height: 250px; /* Slightly smaller on mobile */
    }
    
    /* Code header adjustments */
    .code-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .code-actions {
        width: 100%;
        justify-content: space-between;
    }
}

/* Remove the fixed coins display styles */
.coins-display {
    display: none;
}

/* Converter Container */
.converter-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 2rem;
}

.converter-header {
    text-align: center;
    margin-bottom: 3rem;
}

.converter-header h1 {
    font-size: 2.5rem;
    color: var(--primary-color);
    text-shadow: 0 0 10px rgba(193, 125, 29, 0.3);
}

/* Upload Section */
.file-drop-zone {
    background-color: rgba(26, 26, 26, 0.8);
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 2rem 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
}

.file-drop-zone.drag-over {
    border-color: var(--primary-color);
    background-color: rgba(193, 125, 29, 0.1);
    transform: scale(1.01);
    box-shadow: 0 0 20px rgba(193, 125, 29, 0.2);
}

.drop-zone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.file-drop-zone img.upload-icon {
    width: 24px !important;
    height: 24px !important;
    margin-bottom: 0.5rem;
    opacity: 0.7;
    transition: all 0.3s ease;
    object-fit: contain;
    max-width: 24px !important;
    max-height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    display: block !important;
}

.file-drop-zone.drag-over img.upload-icon {
    opacity: 1;
    transform: scale(1.05);
}

.file-drop-zone:hover img.upload-icon {
    opacity: 1;
}

.file-drop-zone h3 {
    font-size: 1.2rem;
    margin: 0.5rem 0;
    pointer-events: none;
}

.file-drop-zone p {
    font-size: 0.9rem;
    margin: 0.25rem 0;
    pointer-events: none;
}

.file-drop-zone:hover {
    border-color: var(--primary-color);
    background-color: rgba(193, 125, 29, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(193, 125, 29, 0.2);
}

.file-drop-zone:hover h3 {
    color: var(--primary-color);
    text-shadow: 0 0 10px rgba(193, 125, 29, 0.3);
}

.file-drop-zone:hover p {
    color: #fff;
}

/* Preview styles */
.preview-wrapper {
    position: relative;
    display: inline-block;
    max-width: 100%;
    pointer-events: auto;
}

.preview-image {
    max-width: 100%;
    max-height: 400px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    pointer-events: none;
}

.remove-image {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--secondary-color);
    border: 2px solid var(--text-color);
    color: var(--text-color);
    font-size: 18px;
    line-height: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.3s ease;
    z-index: 2;
    pointer-events: auto;
}

.remove-image:hover {
    background: #a00;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
}

/* POE Button Style */
.poe-button {
    position: relative;
    background: linear-gradient(to bottom, #c17d1d, #8b5711);
    border: none;
    color: #fff;
    padding: 1rem 2rem;
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 1rem 0;
}

.poe-button:hover {
    background: linear-gradient(to bottom, #d68f22, #9c6313);
}

.button-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
    transform: translateX(-100%);
}

.poe-button:hover .button-effect {
    transform: translateX(100%);
    transition: transform 0.5s ease;
}

/* Result Section */
.image-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 2rem 0;
}

.image-box {
    background-color: rgba(26, 26, 26, 0.8);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    /* Add flex display to center content */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.image-box h3 {
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 1rem;
    width: 100%;
}

/* New styles for the image container */
.image-container {
    width: 100%;
    height: 300px; /* Fixed height for consistency */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.image-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* This preserves aspect ratio */
    width: auto;
    height: auto;
}

/* Guide Page */
.guide-container {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 0 2rem;
}

.guide-section {
    background-color: rgba(26, 26, 26, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.guide-section h2 {
    color: var(--primary-color);
    margin-top: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .image-comparison {
        grid-template-columns: 1fr;
    }
    
    .nav-links a {
        margin-left: 1rem;
        font-size: 1rem;
    }

    .image-container {
        height: 250px; /* Slightly smaller on mobile */
    }
}

/* Footer Styles */
.footer-image-container {
    position: fixed; /* Keeps it fixed on screen */
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers both horizontally and vertically */
    z-index: -1; /* Moves it behind all content */
    opacity: 0.5; /* Optional transparency */
    width: auto;
    padding: 0 100px;
}

.footer-image-container img {
    max-width: 50vw; /* Ensures responsiveness */
    height: auto;
    display: block;
    user-select: none; /* Prevent text/image selection */
    pointer-events: none; /* Disable interaction (if needed) */
    -webkit-user-drag: none; /* Prevent dragging in WebKit browsers */
}

.footer-content {
    text-align: center; /* Centers text and inline elements */
    margin-top: 120px;
    position: relative;
    z-index: 2; /* Ensure footer content is above image overlay */
}

/* Remove dark overlay for footer on generator page */
.generator-page footer::before {
    display: none;
}

/* Ensure footer text is always visible */
footer p {
    position: relative;
    z-index: 3;
    color: var(--text-color);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.social-links {
    display: flex;
    justify-content: center; /* Centers links horizontally */
    gap: 5px; /* Keeps spacing between links */
    margin-bottom: 50px; /* Adds space below the links */
}

/* Social Links Container */
.social-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px; /* Added space below the links */
}

/* Base Link Styling */
.social-link {
    font-size: 14px; /* Smaller text size */
    font-weight: 300; /* Light text weight */
    color: #ddd; /* Soft silver text */
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
}

/* Animated Gradient Glow Effect */
.social-link::before {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 204, 102, 0.6), rgba(255, 140, 0, 0.8));
    transition: width 0.4s ease-in-out, left 0.4s ease-in-out;
}

/* Hover Effect */
.social-link:hover {
    color: #ffcc66; /* Brighter gold text */
    text-shadow: 0px 0px 10px rgba(255, 204, 102, 0.8); /* Soft glow */
}

.social-link:hover::before {
    width: 100%;
    left: 0;
}

@media (max-width: 1024px) {    .nav-container {        flex-direction: row !important;        justify-content: space-between !important;        align-items: center !important;        flex-wrap: nowrap !important;        padding: 0.5rem 1rem;    }        .logo {        margin-bottom: 0; /* No space below logo */    }        .nav-left {        width: 25%;        justify-content: flex-start;    }        .nav-center {        width: 50%;        justify-content: center;    }        .nav-right {        width: 25%;        justify-content: flex-end;        gap: 6px; /* Reduced gap */        padding-right: 10px;    }        .nav-links {        position: static;        display: flex;        flex-wrap: nowrap;        justify-content: flex-end;        gap: 5px; /* Reduced gap */        margin-top: 0;    }        .nav-links a, .nav-auth-btn {        font-size: 0.75rem !important; /* Smaller font */        margin-left: 0;        padding: 5px 6px !important; /* Reduced padding */        white-space: nowrap;        overflow: hidden;        text-overflow: ellipsis;        max-width: 85px; /* Limit max width */    }        .logo-img {        width: 90px; /* Even smaller logo on tablet */    }}

/* Progress Bar Styles */
.progress-container {
    margin: 20px auto 80px auto;
    text-align: center;
    width: 100%;
    max-width: 600px;
    position: relative;
    z-index: 5;
}

.progress-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.progress-bar {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 24px;
    background: rgba(26, 26, 26, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.progress-pct {
    flex: 0 0 auto;
    min-width: 3.2em;
    color: var(--text-color);
    font-size: 1.05rem;
    font-weight: 600;
    text-align: right;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    font-variant-numeric: tabular-nums;
}

.progress {
    width: 0%;
    height: 100%;
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    transition: width 0.2s ease-out; /* Make transition faster and more responsive */
    position: relative;
}

.progress::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        45deg,
        transparent 33%,
        rgba(255, 255, 255, 0.2) 33%,
        rgba(255, 255, 255, 0.2) 66%,
        transparent 66%
    );
    background-size: 20px 20px;
    animation: progressAnimation 0.5s linear infinite;
}

@keyframes progressAnimation {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 20px 0;
    }
}

.progress-text {
    color: var(--text-color);
    font-size: 1.1rem;
    margin-top: 1rem;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Hideout Code Section */
.hideout-code-section {
    background: rgba(26, 26, 26, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin: 2rem 0;
    padding: 1.5rem;
}

.code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.code-header h3 {
    color: var(--primary-color);
    margin: 0;
}

.code-actions {
    display: flex;
    gap: 1rem;
}

/* Code display styling */
.code-container {
    background: rgba(15, 15, 15, 0.9);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 1rem;
    max-height: 500px;
    overflow-y: auto;
    position: relative;
}

/* Custom Scrollbar Styling */
.code-container::-webkit-scrollbar {
    width: 12px;
}

.code-container::-webkit-scrollbar-track {
    background: rgba(15, 15, 15, 0.9);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.code-container::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
    border-radius: 6px;
    border: 2px solid rgba(15, 15, 15, 0.9);
}

.code-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #d68f22, #9c6313);
}

.hideout-format {
    font-family: 'Consolas', monospace;
    color: var(--text-color);
    font-size: 0.9rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-all;
}

.code-error {
    padding: 1.5rem;
    border: 1px solid var(--secondary-color);
    border-radius: 4px;
    background: rgba(139, 0, 0, 0.2);
    color: #ff6b6b;
    text-align: center;
    font-size: 1.1rem;
    margin: 0.5rem 0;
}

.code-error p {
    margin: 0.5rem 0;
}

.code-error p:first-child {
    font-weight: bold;
    font-size: 1.2rem;
}

.code-loading {
    padding: 2rem;
    text-align: center;
    color: var(--text-color);
    font-style: italic;
}

/* Utility Classes */
.hidden {
    display: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .code-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .code-actions {
        width: 100%;
        justify-content: space-between;
    }
}

/* Assets Section */
.assets-section {
    background: rgba(26, 26, 26, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin: 2rem 0;
    padding: 1.5rem;
}

.assets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.asset-item {
    background: rgba(15, 15, 15, 0.9);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease;
}

.asset-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(193, 125, 29, 0.2);
    border-color: var(--primary-color);
}

.asset-image {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 0.5rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.5rem;
}

.asset-name {
    color: var(--text-color);
    font-size: 0.9rem;
    margin: 0;
    font-family: 'Cinzel', serif;
    text-transform: capitalize;
}

.asset-info {
    color: var(--primary-color);
    font-size: 0.8rem;
    margin-top: 0.25rem;
    opacity: 0.8;
}

/* Admin-style Notification System */
.admin-message {
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
    text-align: center;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
}

.admin-message.error {
    background-color: rgba(139, 0, 0, 0.2);
    border: 1px solid rgba(139, 0, 0, 0.3);
    color: #ff6b6b;
}

.admin-message.success {
    background-color: rgba(0, 128, 0, 0.2);
    border: 1px solid rgba(0, 128, 0, 0.3);
    color: #6bff6b;
}

.admin-message.warning {
    background-color: rgba(180, 125, 0, 0.2);
    border: 1px solid rgba(180, 125, 0, 0.3);
    color: #ffcb6b;
}

.admin-message.info {
    background-color: rgba(30, 100, 180, 0.2);
    border: 1px solid rgba(30, 100, 180, 0.3);
    color: #6bcfff;
}

/* Preview Image and Remove Button Styles */
.preview-wrapper {
    position: relative;
    display: inline-block;
}

.preview-image {
    max-width: 100%;
    max-height: 300px;
    border-radius: 4px;
}

.remove-image {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--secondary-color);
    border: 2px solid var(--text-color);
    color: var(--text-color);
    font-size: 18px;
    line-height: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.3s ease;
    z-index: 2;
}

.remove-image:hover {
    background: #a00;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
}

.preview-wrapper p {
    margin-top: 1rem;
    color: var(--text-color);
    font-size: 0.9rem;
    text-align: center;
}

.center-position-controls {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
    background: rgba(26, 26, 26, 0.8);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.position-input {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.position-input label {
    color: var(--text-color);
    font-size: 0.9rem;
}

.position-input input {
    width: 80px;
    padding: 0.5rem;
    background: rgba(15, 15, 15, 0.9);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-color);
    font-family: 'Cinzel', serif;
    text-align: center;
}

.position-input input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 5px rgba(193, 125, 29, 0.3);
}

/* Mobile view for center position controls */
@media (max-width: 768px) {
    .center-position-controls {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
    }
    
    .position-input {
        width: 100%;
        justify-content: space-between;
    }
    
    .position-input input {
        width: 120px;
    }
}

/* Version Toggle Styles */
.button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin: 2rem auto;
    width: 100%;
    max-width: 800px;
}

.version-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.version-toggle .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
    margin: 0;
}

.version-toggle .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(26, 26, 26, 0.8);
    transition: .4s;
    border-radius: 15px;
    border: 2px solid var(--border-color);
}

.version-toggle .slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 2px;
    background-color: var(--text-color);
    transition: .4s;
    border-radius: 50%;
}

/* Remove these color changes */
.version-toggle input:checked + .slider {
    border-color: var(--border-color); /* Keep original border color */
}

.version-toggle input:checked + .slider:before {
    transform: translateX(30px);
    background-color: var(--text-color); /* Keep original circle color */
}

#versionText {
    color: var(--text-color);
    font-size: 0.9rem;
    font-weight: bold;
    margin: 0;
    min-width: 45px;
}

/* Advanced Options Styles */
#advancedToggle {
    background: rgba(26, 26, 26, 0.8);
    border: 2px solid var(--border-color);
    color: var(--text-color);
    padding: 0.4rem 1.2rem;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    height: 30px;
    display: flex;
    align-items: center;
}

#advancedToggle:hover {
    border-color: var(--primary-color);
    background: rgba(193, 125, 29, 0.1);
    color: var(--primary-color);
}

#advancedToggle.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

#advancedOptions {
    background: rgba(26, 26, 26, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 1.5rem;
    margin: 1rem auto;
    width: 100%;
    max-width: 800px;
    box-sizing: border-box;
}

.advanced-options-container {
    display: flex;
    gap: 1rem;
    width: 100%;
}

.advanced-option-group {
    flex: 1;
    min-width: 0; /* Prevents overflow */
}

#advancedOptions label {
    display: block;
    color: var(--text-color);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

#advancedOptions select {
    width: 100%;
    padding: 0.5rem;
    background: rgba(15, 15, 15, 0.9);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-color);
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

#advancedOptions select:hover {
    border-color: var(--primary-color);
}

#advancedOptions select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(193, 125, 29, 0.2);
}

#advancedOptions select option {
    background: rgba(15, 15, 15, 0.95);
    color: var(--text-color);
    padding: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .button-container {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .version-toggle {
        flex-direction: row;
        align-items: center;
    }
    
    .advanced-options-container {
        flex-direction: column;
        gap: 1rem;
    }
    
    #advancedOptions {
        padding: 1rem;
    }
}

.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-color);
    opacity: 0.6;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    padding: 0;
    z-index: 10;
}

.password-toggle:hover {
    opacity: 1;
}

.toggle-text {
    display: none;
}

/* Mobile menu styles */.mobile-menu-container {    position: relative;    display: flex;    align-items: center;    justify-content: center;    padding: 8px;    margin-left: 8px;    margin-right: 15px;    cursor: pointer;    z-index: 9999;}

.mobile-dropdown-menu {    position: absolute;    top: 40px;    right: 0;    background: rgba(15, 15, 15, 0.95);    border: 1px solid var(--border-color);    border-radius: 8px;    width: 180px;    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);    display: none;    z-index: 9999;    overflow: visible;    margin-top: 5px;    opacity: 1 !important;    pointer-events: auto !important;}

.mobile-menu-container.active .mobile-dropdown-menu {    display: block !important;    animation: fadeIn 0.2s ease forwards;    opacity: 1 !important;    visibility: visible !important;    pointer-events: auto !important;    background-color: rgba(15, 15, 15, 0.95) !important;}

.mobile-dropdown-menu a {    display: block;    padding: 12px 15px;    color: var(--text-color);    text-decoration: none;    transition: all 0.2s ease;    border-bottom: 1px solid rgba(61, 61, 61, 0.3);    background-color: rgba(15, 15, 15, 0.95);    opacity: 1;    cursor: pointer;    pointer-events: auto;}.mobile-dropdown-menu a:last-child {    border-bottom: none;}.mobile-dropdown-menu a:hover {    background: rgba(193, 125, 29, 0.2);    color: var(--primary-color);}

/* User profile styles */
.user-profile-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

/* Mobile navigation adjustments */
@media (max-width: 768px) {
    .mobile-dropdown-menu, .dropdown-menu {        top: 45px;        z-index: 9999;        max-height: 85vh;        overflow-y: auto;    }
    
    /* Fix layout on mobile */
    .nav-container {
        justify-content: space-between;
        flex-wrap: nowrap;
    }
    
    /* Allow mobile navigation in dropdown when authenticated */
    .dropdown-menu .mobile-only {
        display: block !important;
    }
    
    /* Hide duplicate menu items in mobile dropdown */
    .mobile-dropdown-menu .mobile-only {
        display: none !important;
    }
    
    /* Style dropdown menus on mobile */
    .dropdown-menu {
        width: 200px;
        right: -10px;
    }
    
    .dropdown-menu a {
        padding: 12px 15px;
        border-bottom: 1px solid rgba(61, 61, 61, 0.3);
    }
    
    .dropdown-menu a:last-child {
        border-bottom: none;
    }
    
    /* Profile elements on mobile */
    .profile-icon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
}

/* Z-index fixes for dropdowns */.user-profile-dropdown, .mobile-menu-container {        z-index: 9998;    position: relative;    overflow: visible !important;}.dropdown-menu, .mobile-dropdown-menu {    z-index: 9999;    overflow: visible !important;    max-height: 85vh;    overflow-y: auto !important;}

/* Custom styling for remember-me checkbox */
.remember-me {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.remember-me input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background-color: rgba(30, 30, 30, 0.7);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    margin-right: 10px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.remember-me input[type="checkbox"]:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.remember-me input[type="checkbox"]:checked::after {
    content: "✓";
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
}

.remember-me label {
    color: var(--text-color);
    font-size: 0.9rem;
    cursor: pointer;
}

/* Desktop/Mobile display helpers */
.desktop-only {    
    display: inline-flex;
}

.mobile-only {    
    display: none;
}

/* Text display options for responsive nav */
.short-text {    
    display: none;
}

/* Desktop and mobile button text classes */
.desktop-text {
    display: inline-block;
}

.mobile-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.button-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
}

@media (max-width: 1024px) {    
    .short-text {        
        display: inline;    
    }        
    
    .full-text {        
        display: none;    
    }
}

@media (max-width: 768px) {
    .desktop-text {
        display: inline-block;
    }
    
    .mobile-text {
        display: inline-flex;
        margin-right: 0;
    }
    
    .button-icon {
        margin: 0 auto;
    }
    
    /* Center login/signup buttons on mobile */
    .auth-container .form-actions,
    .profile-form .form-actions {
        display: flex;
        justify-content: center;
    }
}

/* Hamburger menu animation */
.mobile-menu-container.active .hamburger-icon span:nth-child(1) {    transform: translateY(9px) rotate(45deg);    background-color: var(--primary-color);}.mobile-menu-container.active .hamburger-icon span:nth-child(2) {    opacity: 0;    background-color: var(--primary-color);}.mobile-menu-container.active .hamburger-icon span:nth-child(3) {    transform: translateY(-9px) rotate(-45deg);    background-color: var(--primary-color);}

/* Logout styling */
.logout-link {
    border-top: 1px solid var(--border-color);
    margin-top: 0;
}

/* Mobile view adjustments */
@media (max-width: 768px) {
    .converter-header h1 {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }

    .converter-header p {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }

    .file-drop-zone {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    /* Improve positioning controls for mobile */
    .center-position-controls {
        flex-direction: column;
        gap: 12px;
        padding: 15px 10px;
    }

    /* Place version toggle and advanced button on separate lines */
    .button-container {
        flex-direction: column;
        gap: 15px;
        align-items: center;
        margin-bottom: 15px;
    }

    /* Better button spacing and sizing */
    .poe-button {
        font-size: 0.9rem;
        padding: 8px 12px;
        min-width: 0;
        max-width: none;
        width: auto;
        height: auto;
    }

    /* Fix icon buttons for mobile */
    .button-icon {
        width: 20px;
        height: 20px;
    }

    /* Fix cards on landing page to prevent touching screen edges */
    .landing-features {
        padding: 0 15px;
        margin: 0 auto 2rem;
        max-width: 100%;
        box-sizing: border-box;
    }

    .feature-item {
        margin: 0 auto;
        width: 100%;
        max-width: 280px;
        box-sizing: border-box;
    }

    /* Improve password toggle visibility */
    .password-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
    }

    /* Improve profile page tabs */
    .tab-header {
        flex-direction: row;
        justify-content: center;
        gap: 10px;
        padding: 10px 15px;
    }
    
    .tab-btn {
        padding: 8px 12px;
        font-size: 0.9rem;
        min-width: 0;
        flex: 1;
        max-width: 45%;
        text-align: center;
    }
    
    /* Fix form row alignment on mobile */
    .form-row {
        flex-direction: column;
        gap: 15px;
    }
    
    .form-row .form-group {
        width: 100%;
    }
}

/* Add/update these styles in the Mobile view adjustments section */

@media (max-width: 768px) {
    /* Button container and version toggle */
    .button-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        width: 100% !important;
        margin: 25px auto !important;
    }
    
    .poe-button#convertBtn {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto 10px auto !important;
    }
    
    .version-toggle {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
    }
    
    /* Explicitly place toggle and advanced on separate lines */
    .toggle-wrapper {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin-bottom: 5px !important;
    }
    
    #advancedToggle {
        width: 100% !important;
        box-sizing: border-box !important;
        height: auto !important;
        padding: 10px !important;
        margin-top: 5px !important;
    }
    
    /* Fix position inputs with even spacing */
    .center-position-controls {
        flex-direction: column !important;
        gap: 15px !important;
        margin: 20px auto !important;
        padding: 20px 15px !important;
        width: 100% !important;
        align-items: center !important;
    }
    
    .position-input {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
        padding: 0 10px !important;
    }
    
    .position-input label {
        min-width: 130px !important;
        text-align: center !important;
        margin-right: 15px !important;
        white-space: nowrap !important;
    }
    
    .position-input input {
        width: 100px !important;
        flex-shrink: 0 !important;
    }
}

/* Tab button styling */
.tab-icon {
    margin-right: 5px;
    color: var(--text-color);
}

.tab-btn.active .tab-icon {
    color: var(--primary-color);
}

.tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* Mobile view responsiveness for tabs */
@media (max-width: 768px) {
    .profile-tabs .tab-header {
        gap: 10px;
        width: 100%;
    }
    
    .profile-tabs .tab-btn {
        flex: 1;
        padding: 10px 5px;
    }
    
    .profile-tabs .desktop-text {
        display: none;
    }
    
    .profile-tabs .mobile-text {
        margin-right: 0;
    }
    
    .tab-icon {
        margin-right: 0;
    }
    
    /* Improve form layout on mobile */
    .form-row {
        flex-direction: column;
    }
    
    .form-group {
        width: 100%;
    }
}

/* Form actions centering for all screen sizes */
.form-actions {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

/* Style for form buttons to be more consistent */
.form-actions .poe-button {
    min-width: 200px;
    text-align: center;
}

@media (max-width: 768px) {
    .form-actions .poe-button {
        min-width: 150px;
    }
}

/* Profile tabs styling */
.profile-tabs .tab-header {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
    justify-content: center;
    width: 100%;
    padding: 0;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.tab-btn {
    padding: 0.75rem 1.5rem;
    background: none;
    border: none;
    color: var(--text-color);
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--primary-color);
}

/* Password container styling */
.password-container {
    position: relative;
}

.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-color);
    opacity: 0.6;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    padding: 0;
    z-index: 10;
}

.password-toggle:hover {
    opacity: 1;
}

/* Password icon colors - more specific selectors */
.password-toggle .password-icon {
    stroke: var(--primary-color) !important; /* Default gold for hide state */
}

.password-toggle.show .password-icon {
    stroke: #d68f22 !important; /* Brighter orange/gold for show state */
}

/* Mobile view profile tabs improvements */
@media (max-width: 768px) {
    .profile-tabs .tab-header {
        max-width: 100%;
        gap: 0;
        width: 100%;
        justify-content: space-around;
        padding: 0 0 10px;
    }
    
    .profile-tabs .tab-btn {
        flex: 1;
        padding: 10px 5px;
        max-width: 50%;
    }
    
    .tab-btn.active::after {
        height: 2px;
        bottom: -10px;
    }
}

/* Mobile navigation items in dropdown */
.mobile-nav-item {
    display: none !important; /* Hidden by default on desktop */
}

@media (max-width: 1024px) {
    .mobile-nav-item {
        display: block !important; /* Show on tablets and mobile */
    }
}

.dropdown-menu {
    position: absolute;
    top: 45px;
    right: 0;
    background: rgba(15, 15, 15, 0.95);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 160px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    display: none !important; /* Force hidden by default */
    z-index: 9999;
    overflow: hidden;
    margin-top: 5px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.user-profile-dropdown.active .dropdown-menu {
    display: block !important;
    animation: fadeIn 0.2s ease forwards;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hide navbar and footer when modal is open */
body.modal-open nav, 
body.modal-open footer, 
body.modal-open .footer-image-container,
body.modal-open .footer-content {
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -1 !important;
    display: none !important;
}

/* Show Complete Code Button */
.show-complete-code-container {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
}

.show-complete-code-btn {
    background: rgba(26, 26, 26, 0.9);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.show-complete-code-btn:hover {
    background: rgba(193, 125, 29, 0.2);
    border-color: var(--primary-color);
    color: var(--primary-color);
}


/* square emblem logo */
.logo-img.logo-emblem { width: auto !important; height: 64px; filter: drop-shadow(0 4px 14px rgba(0,0,0,.6)); transition: transform .3s ease; }
.logo:hover .logo-img.logo-emblem { transform: scale(1.05) rotate(-2deg); }
@media (max-width: 1024px) { .logo-img.logo-emblem { height: 54px; } }
@media (max-width: 600px) { .logo-img.logo-emblem { height: 46px; } }

/* wordmark beside the emblem (hidden on small screens, the emblem stays) */
.logo-wordmark { height: 50px; width: auto; margin-left: 0; user-select: none; -webkit-user-drag: none; pointer-events: none; filter: drop-shadow(0 3px 10px rgba(0,0,0,.6)); }
@media (max-width: 1024px) { .logo-wordmark { height: 40px; } }
@media (max-width: 760px) { .logo-wordmark { height: 32px; } }

/* taller nav with the logo centred vertically */
nav.stacking-context { padding: 14px 0 !important; }
nav.stacking-context .nav-container { min-height: 64px; align-items: center !important; }
nav.stacking-context .nav-center, nav.stacking-context .logo { display: flex; align-items: center; justify-content: center; height: 64px; }
.logo-wordmark { height: 58px; display: block; }
@media (max-width: 1024px) { nav.stacking-context { padding: 10px 0 !important; } .logo-wordmark { height: 46px; } }
@media (max-width: 760px) { .logo-wordmark { height: 36px; } }

/* generator page: the nav stays on screen while scrolling */
body.generator-page nav.stacking-context { position: sticky !important; top: 0; background: rgba(10,10,10,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* conversions counter emblem */
.coin-emblem { width: auto; height: 30px; vertical-align: middle; filter: drop-shadow(0 0 6px rgba(255,90,40,.45)); }
@media (max-width: 760px) { .coin-emblem { height: 24px; } }