:root {
    --bg-color: #1a1a2e;
    --card-color: rgba(18, 18, 29, 0.4);
    --primary-color: #a855f7;
    --text-color: #e0e0e0;
    --header-color: #ffffff;
}
body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    color: var(--text-color);
    background-color: #111;
    overflow-x: hidden;
}
#matrix-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.content-wrapper {
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    box-sizing: border-box;
}
body.home-layout .content-wrapper { align-items: center; }
.card {
    background: var(--card-color);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    max-width: 600px;
    width: 90%;
    text-align: center;
    animation: fadeIn 1s ease-out;
    margin-top: 5vh;
    margin-bottom: 5vh;
}

.content-layout .card {
    max-width: 960px;
}

body.home-layout .card { margin-top: 0; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
.profile-pic { width: 150px; height: 150px; border-radius: 50%; border: 4px solid var(--primary-color); object-fit: cover; margin-bottom: 20px; box-shadow: 0 0 25px var(--primary-color); }
.typing-container { font-size: 1.2em; color: var(--primary-color); margin-bottom: 25px; height: 1.5em; }
.typing-text { display: inline-block; overflow: hidden; white-space: nowrap; border-right: .15em solid var(--primary-color); animation: typing 3.5s steps(40, end) infinite, blink-caret .75s step-end infinite; }
@keyframes typing { from { width: 0 } to { width: 100% } }
@keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: var(--primary-color); } }
h1, h2 { color: var(--header-color); }
h1 { font-size: 2.5em; margin: 0 0 10px 0; }
h2 { color: var(--primary-color); border-bottom: 2px solid var(--primary-color); display: inline-block; padding-bottom: 5px; margin-bottom: 20px; }
p { line-height: 1.7; text-align: left; }
.navigation { width: 100%; text-align: center; margin-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 20px; }
.navigation a { color: var(--text-color); margin: 0 15px; text-decoration: none; font-weight: bold; transition: color 0.3s ease; }
.navigation a:hover, .navigation a.active { color: var(--primary-color); }
.social-icons { margin-top: 30px; }
.social-icons a { color: var(--text-color); font-size: 1.8em; margin: 0 15px; transition: color 0.3s ease, transform 0.3s ease; }
.social-icons a:hover { color: var(--primary-color); transform: translateY(-5px); }
.blog-post { background-color: rgba(0, 0, 0, 0.2); padding: 20px; border-radius: 10px; margin-bottom: 20px; text-align: left; }
.blog-post h3 { color: var(--primary-color); margin-top: 0; }
.blog-post .meta { font-size: 0.8em; color: #aaa; margin-bottom: 10px; }
.post-content { text-align: left; line-height: 1.7; }
.post-content p { margin-bottom: 1em; }
.post-content h1, .post-content h2 { border-bottom: none; margin-top: 1.5em; margin-bottom: 0.5em; }
.post-content blockquote { border-left: 3px solid var(--primary-color); margin-left: 0; padding-left: 1em; color: #ccc; font-style: italic; }
.post-content pre { background-color: #1e1e1e; padding: 1em; border-radius: 5px; overflow-x: auto; color: #e0e0e0; font-family: monospace; }
.post-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 1em 0; }
.admin-login-button { position: fixed; bottom: 20px; right: 20px; color: rgba(255, 255, 255, 0.3); font-size: 1.5em; text-decoration: none; transition: color 0.3s ease, transform 0.3s ease; z-index: 100; }
.admin-login-button:hover { color: rgba(255, 255, 255, 0.8); transform: scale(1.1); }
.playground-button { position: fixed; bottom: 20px; right: 70px; color: rgba(255, 255, 255, 0.3); font-size: 1.5em; text-decoration: none; transition: color 0.3s ease, transform 0.3s ease; z-index: 100; }
.playground-button:hover { color: rgba(255, 255, 255, 0.8); transform: scale(1.1); }
.status-section { margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.status-section:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.status-section h3 { text-align: left; margin-bottom: 20px; display: flex; align-items: center; }
.status-indicator { display: inline-block; width: 10px; height: 10px; background-color: #2ecc71; border-radius: 50%; margin-right: 10px; box-shadow: 0 0 8px #2ecc71; }
.status-text { font-size: 0.8em; color: #2ecc71; }
.status-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.status-item { background-color: rgba(0, 0, 0, 0.2); padding: 20px; border-radius: 10px; text-align: left; }
.status-item.uptime-item { grid-column: span 2; text-align: center; }
.status-label { font-size: 0.9em; color: #aaa; margin-bottom: 5px; }
.status-value { font-size: 1.8em; font-weight: bold; color: var(--header-color); }
.uses-section { margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.uses-section:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.uses-section h3 { text-align: left; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.uses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; text-align: left; }
.uses-item { background-color: rgba(0, 0, 0, 0.2); padding: 15px 20px; border-radius: 10px; display: flex; align-items: center; gap: 15px; transition: background-color 0.3s ease; }
.uses-item:hover { background-color: rgba(168, 85, 247, 0.2); }
.uses-item i { color: var(--primary-color); font-size: 1.2em; width: 20px; text-align: center; }
.maintenance-section { margin-top: 20px; padding: 15px; border: 1px dashed #f1c40f; border-radius: 5px; background-color: rgba(241, 196, 15, 0.1); }
#maintenance-btn { width: 100%; background-color: #f1c40f; color: #111; }
#maintenance-btn:hover { background-color: #f39c12; }
#maintenance-btn.active { background-color: #2ecc71; color: white; }
#maintenance-btn.active:hover { background-color: #27ae60; }
.music-player { display: flex; align-items: center; gap: 12px; background-color: rgba(0, 0, 0, 0.3); padding: 8px 12px; border-radius: 8px; margin: 20px 0; }
.play-pause-btn { background-color: var(--primary-color); border: none; color: white; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; font-size: 1em; flex-shrink: 0; }
.progress-bar-container { flex-grow: 1; background-color: rgba(255, 255, 255, 0.2); height: 5px; border-radius: 3px; overflow: hidden; }
.progress-bar { width: 0%; height: 100%; background-color: var(--primary-color); border-radius: 3px; }
.time-display { font-size: 0.8em; color: #ccc; font-family: monospace; flex-shrink: 0; }
.volume-control { display: flex; align-items: center; gap: 8px; }
.volume-btn { background: none; border: none; color: #ccc; cursor: pointer; font-size: 1.1em; padding: 0; transition: color 0.2s ease; }
.volume-btn:hover { color: white; }
.volume-slider { -webkit-appearance: none; appearance: none; width: 80px; height: 4px; background: rgba(255, 255, 255, 0.3); border-radius: 2px; outline: none; transition: opacity 0.2s; cursor: pointer; }
.volume-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; background: white; border-radius: 50%; }
.volume-slider::-moz-range-thumb { width: 14px; height: 14px; background: white; border-radius: 50%; border: none; }
.lanyard-container { margin-top: 30px; padding: 15px; border-radius: 10px; border-left: 4px solid #747f8d; background-color: rgba(0, 0, 0, 0.2); transition: border-color 0.5s ease; }
.lanyard-container.online { border-color: #2ecc71; } .lanyard-container.idle { border-color: #f1c40f; } .lanyard-container.dnd { border-color: #e74c3c; }
.lanyard-activity { display: flex; align-items: center; gap: 15px; text-align: left; }
#lanyard-avatar { width: 50px; height: 50px; border-radius: 50%; }
.lanyard-details { display: flex; flex-direction: column; overflow: hidden; }
#lanyard-status-text { font-weight: bold; color: var(--header-color); margin: 0; padding: 0; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#lanyard-activity-text { font-size: 0.9em; color: var(--text-color); margin: 0; padding: 0; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.integration-section { width: 100%; margin-top: 30px; }
.integration-header { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding-left: 5px; }
.integration-header i { font-size: 1.5em; color: var(--primary-color); }
.integration-header h3 { margin: 0; color: var(--text-color); font-size: 1.2em; }
.steam-profile-card { display: block; margin-top: 0; background-color: rgba(0, 0, 0, 0.2); border-radius: 10px; padding: 20px; text-decoration: none; transition: background-color 0.3s ease, transform 0.3s ease; }
.steam-profile-card:hover { background-color: rgba(0, 0, 0, 0.4); transform: translateY(-5px); }
.steam-header { display: flex; gap: 20px; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 20px; }
#steam-avatar { width: 96px; height: 96px; border-radius: 5px; }
.steam-info { text-align: left; }
.steam-info h3 { margin: 0; color: var(--header-color); font-size: 1.5em; }
.steam-status { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; }
.steam-status.offline .status-dot { background-color: #8e8e8e; } .steam-status.online .status-dot { background-color: #57cbde; } .steam-status.ingame .status-dot { background-color: #90b93b; } .steam-status.busy .status-dot, .steam-status.snooze .status-dot, .steam-status.away .status-dot { background-color: #f1c40f; }
#steam-status-text { font-weight: bold; }
.steam-status.offline #steam-status-text { color: #8e8e8e; } .steam-status.online #steam-status-text { color: #57cbde; } .steam-status.ingame #steam-status-text { color: #90b93b; } .steam-status.busy #steam-status-text, .steam-status.snooze #steam-status-text, .steam-status.away #steam-status-text { color: #f1c40f; }
#steam-game { margin-top: 8px; font-size: 0.9em; color: #90b93b; }
.steam-recent-games { margin-top: 20px; text-align: left; }
.steam-recent-games h4 { margin: 0 0 15px 0; color: #ccc; }
#steam-games-list { display: flex; flex-direction: column; gap: 10px; }
.recent-game { display: flex; align-items: center; gap: 10px; }
.recent-game img { width: 120px; height: 45px; object-fit: cover; border-radius: 3px; }
.recent-game span { color: var(--text-color); }

@media (max-width: 768px) {
    .content-wrapper { padding: 10px; }
    .card { width: 95%; padding: 25px; margin-top: 2vh; margin-bottom: 2vh; }
    .profile-pic { width: 120px; height: 120px; }
    h1 { font-size: 2em; }
    .typing-container { font-size: 1em; height: auto; }
    .typing-text { animation: none; white-space: normal; border-right: none; }
    .social-icons a { font-size: 1.6em; margin: 0 10px; }
    .navigation a { margin: 0 10px; }
    .status-grid { grid-template-columns: 1fr; }
    .status-item.uptime-item { grid-column: span 1; }
    .status-value { font-size: 1.5em; }
    .uses-grid { grid-template-columns: 1fr; }
}

.blog-search {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 30px;
    box-sizing: border-box; 

    background-color: rgba(0, 0, 0, 0.2); 
    color: var(--text-color);
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;

    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 10px;
    
    outline: none; 
    transition: all 0.3s ease; 
}

.blog-search:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.5); 
}

.blog-search::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}