/* ================================================
   PIXELTKFL TIME — Sosyal Akış Stili
   ================================================ */

.time-hero,
.time-app,
.time-left,
.time-center,
.time-right {
    position: relative;
    z-index: 3;
}

/* ================================================
   HERO
   ================================================ */

.time-hero {
    background-image:
        linear-gradient(rgba(204, 17, 17, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(204, 17, 17, 0.05) 1px, transparent 1px);
    background-size: 32px 32px;
    border-bottom: 4px solid var(--color-red-dark);
    padding: 40px 32px;
    text-align: center;
}

.time-hero-eyebrow {
    font-size: 7px;
    color: var(--color-red);
    letter-spacing: 3px;
    margin-bottom: 14px;
    animation: blink 1.2s step-end infinite;
}

.time-hero-title {
    font-size: clamp(22px, 4vw, 42px);
    color: var(--color-white);
    letter-spacing: 4px;
    text-shadow:
        4px 4px 0 var(--color-red),
        7px 7px 0 var(--color-red-dark);
    margin-bottom: 14px;
}

.time-hero-accent { color: var(--color-red-light); }

.time-hero-sub {
    font-size: 7px;
    color: var(--color-off-white);
    letter-spacing: 2px;
    line-height: 2.4;
}

/* ================================================
   APP SHELL — 3 Sütun
   ================================================ */

.time-app {
    display: grid;
    grid-template-columns: 220px 1fr 260px;
    max-width: 1200px;
    margin: 0 auto;
    min-height: calc(100vh - 72px);
}

/* ================================================
   LEFT SIDEBAR
   ================================================ */

.time-left {
    background: #070005;
    border-right: 3px solid #1a0018;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 72px;
    height: calc(100vh - 72px);
    overflow-y: auto;
}

.tl-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #100010;
    border: 2px solid #2a0028;
    box-shadow: 3px 3px 0 #000;
}

.tl-profile-avatar {
    width: 44px;
    height: 44px;
    background: var(--color-red-dark);
    border: 3px solid var(--color-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--color-white);
    flex-shrink: 0;
}

.tl-profile-name {
    font-size: 7px;
    color: var(--color-white);
    letter-spacing: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tl-profile-role {
    font-size: 6px;
    color: var(--color-red);
    letter-spacing: 1px;
    margin-top: 4px;
    cursor: pointer;
}

.tl-profile-role:hover { color: var(--color-red-light); }

.tl-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tl-heading {
    font-size: 6px;
    color: #444;
    letter-spacing: 2px;
    padding-bottom: 6px;
    border-bottom: 1px solid #1a0018;
}

.tl-filters {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tl-filter-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    color: #666;
    background: transparent;
    border: 0;
    border-left: 3px solid transparent;
    padding: 8px 10px;
    text-align: left;
    cursor: pointer;
    letter-spacing: 1px;
    transition: none;
}

.tl-filter-btn:hover {
    color: #aaa;
    background: #100010;
    border-left-color: var(--color-red-dark);
}

.tl-filter-btn--active {
    color: var(--color-white);
    background: #1a0018;
    border-left-color: var(--color-red);
}

.tl-team-filters {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tl-team-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 5px;
    color: #555;
    background: transparent;
    border: 0;
    border-left: 3px solid transparent;
    padding: 7px 10px;
    text-align: left;
    cursor: pointer;
    letter-spacing: 1px;
    transition: none;
}

.tl-team-btn:hover {
    color: #aaa;
    background: #100010;
    border-left-color: var(--color-red-dark);
}

/* ================================================
   CENTER FEED
   ================================================ */

.time-center {
    background: #060003;
    border-right: 3px solid #1a0018;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 72px);
}

/* ── STORY BAR ── */
.story-bar {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
    background: #070005;
    border-bottom: 3px solid #1a0018;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
}
.story-bar::-webkit-scrollbar { display: none; }

.story-add,
.story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    cursor: pointer;
}

