:root {
    --bg-color: #0b0b0b;
    --panel-bg: #1a1a1a;
    --text-color: #c0c0c0;
    --accent-color: #008080;
    --highlight-color: #ffffff;
    --border-light: #444;
    --border-dark: #000;
    --font-stack: 'Ubuntu', system-ui, -apple-system, sans-serif;
    --btn-face: #c0c0c0;
    --btn-text: #000;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-stack);
    height: 100vh;
    overflow: hidden;
    font-size: 14px;
    letter-spacing: -0.5px;
}

#mobile-menu-btn {
    display: none;
}

.system-line {
    font-size: 12px;
    color: #666;
    margin-bottom: 20px;
}

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

.mobile-only {
    display: none;
}

/* Layout */
.app-container {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 1fr 30px;
    height: 100vh;
}

/* Sidebar */
.sidebar {
    background-color: var(--panel-bg);
    border-right: 2px solid var(--border-light);
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.sidebar-header {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px dashed var(--border-light);
}

.logo {
    font-size: 24px;
    color: var(--highlight-color);
    text-align: center;
    letter-spacing: 2px;
}

.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nav-btn {
    background: transparent;
    border: none;
    color: var(--text-color);
    padding: 10px;
    text-align: left;
    font-family: var(--font-stack);
    font-size: 20px;
    cursor: pointer;
    border: 1px solid transparent;
}

.nav-btn:hover,
.nav-btn.active {
    background-color: var(--highlight-color);
    color: var(--bg-color);
    border: 1px dotted var(--text-color);
}

.nav-btn .icon {
    display: inline-block;
    width: 20px;
}

/* Main Content */
.main-content {
    background-color: var(--bg-color);
    padding: 20px;
    overflow-y: auto;
    position: relative;
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.leaderboard-table th,
.leaderboard-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px dashed #333;
    white-space: nowrap;
}

.leaderboard-table th {
    color: var(--highlight-color);
    font-weight: bold;
}

.leaderboard-table tr.highlight {
    background: #1f1f1f;
}

.table-container {
    overflow-x: auto;
}

.screen-title {
    color: var(--highlight-color);
    border-bottom: 2px solid var(--highlight-color);
    margin-bottom: 20px;
    padding-bottom: 5px;
    font-size: 32px;
}

/* Retro Components */
.retro-panel {
    border: 2px solid var(--border-light);
    padding: 15px;
    margin-bottom: 20px;
    background: #111;
    box-shadow: inset 2px 2px 0px #000, inset -2px -2px 0px #333;
}

.retro-btn {
    background-color: var(--btn-face);
    color: var(--btn-text);
    border: 2px solid #fff;
    border-right-color: #000;
    border-bottom-color: #000;
    padding: 5px 10px;
    font-family: var(--font-stack);
    font-size: 13px;
    cursor: pointer;
}

.retro-btn.large {
    font-size: 24px;
    padding: 10px 30px;
}

.retro-btn:active {
    border: 2px solid #000;
    border-right-color: #fff;
    border-bottom-color: #fff;
    transform: translate(1px, 1px);
}

.retro-btn.small {
    font-size: 12px;
    padding: 2px 8px;
}

.retro-btn.outline {
    background: transparent;
    color: var(--text-color);
    border: 1px solid var(--text-color);
}

.retro-input {
    background: #000;
    color: var(--highlight-color);
    border: 2px solid var(--border-light);
    padding: 8px;
    font-family: var(--font-stack);
    font-size: 14px;
    width: 100%;
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.stat-value {
    font-size: 36px;
    color: var(--highlight-color);
    margin-top: 10px;
}

/* Progress Bar */
.progress-bar-container {
    height: 16px;
    border: 2px solid var(--border-light);
    margin-top: 10px;
    background: #000;
    padding: 1px;
}

.progress-bar {
    height: 100%;
    background: repeating-linear-gradient(45deg,
            var(--text-color),
            var(--text-color) 10px,
            #999 10px,
            #999 20px);
}

/* Study Screen */
.timer-display {
    text-align: center;
    font-size: 80px;
    margin: 40px 0;
    font-family: monospace;
    color: #0f0;
    text-shadow: 0 0 2px #0f0;
}

.controls {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* Table */
.retro-table {
    width: 100%;
    border-collapse: collapse;
}

.retro-table th,
.retro-table td {
    text-align: left;
    padding: 10px;
    border-bottom: 1px dashed #333;
}

.retro-table th {
    color: var(--highlight-color);
    border-bottom: 2px solid var(--highlight-color);
}

.retro-table tr.highlight {
    background-color: #222;
    color: #fff;
}



/* Activity Section */
.activity-section {
    margin-top: 30px;
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 5px;
}

#home {
    width: 100%;
}

/* Profile Stats Grid */
.profile-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin: 20px 0;
    border-top: 1px dashed #444;
    padding-top: 20px;
}

.log-meta {
    font-size: 12px;
    color: #666;
}

.log-user {
    color: var(--highlight-color);
    font-weight: bold;
}

.log-content {
    color: var(--text-color);
}

.log-image-container {
    margin-top: 5px;
    border: 1px solid #333;
    padding: 2px;
    display: inline-block;
    max-width: 200px;
}

.log-actions {
    margin-top: 10px;
    border-top: 1px dotted #333;
    padding-top: 5px;
}

.comments-list {
    margin-bottom: 5px;
    font-size: 12px;
    color: #888;
}

.comment-item {
    margin-bottom: 2px;
    padding-left: 10px;
    border-left: 1px solid #444;
}

.comment-user {
    color: var(--highlight-color);
    font-weight: normal;
}

.retro-input-mini {
    background: transparent;
    border: none;
    border-bottom: 1px solid #444;
    color: #666;
    font-family: var(--font-stack);
    font-size: 11px;
    width: 100%;
    padding: 2px;
}

.retro-input-mini:focus {
    color: var(--highlight-color);
    border-bottom: 1px solid var(--highlight-color);
    outline: none;
}

.proof-img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(100%) contrast(1.2);
}

/* Modals */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.retro-window {
    background: var(--btn-face);
    color: #000;
    border: 2px solid #fff;
    border-right-color: #000;
    border-bottom-color: #000;
    width: 90%;
    max-width: 400px;
    box-shadow: 10px 10px 0px rgba(0, 0, 0, 0.5);
}

.window-title-bar {
    background: blue;
    color: white;
    padding: 2px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

.close-modal-btn {
    background: #c0c0c0;
    border: 1px outset #fff;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
}

.window-content {
    padding: 20px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

/* CRT Overlay */
.crt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    background:
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
        linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 2px, 3px 100%;
    opacity: 0.15;
}

@keyframes flicker {
    0% {
        opacity: 0.97;
    }

    5% {
        opacity: 0.95;
    }

    10% {
        opacity: 0.9;
    }

    15% {
        opacity: 0.95;
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0.98;
    }
}

/* Reflection Buttons */
.reflection-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.reflection-opt {
    width: 100%;
    margin-bottom: 5px;
    text-align: center;
}

/* Home Feed */
.home-header {
    display: flex;
    justify-content: center;
    margin-bottom: none;
}

.screen-title.center {
    text-align: center;
    border: none;
    font-size: 18px;
    letter-spacing: 2px;
    opacity: 0.9;
}

.activity-feed {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Feed Card */
.feed-card {
    background: linear-gradient(180deg, #141414, #0f0f0f);
    border-radius: 14px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.feed-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

/* Avatar Feed Styles */
.feed-avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
    /* Prevent squishing */
    border-radius: 50%;
    object-fit: cover;
    background-color: #333;
    /* Fallback bg */
    border: 1px solid #333;
}

.feed-user {
    font-weight: 600;
    color: #ffffff;
}

.feed-meta {
    font-size: 13px;
    color: #aaaaaa;
}

.feed-text {
    font-size: 16px;
    line-height: 1.5;
    margin: 12px 0;
    color: #dddddd;
}

.feed-image {
    width: 100%;
    border-radius: 12px;
    margin-top: 10px;
    display: block;
}

/* Feed Actions */
.feed-actions {
    display: flex;
    gap: 20px;
    margin-top: 12px;
    font-size: 14px;
    color: #888888;
}

.feed-action {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.feed-action:hover {
    color: #ffffff;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    body {
        font-size: 12px;
        letter-spacing: -0.3px;
    }

    .retro-btn {
        font-size: 13px;
        padding: 10px 15px;
    }

    .status-bar {
        height: auto;
        min-height: 30px;
        font-size: 11px;
        flex-wrap: wrap;
        gap: 8px;
        padding: 4px 6px;
        opacity: 0.85;
    }

    .status-item {
        border-right: none;
        padding-right: 0;
        font-size: 12px;
    }

    .mobile-only {
        display: inline-block;
    }

    .comments-list {
        display: none;
    }

    .timer-display {
        font-size: 50px;
    }

    .log-meta {
        font-size: 11px;
        color: #777;
        opacity: 0.6;
        margin-bottom: 4px;
    }

    .log-content {
        line-height: 1.5;
        margin-bottom: 8px;
        font-size: 14px;
    }

    .log-image-container {
        max-width: 100%;
        margin: 8px 0;
        border: none;
        border-radius: 6px;
        overflow: hidden;
        text-align: center;
        display: block;
        padding: 0;
    }

    .log-actions {
        margin-top: 6px;
        font-size: 12px;
        color: #888;
        padding-top: 4px;
    }

    .proof-img {
        border-radius: 6px;
        margin: auto;
    }

    .app-container {
        grid-template-columns: 1fr;
        grid-template-rows: 50px 1fr 30px;
    }

    .sidebar {
        flex-direction: row;
        align-items: center;
        border-right: none;
        height: 50px;
        display: block;
    }

    .sidebar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #main-nav {
        display: none;
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        background: var(--panel-bg);
        border-bottom: 2px solid var(--border-light);
        z-index: 10;
        flex-direction: column;
        gap: 8px;
        padding: 6px;
    }

    #main-nav.open {
        display: flex;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
    }

    #mobile-menu-btn {
        display: block;
        font-size: 14px;
        padding: 3px 6px;
        width: auto;
        height: auto;
        line-height: 1;
    }

    .main-content {
        padding: 12px;
    }

    .retro-input-mini {
        min-height: 36px;
        padding: 6px 2px;
        font-size: 12px;
        opacity: 0.7;
    }

    .retro-input-mini:focus {
        opacity: 1;
    }

    .leaderboard-table {
        font-size: 12px;
        min-width: 520px;
    }

    .leaderboard-table th,
    .leaderboard-table td {
        padding: 6px 8px;
    }

    .timer-display {
        font-size: 50px;
    }
}

/* Profile Avatar Fix */
.profile-avatar-container {
    margin-right: 30px;
    flex-shrink: 0;
}

.profile-avatar-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #333;
    /* Gradient border simulation placeholder */
    padding: 2px;
    /* Gap for border */
    background: #000;
}

