body { font-family: Arial; background: #111; color: #eee; padding: 40px; max-width: 1200px; margin: auto; }
.profile-window { background: #1a1a1a; padding: 25px; border-radius: 12px; }
textarea, input[type="text"], input[type="file"] {
    width: 100%; padding: 10px; margin-bottom: 15px;
    background: #111; border: 1px solid #333; color: #fff; border-radius: 6px;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
a {
  color: lightgray;
  text-decoration: none; /* removes underline */
}

/* Optional: style on hover */
a:hover {
  text-decoration: underline;
  color: green; /* or another color if preferred */
}

/* Using yellow/orange colors for 'Warning' rather than hard red */
.warning-box { /* Renamed class to reflect its softer tone */
   background-color: #6f6f6c; 
    border-left: 5px solid #252625; /* Warning orange */
    padding: 12px 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    font-size: 0.95em;
    color: #fbf8f8; /* Darker, desaturated text */
    font-family: 'Poppins', sans-serif;
    p.hover { background: #6d3fd1; }
}

.fontpop{
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 24px;
}

.title-box { /* Renamed class to reflect its softer tone */
    background-color: #5f5f5c; 
    border-left: 5px solid #262625; /* Warning orange */
    padding: 12px 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    font-size: 0.95em;
    color: #fbf9f9; /* Darker, desaturated text */
    font-family: 'Poppins', sans-serif;
}


button { padding: 10px 20px; background: #8257e5; border: none; color: #fff; border-radius: 6px; cursor: pointer; }
button:hover { background: #6d3fd1; }
button:disabled { background: #555; color: #888; cursor: not-allowed; }
.tab-buttons { display: flex; gap: 10px; margin-bottom: 20px; }
.tab-btn { flex: 1; padding: 10px; background: #222; border: none; color: #aaa; cursor: pointer; border-radius: 6px; }
.tab-btn.active { background: #8257e5; color: #fff; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.theme-options { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-bottom: 10px; }
.theme-options label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 0.95rem; }
.theme-options input[type="radio"] { transform: scale(1.05); }
.alert { background: #2ecc71; padding: 10px; border-radius: 6px; margin-bottom: 20px; text-align: center; }
body.light-mode { background: #f4f4f4; color: #111; }
body.light-mode .profile-window { background: #fff; color: #111; }
body.light-mode textarea,
body.light-mode input[type="text"],
body.light-mode input[type="file"] {
    background: #fff; border: 1px solid #ccc; color: #111;
}
body.light-mode button { background: #4c75d6; }
body.light-mode button:hover { background: #365bb6; }
body.light-mode .tab-btn { background: #ddd; color: #333; }
body.light-mode .tab-btn.active { background: #4c75d6; color: #fff; }

/* Top-left decorative image */
.top-left-logo {
    position: fixed;
    top: 12px;
    left: 12px;
    width: 112px;
    height: auto;
    z-index: 1200;
    pointer-events: auto;
    cursor: pointer;
    opacity: 1;
    transition: transform 120ms ease, opacity 120ms ease;
    background-color: transparent !important;
    background: none !important;
    border-radius: 0;
    object-fit: contain;
    box-shadow: none;
}
.top-left-logo:hover { transform: scale(1.02); opacity: 1; }
@media (max-width: 560px) {
    .top-left-logo { display: none; }
}