.story-add-frame {
    width: 56px;
    height: 56px;
    background: #100010;
    border: 3px solid var(--color-red-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 3px 3px 0 #000;
}

.story-add:hover .story-add-frame {
    border-color: var(--color-red);
    background: #1a0018;
}

.story-add-plus {
    font-family: 'Press Start 2P', monospace;
    font-size: 18px;
    color: var(--color-red);
    line-height: 1;
}

.story-frame {
    width: 56px;
    height: 56px;
    border: 3px solid var(--color-red);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0008;
    box-shadow: 3px 3px 0 #000, 0 0 0 2px #330033;
}

.story-frame--seen {
    border-color: #3a0038;
    box-shadow: 3px 3px 0 #000;
}

.story-item--unseen .story-frame {
    animation: story-glow 2s step-end infinite;
}

@keyframes story-glow {
    0%, 90%  { border-color: var(--color-red); }
    92%      { border-color: var(--color-red-light); box-shadow: 3px 3px 0 #000, 0 0 8px var(--color-red); }
    94%      { border-color: var(--color-red); }
}

.story-avatar-mock { font-size: 22px; line-height: 1; }

.story-label {
    font-size: 5px;
    color: #666;
    letter-spacing: 1px;
    text-align: center;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.story-item--unseen .story-label { color: var(--color-off-white); }

/* ── CREATE POST BOX ── */
.create-post-box {
    padding: 14px 20px;
    border-bottom: 3px solid #1a0018;
    background: #08000a;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    flex-shrink: 0;
}

.create-post-box:hover { background: #0f0010; }

.cpb-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cpb-avatar-placeholder {
    width: 40px;
    height: 40px;
    background: #1a0018;
    border: 3px solid #330033;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #444;
    flex-shrink: 0;
    font-family: 'Press Start 2P', monospace;
}

.cpb-input-fake {
    flex: 1;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: #444;
    background: #0d000f;
    border: 2px solid #2a0028;
    padding: 12px 16px;
    letter-spacing: 1px;
}

.cpb-actions {
    display: flex;
    gap: 8px;
    padding-top: 4px;
    border-top: 2px solid #1a0018;
}

.cpb-action-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    color: #777;
    background: transparent;
    border: 2px solid #2a0028;
    padding: 8px 12px;
    cursor: pointer;
    letter-spacing: 1px;
    flex: 1;
    text-align: center;
    transition: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.cpb-action-btn:hover {
    color: var(--color-off-white);
    border-color: var(--color-red-dark);
    background: #100010;
}

/* ================================================
   POST CARD
   ================================================ */

.post-card {
    background: #08000a;
    border-bottom: 3px solid #1a0018;
}

.post-card:hover { background: #0a000c; }

.post-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px 10px;
}

.post-avatar-wrap { position: relative; flex-shrink: 0; }

.post-avatar {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-red-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--color-white);
    font-family: 'Press Start 2P', monospace;
}

.post-avatar--red   { background: var(--color-red-dark); }
.post-avatar--blue  { background: #001a33; border-color: #003366; }
.post-avatar--green { background: #003300; border-color: #006600; }

.post-online-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background: #33cc33;
    border: 2px solid #08000a;
    box-shadow: 0 0 4px #33cc33;
}

.post-meta { flex: 1; min-width: 0; }

.post-username {
    font-size: 8px;
    color: var(--color-white);
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.post-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.post-team-tag {
    font-size: 6px;
    color: var(--color-red);
    letter-spacing: 1px;
    background: #1a0000;
    border: 1px solid var(--color-red-dark);
    padding: 2px 6px;
}

.post-team-tag--verified {
    color: #ffcc00;
    background: #1a1100;
    border-color: #cc9900;
}

.post-role-badge {
    font-size: 5px;
    color: var(--color-gray);
    border: 1px solid var(--color-gray);
    padding: 2px 5px;
    letter-spacing: 1px;
}

.post-time {
    font-size: 6px;
    color: #444;
    letter-spacing: 1px;
}

.post-menu-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    color: #444;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    flex-shrink: 0;
}
.post-menu-btn:hover { color: var(--color-off-white); }

/* ── MEDIA ── */
.post-media {
    position: relative;
    width: 100%;
    background: #030004;
    overflow: hidden;
    height: 280px;
}

.post-media-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 5px;
    background: rgba(0,0,0,0.85);
    border: 1px solid var(--color-red-dark);
    color: var(--color-red);
    padding: 3px 7px;
    letter-spacing: 1px;
    z-index: 3;
}

.post-video-thumb { width: 100%; height: 100%; }

.post-video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    z-index: 2;
}

.post-play-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 24px;
    color: var(--color-white);
    background: rgba(204,17,17,0.9);
    border: 4px solid var(--color-white);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 4px 4px 0 #000;
    transition: none;
}

.post-play-btn:hover {
    background: var(--color-red);
    transform: translate(-2px,-2px);
    box-shadow: 6px 6px 0 #000;
}

.post-duration {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 6px;
    color: var(--color-white);
    background: rgba(0,0,0,0.8);
    padding: 3px 7px;
    letter-spacing: 1px;
    border: 1px solid #330000;
    z-index: 2;
}

/* ── CSS ART: Football Field ── */
.mock-field {
    width: 100%;
    height: 100%;
    background: #001800;
    display: flex;
    align-items: stretch;
}

.mock-field-grass {
    flex: 1;
    background: #002200;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    border-top: 4px solid #003300;
    border-bottom: 4px solid #003300;
}

.mock-yl {
    width: 2px;
    background: rgba(255,255,255,0.14);
    animation: field-breathe 2.5s ease-in-out infinite;
}
.mock-yl:nth-child(2) { animation-delay: -0.8s; }
.mock-yl:nth-child(3) { animation-delay: -1.6s; }
.mock-yl:nth-child(4) { animation-delay: -2.4s; }

@keyframes field-breathe {
    0%, 100% { opacity: 0.14; }
    50%       { opacity: 0.5;  }
}

.mock-endzone {
    width: 64px;
    flex-shrink: 0;
    background: rgba(139,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: rgba(204,17,17,0.9);
    border: 2px solid var(--color-red-dark);
    writing-mode: vertical-rl;
    letter-spacing: 4px;
}

/* ── CSS ART: Training Scene ── */
.mock-training {
    width: 100%;
    height: 100%;
    background: #001500;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.mock-training-bg {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px, transparent 30px,
        rgba(0,40,0,0.6) 30px, rgba(0,40,0,0.6) 32px
    );
}

.mock-player {
    position: absolute;
    bottom: 30px;
    width: 8px;
    height: 20px;
    background: var(--color-red);
    border: 2px solid #880000;
}

.mock-player::before {
    content: '';
    position: absolute;
    top: -10px; left: -1px;
    width: 10px; height: 10px;
    background: #880000;
}

@keyframes player-bob {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-5px); }
}