/* New Profile Layout */
.profile-info-new {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Vertical center */
    padding-top: 10px;
    align-items: center;
    /* Horizontal center (Username, Stats, Bio) */
    text-align: center;
}

/* User asked to "center the username".
   If the container is flex-col, I can self-align the row.
   But if they want it truly centered relative to the block, they might mean text alignment?
   Actually, looking at the previous user message: "center the username remove that [star]".
   Maybe they mean vertical alignment with the avatar?
   "justify-content: center" on .profile-info-new handles vertical centering relative to the avatar height.
   
   Wait, the user said "username is not centered".
   If flex-direction is column, cross axis is horizontal.
   So "align-items: center" would center it horizontally.
   "justify-content: center" centers it vertically.
   
   Let's assume they want the Username text centered horizontally in its own container?
   Or centered relative to the avatar?
   
   If I look at my previous CSS:
   .profile-header-new { align-items: flex-start; }
   This puts the info block at the TOP of the avatar.
   Detailed fix:
   1. align-items: center on .profile-header-new to vertically center the info block with the avatar.
   2. ensure .profile-info-new has justify-content: center.
*/

.profile-header-new {
    display: flex;
    align-items: center;
    /* Vertically center the info block with the avatar */
    padding-bottom: 20px;
}

.profile-top-row {
    display: flex;
    align-items: center;
    /* justify-content: center; User asked to center username, but standard layout is left.
       However, removing the star and centering just the text might be what they mean or centering the WHOLE row?
       "center the username" creates ambiguity if stats are left aligned.
       I will assume they want the username row centered relative to the profile info block?
       Or aligned left?
       Let's keep it left for now as per "Instagram style" effectively, but maybe they felt it looked weird?
       Wait, if I remove the star, it's just text.
       I'll add text-align: center to the H2 itself if needed, but flex gap handles alignment.
       Let's stick to the un-nesting first which fixes the visual bugs.
       I will set margin-bottom: 5px on the username to space it out nicely.
    */
    gap: 10px;
    margin-bottom: 12px;
}

.profile-top-row h2 {
    font-size: 24px;
    margin: 0;
    font-weight: 500;
}

.profile-stats-row {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    font-size: 15px;
}

.stat-pill span:not(.stat-num) {
    color: #888;
}

.stat-num {
    font-weight: bold;
    color: #fff;
}

.profile-bio {
    font-size: 14px;
    line-height: 1.4;
}

.profile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.full-width {
    width: 100%;
}

@media (max-width: 768px) {
    .profile-header-new {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .profile-avatar-container {
        margin-right: 0;
        margin-bottom: 15px;
    }

    .profile-stats-row {
        justify-content: center;
        font-size: 13px;
        gap: 15px;
    }
}