.site-header {
    background-color: #000000;
    color: #ffffff;
    padding: 20px 0;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Montserrat', sans-serif;
}
.site-logo {
    font-weight: 700;
    font-size: 1.5rem;
}
/* Target your main page links */
.nav-container {
    display: flex !important;       /* !important overrides any hidden styles layout blocks */
    flex-direction: column !important; /* Forces items to stack vertically */
    align-items: center;
    gap: 15px;                      /* Spacing between buttons */
    margin: 25px 0;
    width: 100%;                    /* Ensures container takes full center width */
}
.nav-button {
    display: inline-block;
    background-color: #000000;  /* Solid black background */
    color: #ffffff;             /* Crisp white text */
    text-decoration: none;      /* Remove the default underline */
    
    /* Padding handles the button size shape */
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;         /* Slightly rounded corners */
    
    /* Smoothly fades the background and glow color over 0.3 seconds */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    
    border: none;
    cursor: pointer;
}

/* Hover State: What happens when the mouse moves over the link */
.nav-button:hover {
    background-color: #111111;  /* Keeps it a deep rich black */
    color: #ffffff;             /* Retains white text color */
    
    /* The diffuse glow formula:
       Horizontal-offset (0), Vertical-offset (0), Blur-radius (20px), Spread-radius (4px), Color (Yellow) */
    box-shadow: 0 0 20px 4px rgba(241, 196, 15, 0.6);
    
    /* Subtle lifting animation to make it interactive */
    transform: translateY(-2px); 
}
body {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #FFF;
    color: black;;
    min-height: 100vh;
    font-family: sans-serif;
}

button {
    margin: 20px 0;
    padding: 10px 20px;
    background: #444;
    color: white;
    border: 1px solid #666;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background: #555;
}

canvas {
    border: 1px solid #333;
    max-width: 95vw;
    background: #000;
}



/* AUTHORIZATION */

.nav-auth-btn {
    background: #4f46e5;
    color: white;
    border: none;
    padding: 8px 18px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.nav-auth-btn:hover { background: #4338ca; }

.header-profile { display: flex; align-items: center; gap: 12px; }
.header-avatar {
    background: #10b981;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.85rem;
    text-transform: uppercase;
}
.header-username { color: #e2e8f0; font-size: 0.9rem; font-weight: 500; }
.nav-logout-btn {
    background: transparent;
    color: #64748b;
    border: 1px solid #2d2d3d;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
}
.nav-logout-btn:hover { background: #ef4444; color: white; border-color: #ef4444; }

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 15, 20, 0.75);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; 
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
}
.modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* INTERIOR MODAL CARD FRAME */
.modal-window-card {
    background: #14141a;
    border: 1px solid #23232f;
    padding: 30px;
    border-radius: 12px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
    position: relative;
    transform: translateY(-20px);
    transition: transform 0.2s ease-in-out;
}
.modal-overlay.open .modal-window-card {
    transform: translateY(0);
}

.modal-close-x {
    position: absolute;
    top: 12px;
    right: 16px;
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 1.5rem;
    cursor: pointer;
}
.modal-close-x:hover { color: #f8fafc; }
.input-wrapper { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; }
.input-wrapper input {
    background: #1e1e26;
    border: 1px solid #2d2d3d;
    padding: 10px 14px;
    border-radius: 6px;
    color: #f1f5f9;
    font-size: 0.9rem;
    outline: none;
}
.input-wrapper input:focus { border-color: #4f46e5; }
.modal-submit-btn {
    background: #4f46e5;
    color: white;
    border: none;
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}
#auth-toggle-msg { text-align: center; font-size: 0.8rem; color: #64748b; margin-top: 12px; }
#auth-toggle-msg a { color: #635bff; text-decoration: none; }
.error-text { color: #ef4444; font-size: 0.8rem; margin: 10px 0 0 0; text-align: center; }

.auth-navigation-zone {
    display: inline-block;
}

.nav-auth-btn {
    background: #4f46e5;
    color: white;
    border: none;
    padding: 8px 18px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.15s ease-in-out;
}
.nav-auth-btn:hover { background: #4338ca; }

.header-profile { display: flex; align-items: center; gap: 10px; }
.header-avatar {
    background: #10b981;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.85rem;
    text-transform: uppercase;
}
.header-username { color: #ffffff; font-size: 0.9rem; font-weight: 500; margin-right: 5px; }
.nav-logout-btn {
    background: #222;
    color: #94a3b8;
    border: 1px solid #444;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
}
.nav-logout-btn:hover { background: #ef4444; color: white; border-color: #ef4444; }

/* OVERLAY BLUR BACKDROP PANEL */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(10, 10, 14, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999; /* Ensures it sits above your interactive canvases */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
}

/* Toggle Rule activated by auth.js */
.modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* FLOATING POPUP DIALOG WINDOW CARD */
.modal-window-card {
    background: #14141a;
    border: 1px solid #23232f;
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 340px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
    position: relative;
    text-align: left;
    transform: translateY(-20px);
    transition: transform 0.2s ease-in-out;
}
.modal-overlay.open .modal-window-card {
    transform: translateY(0);
}

.modal-close-x {
    position: absolute;
    top: 12px;
    right: 16px;
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}
.modal-close-x:hover { color: #f8fafc; }

.modal-window-card h2 {
    margin: 0 0 15px 0;
    font-size: 1.25rem;
    color: #f8fafc;
    text-align: center;
}

/* INPUT FORM DYNAMICS */
.input-wrapper { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; }
.input-wrapper input {
    background: #1e1e26;
    border: 1px solid #2d2d3d;
    padding: 10px 14px;
    border-radius: 6px;
    color: #f1f5f9;
    font-size: 0.9rem;
    outline: none;
}
.input-wrapper input:focus { border-color: #4f46e5; }
.modal-submit-btn {
    background: #4f46e5;
    color: white;
    border: none;
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.95rem;
}
.modal-submit-btn:hover { background: #4338ca; }
#auth-toggle-msg { text-align: center; font-size: 0.8rem; color: #64748b; margin-top: 12px; }
#auth-toggle-msg a { color: #635bff; text-decoration: none; font-weight: bold; }
.error-text { color: #ef4444; font-size: 0.8rem; margin: 10px 0 0 0; text-align: center; font-weight: 500; }

#account-button {
    position: fixed;
    top: 12px;
    right: 16px;
    z-index: 9999;
    background: #4f46e5;
    color: white;
    border: 1px solid #2d2d3d;
    border-radius: 999px;
    padding: 9px 16px;
    font-weight: 700;
    cursor: pointer;
}
  
.modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.72);
    display: flex;
    align-items: center;
    justify-content: center;
}
  
.hidden {
    display: none;
}
  
.modal-card {
    width: min(420px, 92vw);
    background: #14141a;
    color: #f8fafc;
    border: 1px solid #2d2d3d;
    border-radius: 18px;
    padding: 24px;
    position: relative;
    box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
  
.modal-card input {
    width: 100%;
    box-sizing: border-box;
    margin: 6px 0;
    padding: 11px;
    border-radius: 8px;
    border: 1px solid #2d2d3d;
    background: #0f0f13;
    color: white;
}
  
.modal-card button {
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #2d2d3d;
    background: #4f46e5;
    color: white;
    cursor: pointer;
}
  
.close-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    font-size: 1.4rem;
}