.mock-player--1 { left: 30%; animation: player-bob 0.8s ease-in-out infinite 0s; }
.mock-player--2 { left: 50%; animation: player-bob 0.8s ease-in-out infinite 0.15s; }
.mock-player--3 { left: 70%; animation: player-bob 0.8s ease-in-out infinite 0.3s; }

.mock-training-label {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 6px;
    color: var(--color-red);
    letter-spacing: 2px;
    background: rgba(0,0,0,0.75);
    padding: 3px 8px;
    border: 1px solid var(--color-red-dark);
    white-space: nowrap;
    z-index: 2;
}

/* ── POST BODY ── */
.post-body {
    padding: 12px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── ACTIONS ── */
.post-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.post-action {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    color: #666;
    background: transparent;
    border: 2px solid #2a0028;
    padding: 7px 12px;
    cursor: pointer;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: none;
    box-shadow: 2px 2px 0 #000;
}

.post-action-icon { font-size: 10px; line-height: 1; }

.post-action:hover {
    color: var(--color-off-white);
    border-color: var(--color-red-dark);
    background: #100010;
    box-shadow: 1px 1px 0 #000;
    transform: translate(1px,1px);
}

.post-action--like:hover    { color: #ff4444; border-color: #660000; }
.post-action--liked         { color: #ff4444; border-color: #660000; background: #150000; }
.post-action--comment:hover { color: #4488ff; border-color: #002266; }
.post-action--share         { margin-left: auto; }
.post-action--share:hover   { color: #44cc44; border-color: #004400; }

/* ── CAPTION ── */
.post-caption {
    font-size: 7px;
    color: var(--color-off-white);
    line-height: 2.2;
    letter-spacing: 1px;
}

.post-caption-user {
    color: var(--color-white);
    margin-right: 8px;
    letter-spacing: 2px;
}

/* ── TEXT-ONLY BLOCK ── */
.post-text-block {
    background: #0f0010;
    border: 3px solid #2a0028;
    border-left: 5px solid var(--color-red);
    padding: 20px;
    box-shadow: 4px 4px 0 #000;
    position: relative;
}

.post-text-content {
    font-size: 8px;
    color: var(--color-off-white);
    line-height: 2.6;
    letter-spacing: 1px;
}

.ptb-decoration {
    position: absolute;
    bottom: 10px;
    right: 12px;
    font-size: 8px;
    color: var(--color-red-dark);
    letter-spacing: 2px;
    animation: blink 1.8s step-end infinite;
}

/* ── TAGS ── */
.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.post-tag {
    font-size: 6px;
    color: var(--color-red);
    letter-spacing: 1px;
    cursor: pointer;
}

.post-tag:hover { color: var(--color-red-light); }

/* ── COMMENTS ── */
.post-comments {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 2px solid #1a0018;
    padding-top: 10px;
}

.post-comment {
    font-size: 6px;
    line-height: 2;
    letter-spacing: 1px;
}

.pc-user {
    color: var(--color-white);
    margin-right: 8px;
    letter-spacing: 2px;
}

.pc-text { color: var(--color-off-white); }

.post-view-all-comments {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    color: #444;
    background: transparent;
    border: 0;
    cursor: pointer;
    letter-spacing: 1px;
    padding: 0;
    text-align: left;
    transition: none;
}

.post-view-all-comments:hover { color: var(--color-red); }

/* ── COMMENT INPUT ── */
.post-comment-input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 2px solid #1a0018;
}

.pci-avatar {
    width: 28px;
    height: 28px;
    background: #1a0018;
    border: 2px solid #330033;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #444;
    flex-shrink: 0;
    font-family: 'Press Start 2P', monospace;
}

.pci-input {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    color: var(--color-white);
    background: #0a0008;
    border: 2px solid #2a0028;
    padding: 8px 10px;
    flex: 1;
    outline: none;
    letter-spacing: 1px;
}

.pci-input:focus { border-color: var(--color-red-dark); }
.pci-input::placeholder { color: #444; }

.pci-send {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--color-white);
    background: var(--color-red-dark);
    border: 2px solid var(--color-red);
    padding: 8px 12px;
    cursor: pointer;
    box-shadow: 2px 2px 0 #000;
    flex-shrink: 0;
    transition: none;
}

.pci-send:hover {
    background: var(--color-red);
    transform: translate(1px,1px);
    box-shadow: 1px 1px 0 #000;
}

/* ================================================
   RIGHT SIDEBAR
   ================================================ */

.time-right {
    background: #060003;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 72px;
    height: calc(100vh - 72px);
    overflow-y: auto;
}

.tr-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tr-heading {
    font-size: 6px;
    color: #444;
    letter-spacing: 2px;
    padding-bottom: 6px;
    border-bottom: 2px solid #1a0018;
}

/* Trend tags */
.tr-tags { display: flex; flex-direction: column; gap: 6px; }

.tr-tag-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #080005;
    border: 1px solid #1a0018;
    cursor: pointer;
    transition: none;
}

.tr-tag-item:hover {
    background: #100010;
    border-color: var(--color-red-dark);
}

.tr-tag-rank {
    font-size: 8px;
    color: var(--color-red-dark);
    letter-spacing: 1px;
    flex-shrink: 0;
    min-width: 20px;
}

.tr-tag-name {
    font-size: 7px;
    color: var(--color-red);
    letter-spacing: 1px;
    margin-bottom: 3px;
}

.tr-tag-count { font-size: 5px; color: #444; letter-spacing: 1px; }

/* Suggested accounts */
.tr-suggestions { display: flex; flex-direction: column; gap: 8px; }

.tr-suggest-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid #1a0018;
    background: #080005;
}

.tr-suggest-avatar {
    width: 32px;
    height: 32px;
    border: 2px solid var(--color-red-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--color-white);
    font-family: 'Press Start 2P', monospace;
    flex-shrink: 0;
}

.tr-suggest-avatar--1 { background: #220000; }
.tr-suggest-avatar--2 { background: #001a00; }
.tr-suggest-avatar--3 { background: #000022; }

.tr-suggest-info { flex: 1; min-width: 0; }

.tr-suggest-name {
    font-size: 6px;
    color: var(--color-white);
    letter-spacing: 1px;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tr-suggest-desc { font-size: 5px; color: #555; letter-spacing: 1px; }

.tr-follow-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 5px;
    color: var(--color-white);
    background: var(--color-red-dark);
    border: 2px solid var(--color-red);
    padding: 5px 8px;
    cursor: pointer;
    letter-spacing: 1px;
    flex-shrink: 0;
    transition: none;
    box-shadow: 2px 2px 0 #000;
}

.tr-follow-btn:hover {
    background: var(--color-red);
    transform: translate(1px,1px);
    box-shadow: 1px 1px 0 #000;
}

/* Top post */
.tr-top-post {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: #080005;
    border: 2px solid #1a0018;
    cursor: pointer;
}

.tr-top-post:hover {
    border-color: var(--color-red-dark);
    background: #0f000a;
}

.tr-top-post-media {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    background: #001800;
    border: 2px solid var(--color-red-dark);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.mfm-grass {
    width: 100%;
    height: 35%;
    background: #003300;
    border-top: 2px solid #004400;
}

.tr-top-post-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tr-top-post-user { font-size: 6px; color: var(--color-white); letter-spacing: 1px; }

.tr-top-post-caption {
    font-size: 5px;
    color: #666;
    letter-spacing: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tr-top-post-likes { font-size: 6px; color: #ff4444; letter-spacing: 1px; }

/* ================================================
   UPLOAD MODAL
   ================================================ */

.upload-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.upload-modal-box {
    background: #080000;
    border: 4px solid var(--color-red-dark);
    box-shadow: 10px 10px 0 #000, inset 0 0 0 2px #1a0000;
    padding: 24px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.upload-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 3px solid var(--color-red-dark);
}

.upload-modal-title {
    font-size: 9px;
    color: var(--color-white);
    letter-spacing: 2px;
}

.upload-modal-close {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #666;
    background: transparent;
    border: 2px solid #330000;
    padding: 6px 10px;
    cursor: pointer;
    transition: none;
}

.upload-modal-close:hover {
    color: var(--color-white);
    border-color: var(--color-red);
}

.upload-user-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.upload-user-avatar {
    width: 44px;
    height: 44px;
    background: #1a0018;
    border: 3px solid #330033;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #444;
    flex-shrink: 0;
    font-family: 'Press Start 2P', monospace;
}

.upload-user-name { font-size: 8px; color: var(--color-white); letter-spacing: 2px; }

.upload-privacy-select {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    color: var(--color-off-white);
    background: #0a0000;
    border: 2px solid var(--color-red-dark);
    padding: 5px 8px;
    cursor: pointer;
    outline: none;
    letter-spacing: 1px;
    margin-top: 6px;
}

.upload-caption {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--color-white);
    background: #0a0008;
    border: 2px solid #2a0028;
    padding: 12px;
    width: 100%;
    min-height: 80px;
    resize: vertical;
    outline: none;
    letter-spacing: 1px;
    line-height: 2.2;
    box-sizing: border-box;
}

.upload-caption:focus { border-color: var(--color-red-dark); }
.upload-caption::placeholder { color: #444; }

.upload-drop-area {
    border: 3px dashed #330033;
    background: #040004;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: none;
}

.upload-drop-area:hover,
.upload-drop-area.drag-over {
    border-color: var(--color-red);
    background: #0a0008;
}

.upload-drop-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    pointer-events: none;
    text-align: center;
}

.upload-drop-icon { font-size: 32px; opacity: 0.7; }

.upload-drop-text {
    font-size: 7px;
    color: var(--color-red);
    letter-spacing: 2px;
}

.upload-drop-sub { font-size: 6px; color: #444; letter-spacing: 1px; }

.upload-tags-section { display: flex; flex-direction: column; gap: 8px; }

.upload-tags-label { font-size: 6px; color: #555; letter-spacing: 2px; }

.upload-tag-input-row { display: flex; gap: 6px; }

.upload-tag-input {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--color-white);
    background: #0a0000;
    border: 2px solid #2a0000;
    padding: 8px 10px;
    flex: 1;
    outline: none;
    letter-spacing: 1px;
}

.upload-tag-input:focus { border-color: var(--color-red-dark); }
.upload-tag-input::placeholder { color: #444; }

.upload-tag-add-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 14px;
    color: var(--color-white);
    background: var(--color-red-dark);
    border: 2px solid var(--color-red);
    padding: 8px 14px;
    cursor: pointer;
    box-shadow: 2px 2px 0 #000;
    flex-shrink: 0;
    transition: none;
}

.upload-tag-add-btn:hover {
    background: var(--color-red);
    transform: translate(1px,1px);
    box-shadow: 1px 1px 0 #000;
}

.upload-tags-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 10px;
}

.upload-tag-chip {
    font-size: 6px;
    color: var(--color-red);
    background: #1a0000;
    border: 1px solid var(--color-red-dark);
    padding: 4px 8px;
    letter-spacing: 1px;
    cursor: pointer;
}

.upload-tag-chip:hover { border-color: var(--color-red); color: var(--color-red-light); }

.upload-submit-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: var(--color-white);
    background: var(--color-red);
    border: 4px solid var(--color-white);
    padding: 16px;
    cursor: pointer;
    box-shadow: 5px 5px 0 var(--color-red-dark);
    letter-spacing: 2px;
    width: 100%;
    transition: none;
    text-align: center;
}

.upload-submit-btn:hover {
    background: var(--color-red-light);
    transform: translate(-2px,-2px);
    box-shadow: 7px 7px 0 var(--color-red-dark);
}

/* ================================================
   AUTH MODAL
   ================================================ */

.auth-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.auth-modal-box {
    background: #080000;
    border: 4px solid var(--color-red-dark);
    box-shadow: 10px 10px 0 #000, inset 0 0 0 2px #1a0000;
    padding: 24px;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 3px solid var(--color-red-dark);
}

.auth-modal-title {
    font-size: 10px;
    color: var(--color-white);
    letter-spacing: 3px;
}

.auth-modal-close {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: #666;
    background: transparent;
    border: 2px solid #330000;
    padding: 6px 10px;
    cursor: pointer;
    transition: none;
}

.auth-modal-close:hover {
    color: var(--color-white);
    border-color: var(--color-red);
}

.am-tabs {
    display: flex;
    gap: 0;
    border-bottom: 3px solid #2a0000;
}

.am-tab {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: #555;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    padding: 10px 16px;
    cursor: pointer;
    letter-spacing: 1px;
    margin-bottom: -3px;
    transition: none;
}

.am-tab:hover { color: #aaa; }

.am-tab--active {
    color: var(--color-white);
    border-bottom-color: var(--color-red);
}

.am-form { display: none; flex-direction: column; gap: 12px; }
.am-form--active { display: flex; }

.am-field { display: flex; flex-direction: column; gap: 6px; }

.am-label {
    font-size: 6px;
    color: #555;
    letter-spacing: 2px;
}

.am-input {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--color-white);
    background: #0a0000;
    border: 2px solid #2a0000;
    padding: 10px 12px;
    outline: none;
    letter-spacing: 1px;
    width: 100%;
    box-sizing: border-box;
}

.am-input:focus { border-color: var(--color-red-dark); }
.am-input::placeholder { color: #444; }

.am-role-btns {
    display: flex;
    gap: 6px;
}

.am-role-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    color: #666;
    background: #0a0000;
    border: 2px solid #2a0000;
    padding: 8px 10px;
    cursor: pointer;
    letter-spacing: 1px;
    flex: 1;
    text-align: center;
    transition: none;
}

.am-role-btn:hover { color: #aaa; border-color: var(--color-red-dark); }

.am-role-btn--active {
    color: var(--color-white);
    background: #1a0000;
    border-color: var(--color-red);
    box-shadow: 2px 2px 0 #000;
}

.am-error {
    font-size: 6px;
    color: #ff4444;
    letter-spacing: 1px;
    line-height: 2;
    min-height: 14px;
}

.am-submit-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--color-white);
    background: var(--color-red);
    border: 4px solid var(--color-white);
    padding: 14px;
    cursor: pointer;
    box-shadow: 5px 5px 0 var(--color-red-dark);
    letter-spacing: 2px;
    width: 100%;
    transition: none;
    text-align: center;
    margin-top: 4px;
}

.am-submit-btn:hover {
    background: var(--color-red-light);
    transform: translate(-2px,-2px);
    box-shadow: 7px 7px 0 var(--color-red-dark);
}

.am-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: 5px 5px 0 var(--color-red-dark);
}

.am-switch {
    font-size: 6px;
    color: #444;
    letter-spacing: 1px;
    text-align: center;
}

.am-switch-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    color: var(--color-red);
    background: transparent;
    border: 0;
    cursor: pointer;
    letter-spacing: 1px;
    padding: 0;
    transition: none;
}

.am-switch-btn:hover { color: var(--color-red-light); }

/* ── Nav auth button ── */
.nav-auth-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--color-white);
    background: var(--color-red-dark);
    border: 2px solid var(--color-red);
    padding: 8px 12px;
    cursor: pointer;
    letter-spacing: 1px;
    box-shadow: 2px 2px 0 #000;
    transition: none;
    white-space: nowrap;
}

.nav-auth-btn:hover {
    background: var(--color-red);
    box-shadow: 1px 1px 0 #000;
    transform: translate(1px,1px);
}

/* ================================================
   TOAST
   ================================================ */

.time-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1a0018;
    border: 3px solid var(--color-red-dark);
    color: var(--color-white);
    font-size: 7px;
    letter-spacing: 1px;
    padding: 12px 24px;
    box-shadow: 5px 5px 0 #000;
    z-index: 20000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s, transform 0.15s;
    white-space: nowrap;
    max-width: 90vw;
    text-align: center;
}

.time-toast--show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.time-toast--success { border-color: #006600; background: #001a00; }
.time-toast--error   { border-color: var(--color-red); background: #1a0000; }
.time-toast--info    { border-color: #333; background: #0a0010; }

/* ================================================
   REAL MEDIA (uploaded photos / videos)
   ================================================ */

.post-real-media {
    display: block;
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    background: #000;
}

video.post-real-media {
    max-height: 480px;
    object-fit: contain;
    background: #000;
}

/* ================================================
   POST EXTRAS
   ================================================ */

.post-avatar--gold { background: #2a1a00; border-color: #cc9900; }

.post-delete-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: #555;
    background: transparent;
    border: 2px solid #2a0000;
    padding: 6px 10px;
    cursor: pointer;
    flex-shrink: 0;
    transition: none;
    margin-left: auto;
}

.post-delete-btn:hover {
    color: #ff4444;
    border-color: var(--color-red);
    background: #150000;
}

/* ================================================
   FEED EMPTY STATE
   ================================================ */

.feed-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 64px 20px;
    text-align: center;
}

.feed-empty-icon { font-size: 48px; opacity: 0.5; }

.feed-empty-text {
    font-size: 8px;
    color: var(--color-off-white);
    letter-spacing: 2px;
}

.feed-empty-sub {
    font-size: 6px;
    color: #444;
    letter-spacing: 1px;
}

/* ================================================
   COMMENTS
   ================================================ */

.comments-loading {
    font-size: 6px;
    color: #555;
    letter-spacing: 1px;
    padding: 8px 0;
}

/* ================================================
   UPLOAD PREVIEW
   ================================================ */

.upload-preview-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #040004;
    border: 3px solid #330033;
    padding: 10px;
}

.upload-preview-img,
.upload-preview-vid {
    display: block;
    width: 100%;
    max-height: 240px;
    object-fit: contain;
    background: #000;
}

.upload-remove-file {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    color: #ff4444;
    background: transparent;
    border: 2px solid #660000;
    padding: 7px 12px;
    cursor: pointer;
    letter-spacing: 1px;
    align-self: flex-start;
    transition: none;
}

.upload-remove-file:hover {
    background: #150000;
    border-color: var(--color-red);
}

/* ================================================
   UPLOAD PROGRESS
   ================================================ */

.upload-progress-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.upload-progress-track {
    height: 16px;
    background: #0a0000;
    border: 2px solid #2a0000;
    overflow: hidden;
    position: relative;
}

.upload-progress-bar {
    height: 100%;
    background: var(--color-red);
    width: 0%;
    transition: width 0.2s linear;
}

.upload-progress-label {
    font-size: 6px;
    color: var(--color-red);
    letter-spacing: 2px;
    text-align: right;
}

/* ================================================
   TEAM FILTER ACTIVE
   ================================================ */

.tl-team-btn--active {
    color: var(--color-white);
    background: #1a0018;
    border-left-color: var(--color-red);
}

/* ================================================
   TAG CHIP X BUTTON
   ================================================ */

.chip-x {
    margin-left: 6px;
    color: #ff4444;
    cursor: pointer;
    font-size: 8px;
    line-height: 1;
}

.chip-x:hover { color: var(--color-red-light); }

/* ================================================
   MOBILE RESPONSIVE
   ================================================ */

@media (max-width: 1024px) {
    .time-app { grid-template-columns: 200px 1fr; }
    .time-right { display: none; }
}

@media (max-width: 680px) {
    .time-app { grid-template-columns: 1fr; }
    .time-left { display: none; }
    .time-center { border-right: none; }

    .post-media { height: 220px; }

    .story-frame,
    .story-add-frame { width: 48px; height: 48px; }

    .story-avatar-mock { font-size: 18px; }
    .story-label { font-size: 4px; }

    .cpb-actions { gap: 4px; }
    .cpb-action-btn { font-size: 5px; padding: 6px 8px; gap: 4px; }

    .post-body { padding: 10px 14px 14px; }
    .post-header { padding: 12px 14px 8px; }
}

/* ══════════════════════════════════════
   PROFILE MODAL
══════════════════════════════════════ */
.pm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.85);
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pm-box {
    background: #0a0005;
    border: 2px solid #cc1111;
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 0 40px #cc111133;
}

.pm-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: #666;
    font-size: 16px;
    cursor: pointer;
    z-index: 2;
    padding: 4px 8px;
    font-family: inherit;
    transition: color .2s;
}
.pm-close:hover { color: #cc1111; }

.pm-header {
    display: flex;
    gap: 24px;
    padding: 28px 28px 20px;
    align-items: flex-start;
}

.pm-avatar-wrap { flex-shrink: 0; }

.pm-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #1a0018;
    border: 3px solid #cc1111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #cc1111;
    overflow: hidden;
    font-family: 'Press Start 2P', monospace;
}

.pm-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pm-info { flex: 1; min-width: 0; }

.pm-username {
    font-size: 18px;
    color: #fff;
    letter-spacing: 3px;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pm-role-badge {
    display: inline-block;
    font-size: 9px;
    letter-spacing: 2px;
    padding: 3px 8px;
    margin-bottom: 10px;
}
.pm-role--red  { background: #cc1111; color: #fff; }
.pm-role--gold { background: #cc8800; color: #000; }
.pm-role--green { background: #1a6b1a; color: #fff; }

.pm-bio {
    font-size: 9px;
    color: #888;
    letter-spacing: 1px;
    line-height: 1.8;
    margin-bottom: 16px;
    min-height: 16px;
    word-break: break-word;
}

.pm-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.pm-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.pm-stat-num {
    font-size: 14px;
    color: #fff;
    letter-spacing: 1px;
}

.pm-stat-label {
    font-size: 7px;
    color: #555;
    letter-spacing: 1px;
}

.pm-stat-sep {
    width: 1px;
    height: 28px;
    background: #2a0028;
}

.pm-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.pm-follow-btn {
    background: #cc1111;
    border: none;
    color: #fff;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background .2s;
    box-shadow: 3px 3px 0 #550000;
}
.pm-follow-btn:hover { background: #ff2222; }
.pm-follow-btn--following {
    background: #1a0018;
    border: 2px solid #cc1111;
    color: #cc1111;
    box-shadow: none;
}
.pm-follow-btn--following:hover { background: #2a0028; }

.pm-edit-btn {
    background: #1a0018;
    border: 2px solid #cc1111;
    color: #cc1111;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background .2s;
}
.pm-edit-btn:hover { background: #2a0028; }

.pm-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, #cc1111, transparent);
    margin: 0 28px 0;
}

.pm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    padding: 16px 0;
}

.pm-grid-item {
    aspect-ratio: 1;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: #0f0008;
}

.pm-grid-item:hover .pm-grid-overlay { opacity: 1; }

.pm-grid-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pm-grid-item--text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: #110008;
    border: 1px solid #1a0018;
}

.pm-grid-text {
    font-size: 7px;
    color: #aaa;
    letter-spacing: 1px;
    line-height: 1.6;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

.pm-grid-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 9px;
    color: #fff;
    letter-spacing: 1px;
    opacity: 0;
    transition: opacity .2s;
}

.pm-loading, .pm-no-posts {
    grid-column: 1/-1;
    text-align: center;
    padding: 40px;
    font-size: 9px;
    color: #444;
    letter-spacing: 2px;
}

/* Clickable username in feed */
.post-username--link {
    cursor: pointer;
    transition: color .2s;
}
.post-username--link:hover { color: #cc1111; }

/* ══════════════════════════════════════
   EDIT PROFILE MODAL
══════════════════════════════════════ */
.epm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.85);
    z-index: 1600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.epm-box {
    background: #0a0005;
    border: 2px solid #cc1111;
    width: 100%;
    max-width: 420px;
    padding: 24px;
    box-shadow: 0 0 40px #cc111133;
}

.epm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.epm-title {
    font-size: 12px;
    color: #cc1111;
    letter-spacing: 2px;
}

.epm-close {
    background: none;
    border: none;
    color: #666;
    font-size: 16px;
    cursor: pointer;
    font-family: inherit;
    transition: color .2s;
}
.epm-close:hover { color: #cc1111; }

.epm-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.epm-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #1a0018;
    border: 3px solid #cc1111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #cc1111;
    overflow: hidden;
    font-family: 'Press Start 2P', monospace;
}

.epm-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.epm-avatar-btn {
    background: #1a0018;
    border: 1px solid #cc1111;
    color: #cc1111;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    letter-spacing: 1px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background .2s;
}
.epm-avatar-btn:hover { background: #2a0028; }

.epm-avatar-hint {
    font-size: 7px;
    color: #444;
    letter-spacing: 1px;
}

.epm-field {
    margin-bottom: 16px;
    position: relative;
}

.epm-label {
    display: block;
    font-size: 9px;
    color: #555;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.epm-bio-input {
    width: 100%;
    background: #0f0008;
    border: 2px solid #2a0028;
    color: #fff;
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    padding: 12px;
    letter-spacing: 1px;
    line-height: 1.7;
    resize: vertical;
    min-height: 80px;
    outline: none;
    transition: border-color .2s;
}
.epm-bio-input:focus { border-color: #cc1111; }

.epm-bio-count {
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 7px;
    color: #444;
    letter-spacing: 1px;
}

.epm-error {
    font-size: 9px;
    color: #cc1111;
    letter-spacing: 1px;
    min-height: 14px;
    margin-bottom: 12px;
}

.epm-save-btn {
    width: 100%;
    background: #cc1111;
    border: none;
    color: #fff;
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    padding: 14px;
    cursor: pointer;
    box-shadow: 4px 4px 0 #550000;
    transition: background .2s;
}
.epm-save-btn:hover { background: #ff2222; }
.epm-save-btn:disabled { background: #440000; cursor: not-allowed; }

@media (max-width: 680px) {
    .pm-header { flex-direction: column; align-items: center; text-align: center; padding: 20px 16px; }
    .pm-stats { justify-content: center; }
    .pm-actions { justify-content: center; }
    .pm-avatar { width: 80px; height: 80px; font-size: 28px; }
    .pm-box { max-height: 95vh; }
}