:root {
    --glass-bg: rgba(20, 20, 20, 0.6);
    --glass-bg-hover: rgba(40, 40, 40, 0.8);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-blur: 16px;
    --accent-color: #ff4081;
    --accent-glow: rgba(255, 64, 129, 0.4);
    --text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.explore-container {
    min-height: 100vh;
    background: #0a0a0a;
    padding-bottom: 100px;
}

.explore-container.hidden {
    display: none;
}

.explore-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(180deg, #0a0a0a 0%, rgba(10,10,10,0.95) 100%);
    padding: 16px 20px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.explore-header h1 {
    margin: 0 0 12px;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}

.explore-search {
    margin-bottom: 12px;
}

.search-form {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 12px;
    color: rgba(255,255,255,0.5);
    font-size: 20px;
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 12px 40px 12px 44px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 16px;
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
    outline: none;
    transition: all 0.2s;
}

.search-input::placeholder {
    color: rgba(255,255,255,0.4);
}

.search-input:focus {
    background: rgba(255,255,255,0.15);
    border-color: var(--accent-color);
}

.search-clear {
    position: absolute;
    right: 12px;
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    text-decoration: none;
}

.search-clear:hover {
    color: #fff;
}

.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #1a1a1a;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    overflow: hidden;
    display: none;
    z-index: 100;
    box-shadow: 0 5px 10px rgba(0,0,0,0.4);
    padding: 8px 0;
}

.search-dropdown.active {
    display: block;
}

.search-suggestion {
    padding: 6px 20px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-size: 16px;
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
    line-height: 24px;
    color: #fff;
}

.search-suggestion:hover,
.search-suggestion.active {
    background: linear-gradient(90deg, rgb(241, 125, 52) 0%, #d34675 100%);
    color: #fff;
}

.search-suggestion:hover .suggestion-text,
.search-suggestion.active .suggestion-text,
.search-suggestion:hover .suggestion-highlight,
.search-suggestion.active .suggestion-highlight {
    color: #fff;
}

.suggestion-text {
    color: rgba(255,255,255,0.6);
}

.suggestion-highlight {
    color: var(--accent-color);
    font-weight: 600;
}

.explore-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.explore-tabs::-webkit-scrollbar {
    display: none;
}

.explore-tab {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    padding: 10px 20px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s ease;
}

.explore-tab:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    color: #fff;
    transform: translateY(-1px);
}

.explore-tab.active {
    background: linear-gradient(135deg, #ff4081, #ff6b6b);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 15px rgba(255, 64, 129, 0.3);
}

.explore-grid {
    column-count: 2;
    column-gap: 12px;
    padding: 12px;
}

@media (min-width: 640px) {
    .explore-grid {
        column-count: 3;
        column-gap: 16px;
        padding: 16px;
    }
}

@media (min-width: 768px) {
    .explore-grid {
        column-count: 4;
        column-gap: 20px;
        padding: 24px;
        max-width: 1400px;
        margin: 0 auto;
    }
}

@media (min-width: 1200px) {
    .explore-grid {
        column-count: 5;
    }
}

@media (min-width: 1600px) {
    .explore-grid {
        column-count: 6;
        max-width: 1800px;
    }
}

.grid-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: #1a1a1a;
    break-inside: avoid;
    margin-bottom: 12px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.grid-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

@media (min-width: 640px) {
    .grid-item {
        margin-bottom: 16px;
    }
}

@media (min-width: 768px) {
    .grid-item {
        margin-bottom: 20px;
        border-radius: 20px;
    }
}

.grid-media {
    display: block;
}

.grid-thumb {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
}

@media (min-width: 768px) {
    .grid-thumb {
        border-radius: 20px;
    }
}

.grid-text-only {
    background: linear-gradient(135deg, #2a2a3e 0%, #1a1a2e 100%);
}
.grid-text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    min-height: 180px;
    text-align: center;
}
.grid-text-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 12px;
    border: 2px solid rgba(255,255,255,0.2);
}
.grid-text-body {
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    word-break: break-word;
}

.grid-item.selected {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
}

.grid-item.liked::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,64,129,0.2);
    pointer-events: none;
}

.grid-hover {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 16px 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    opacity: 0;
    transition: opacity 0.25s ease;
    border-radius: 0 0 16px 16px;
}

@media (min-width: 768px) {
    .grid-hover {
        border-radius: 0 0 20px 20px;
    }
}

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

.grid-item:focus-visible .grid-hover {
    opacity: 1;
}

.grid-share-btn {
    position: absolute;
    z-index: 7;
    top: 10px;
    right: 10px;
    display: inline-grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    background: rgba(29, 20, 25, 0.76);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity 160ms ease, background 160ms ease;
    backdrop-filter: blur(8px);
}

.grid-item:hover .grid-share-btn,
.grid-item:focus-within .grid-share-btn,
.grid-share-btn:focus-visible {
    opacity: 1;
}

.grid-share-btn:hover {
    background: #d34675;
}

.grid-share-btn i {
    font-size: 19px;
}

.grid-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.grid-stat i {
    font-size: 18px;
}

.grid-video-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.grid-video-icon i {
    font-size: 20px;
}

.grid-character {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.grid-character:hover {
    border-color: rgba(99, 102, 241, 0.4);
}

.character-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 48px 14px 14px;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 50%, transparent 100%);
    border-radius: 0 0 16px 16px;
}

@media (min-width: 768px) {
    .character-overlay {
        border-radius: 0 0 20px 20px;
        padding: 56px 16px 16px;
    }
}

@media (max-width: 767px) {
    .grid-share-btn {
        opacity: 1;
    }
}

.character-name {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.character-tagline {
    display: block;
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.chat-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.grid-character:hover .chat-badge {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.5);
}

.chat-badge i {
    font-size: 16px;
    color: #fff;
}

.gallery-ad-slot {
    column-span: all;
    width: 100%;
    text-align: center;
    padding: 4px 0;
}

.gallery-ad-slot:empty,
.gallery-ad-slot:has(ins[data-ad-status="unfilled"]) {
    display: none;
}

.grid-sentinel {
    height: 1px;
    width: 100%;
    column-span: all;
}

.explore-empty {
    column-span: all;
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

.explore-empty i {
    font-size: 64px;
    opacity: 0.5;
    margin-bottom: 16px;
}

.explore-empty p {
    font-size: 16px;
}

.feed-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-color), #ff80ab, var(--accent-color));
    background-size: 200% 100%;
    z-index: 9999;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    box-shadow: 0 0 10px var(--accent-glow);
}

.feed-progress-bar.loading {
    animation: progressPulse 2s ease-in-out infinite, progressShimmer 1.5s linear infinite;
}

.feed-progress-bar.complete {
    width: 100%;
    opacity: 0;
    transition: width 0.2s, opacity 0.4s 0.2s;
}

@keyframes progressPulse {
    0% { width: 5%; }
    50% { width: 75%; }
    100% { width: 95%; }
}

@keyframes progressShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.feed-loading-dot {
    position: fixed;
    top: 12px;
    right: 12px;
    width: 6px;
    height: 6px;
    background: var(--accent-color);
    border-radius: 50%;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 8px var(--accent-glow);
}

.feed-loading-dot.active {
    opacity: 1;
    animation: dotPulse 1.2s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 8px var(--accent-glow); }
    50% { transform: scale(1.5); box-shadow: 0 0 16px var(--accent-glow); }
}

.feed-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: #000;
    overflow: hidden;
    z-index: 100;
    display: none;
}

.feed-container.active {
    display: block;
}

.feed-back-btn {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 110;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.feed-back-btn:hover {
    background: var(--glass-bg-hover);
    transform: scale(1.1);
}

.feed-back-btn i {
    font-size: 24px;
}

.feed-nav {
    position: fixed;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 110;
}

.feed-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.feed-nav-btn:hover {
    background: var(--glass-bg-hover);
    transform: scale(1.05);
}

.feed-nav-btn:disabled {
    opacity: 0.4;
    cursor: default;
    transform: none;
}

.feed-nav-btn i {
    font-size: 24px;
}

@media (max-width: 767px) {
    .feed-nav {
        display: none;
    }
}

@media (max-width: 767px) {
    .feed-container.active {
        display: block;
    }
    .feed-back-btn {
        /* The fixed site header occupies the first 48px on phones. */
        top: 60px;
    }
    .feed-container.active + .explore-container,
    .explore-container.hidden {
        display: none !important;
    }
    .explore-container.mobile-hidden {
        display: none !important;
    }
    .feed-container.mobile-active {
        display: block;
    }
}

.feed-scroll {
    height: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.feed-scroll::-webkit-scrollbar {
    display: none;
}

.feed-item {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
}

.feed-media {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.feed-video,
.feed-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.feed-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.feed-video {
    width: 100%;
    height: 100%;
}

.feed-item:hover .feed-video,
.feed-item:hover .feed-image {
    transform: scale(1.01);
}

.video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 72px;
    height: 72px;
    padding: 0;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    visibility: hidden;
}

.video-play-overlay i {
    font-size: 40px;
    color: #fff;
    margin-left: 4px;
}

.feed-item.paused .video-play-overlay {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
    visibility: visible;
}

.feed-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    padding-bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    pointer-events: none;
}

.feed-overlay > * {
    pointer-events: auto;
}

.feed-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.feed-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    cursor: pointer;
    color: #fff;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.feed-action:hover {
    background: var(--glass-bg-hover);
    transform: scale(1.15);
    border-color: rgba(255, 255, 255, 0.2);
}

.feed-action:active {
    transform: scale(0.95);
}

.feed-action i {
    font-size: 22px;
    text-shadow: var(--text-shadow);
}

.feed-action span {
    position: absolute;
    bottom: -20px;
    font-size: 12px;
    font-weight: 700;
    text-shadow: var(--text-shadow);
    white-space: nowrap;
    letter-spacing: -0.02em;
}

.feed-action.liked {
    background: rgba(255, 64, 129, 0.25);
    border-color: var(--accent-color);
}

.feed-action.liked i {
    color: var(--accent-color);
    filter: drop-shadow(0 0 8px var(--accent-glow));
}

.feed-action.liked {
    animation: heartPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes heartPop {
    0% { transform: scale(1); }
    30% { transform: scale(1.35); }
    60% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

.feed-info {
    flex: 1;
    max-width: calc(100% - 70px);
    padding-right: 16px;
}

.feed-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    min-width: 0;
}

.author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.9);
    object-fit: cover;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.author-name {
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    text-shadow: var(--text-shadow);
    letter-spacing: -0.01em;
}

.feed-author .author-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feed-author .author-avatar,
.feed-author .follow-btn {
    flex: 0 0 auto;
}

.follow-btn {
    background: transparent;
    border: 1.5px solid #fff;
    color: #fff;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 8px;
}

.follow-btn:hover {
    background: #fff;
    color: #000;
}

.follow-btn.following {
    background: rgba(255,255,255,0.15);
    border-color: transparent;
}

.double-tap-heart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 120px;
    color: var(--accent-color);
    pointer-events: none;
    opacity: 0;
    filter: drop-shadow(0 0 20px var(--accent-glow));
    z-index: 10;
}

.double-tap-heart.animate {
    animation: doubleTapHeart 0.8s ease-out forwards;
}

@keyframes doubleTapHeart {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    15% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    30% { transform: translate(-50%, -50%) scale(0.95); opacity: 1; }
    45% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.feed-caption {
    color: rgba(255, 255, 255, 0.95);
    font-size: 15px;
    line-height: 1.5;
    text-shadow: var(--text-shadow);
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 400;
}

.feed-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.feed-tag {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

.feed-tag:hover {
    background: var(--glass-bg-hover);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.feed-empty {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #555;
    gap: 12px;
}

.feed-empty i {
    font-size: 72px;
    opacity: 0.5;
}

.feed-empty p {
    font-size: 16px;
    font-weight: 500;
}

.fab-create {
    position: fixed;
    bottom: max(90px, calc(env(safe-area-inset-bottom) + 90px));
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color) 0%, #f50057 100%);
    border: none;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 20px var(--accent-glow), 0 2px 8px rgba(0,0,0,0.3);
    z-index: 101;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fab-create:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px var(--accent-glow), 0 4px 12px rgba(0,0,0,0.4);
}

.fab-create:active {
    transform: scale(0.95);
}

.fab-create i {
    font-size: 28px;
    transition: transform 0.25s;
}

.feed-dialog,
dialog.mdl-dialog {
    border: none;
    border-radius: 20px;
    max-width: 420px !important;
    width: 92% !important;
    background: linear-gradient(180deg, #1e1e1e 0%, #141414 100%);
    color: #fff;
    padding: 0;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    height: auto !important;
    max-height: 85vh;
    overflow-y: auto;
}

dialog.mdl-dialog.mdl-dialog--phone-fullscreen {
    max-width: 500px !important;
    width: 95% !important;
    height: fit-content !important;
    min-height: auto !important;
    max-height: 85vh !important;
}

dialog#create-post-dialog,
dialog#share-dialog,
dialog#comments-dialog {
    height: fit-content !important;
}

.feed-dialog::backdrop,
dialog.mdl-dialog::backdrop {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

dialog.mdl-dialog .mdl-dialog__title {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    padding: 20px 24px 12px;
    margin: 0;
}

dialog.mdl-dialog .mdl-dialog__content {
    padding: 0 24px 20px;
    color: rgba(255,255,255,0.9);
}

dialog.mdl-dialog .mdl-dialog__actions {
    display: flex;
    justify-content: flex-end;
    padding: 12px 16px;
}

dialog.mdl-dialog .mdl-dialog__actions .mdl-button.close {
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    min-width: 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

dialog.mdl-dialog .mdl-dialog__actions .mdl-button.close:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

dialog.mdl-dialog .mdl-dialog__actions .mdl-button.close i {
    font-size: 20px;
}

.close-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    font-family: Arial, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
}

dialog.mdl-dialog .mdl-textfield__input {
    color: #fff;
    border-bottom-color: rgba(255,255,255,0.3);
}

dialog.mdl-dialog .mdl-textfield__label {
    color: rgba(255,255,255,0.5);
}

dialog.mdl-dialog .mdl-button--raised {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

dialog.mdl-dialog .mdl-button--colored {
    background: linear-gradient(135deg, #ff6b6b, #ff8e53);
}

dialog.mdl-dialog .mdl-button--accent {
    background: linear-gradient(135deg, #ff4081, #ff6b6b);
}

dialog.mdl-dialog .resolutions-ai {
    background: rgba(30, 30, 30, 0.95);
}

dialog.mdl-dialog .resolutions-ai .chip-p {
    color: rgba(255, 255, 255, 0.9);
}

dialog.mdl-dialog .resolutions-ai .right-dd {
    color: rgba(255, 255, 255, 0.6);
}

dialog.mdl-dialog .resolutions-ai .resolution-header {
    color: #fff;
}

dialog#create-pic-dialog {
    max-width: 95vw !important;
    width: 95vw !important;
}

dialog#create-pic-dialog #remote {
    background: rgba(30, 30, 30, 0.95) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

dialog#create-pic-dialog .tt-input.tt-hint {
    background: rgba(255,255,255,0.05) !important;
    color: rgba(255,255,255,0.3) !important;
}

dialog#create-pic-dialog .tt-input.createaiimageprompt {
    color: #fff !important;
    background-color: transparent !important;
}

dialog#create-pic-dialog .tt-menu {
    background: #1e1e1e !important;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

dialog#create-pic-dialog .tt-suggestion {
    color: rgba(255,255,255,0.9);
    padding: 8px 12px;
}

dialog#create-pic-dialog .tt-suggestion:hover,
dialog#create-pic-dialog .tt-suggestion.tt-cursor {
    background: rgba(255,255,255,0.1);
}

dialog#create-pic-dialog .typed-already {
    color: #fff;
}

dialog#create-pic-dialog .typing-suggestion {
    color: rgba(255,255,255,0.5);
}

dialog#create-pic-dialog .typing-type {
    color: rgba(255,255,255,0.4);
}

dialog#create-pic-dialog h4,
dialog#create-pic-dialog h5 {
    color: #fff;
}

dialog#create-pic-dialog hr {
    border-color: rgba(255,255,255,0.15);
}

dialog#create-pic-dialog .mdl-chip__text {
    color: rgba(255,255,255,0.9);
}

dialog#create-pic-dialog .elf-style-chip {
    background: rgba(255,255,255,0.08) !important;
}

dialog#create-pic-dialog .elf-style-chip:hover {
    background: rgba(255,255,255,0.15) !important;
}

dialog#create-pic-dialog .example-ai-cats {
    background: transparent;
}

dialog#create-pic-dialog .resolution-radio-elem {
    border-color: rgba(255,255,255,0.15);
}

dialog#create-pic-dialog .mdl-radio__label,
dialog#create-pic-dialog .ar-ar {
    color: rgba(255,255,255,0.9);
}

dialog#create-pic-dialog .created-images-list,
dialog#create-pic-dialog .autocomplete-users-list {
    background: transparent;
}

dialog#create-pic-dialog .ai-char-item {
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
}

dialog.mdl-dialog--phone-fullscreen {
    max-width: 500px;
}

@media (max-width: 600px) {
    dialog.mdl-dialog--phone-fullscreen {
        width: 100%;
        max-width: 100%;
        max-height: 90vh;
        border-radius: 16px 16px 0 0;
        margin: auto 0 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }
}

.post-text-editor {
    min-height: 120px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    outline: none;
    font-size: 16px;
    line-height: 1.5;
    background: rgba(255,255,255,0.05);
    color: #fff;
    margin-bottom: 16px;
    text-align: left;
}

.post-text-editor:focus {
    border-color: var(--accent-color);
    background: rgba(255,255,255,0.08);
}

.post-text-editor:empty::before {
    content: attr(data-placeholder);
    color: rgba(255,255,255,0.4);
}

.upload-preview-area {
    margin-bottom: 16px;
    min-height: 60px;
    border: 2px dashed rgba(255,255,255,0.2);
    border-radius: 12px;
    display: none;
    padding: 12px;
    text-align: center;
    background: rgba(255,255,255,0.03);
}

.upload-preview-area.has-content,
.upload-preview-area.has-quote {
    display: block;
}

.composer-toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.composer-toolbar .mdl-button i {
    vertical-align: middle;
    margin-right: 4px;
}

.composer-toolbar .composer-video-editor {
    border: 1px solid rgba(96, 165, 250, 0.35);
    background: rgba(37, 99, 235, 0.16);
    color: #dbeafe;
}

.composer-toolbar .composer-video-editor:hover {
    background: rgba(37, 99, 235, 0.28);
}

.post-submit-btn {
    width: 100%;
}

.upload-progress-track {
    height: 3px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
    margin: 0 8px;
}
.upload-progress-fill {
    height: 100%;
    width: 0;
    background: var(--accent-color, #ff4081);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.upload-progress-fill.complete {
    background: #4caf50;
}

.share-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.share-option-btn {
    justify-content: flex-start;
    text-align: left;
    width: 100%;
}

.share-option-btn i {
    vertical-align: middle;
    margin-right: 12px;
}

.comments-list {
    max-height: 350px;
    overflow-y: auto;
    margin-bottom: 16px;
    min-height: 100px;
}

.no-comments {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    color: rgba(255,255,255,0.45);
    padding: 36px 20px;
    font-size: 14px;
}

.no-comments .material-icons {
    font-size: 34px;
    opacity: 0.5;
}

.no-comments small {
    font-size: 12px;
    color: rgba(255,255,255,0.3);
}

.dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.feed-dialog .mdl-dialog__title {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    padding: 0;
    margin: 0;
}

.dialog-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.dialog-close:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

.dialog-close i {
    font-size: 20px;
}

.dialog-close .close-x {
    font-size: 24px;
}

.feed-dialog .mdl-dialog__content {
    padding: 0 24px 16px;
}

.feed-dialog .mdl-dialog__actions {
    padding: 16px 24px 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.upload-area {
    border: 2px dashed rgba(255,255,255,0.15);
    border-radius: 16px;
    padding: 48px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 16px;
    background: rgba(255,255,255,0.02);
}

.upload-area:hover {
    border-color: var(--accent-color);
    background: rgba(255, 64, 129, 0.05);
}

.upload-area.dragover {
    border-color: var(--accent-color);
    background: rgba(255, 64, 129, 0.1);
    transform: scale(1.02);
}

.upload-placeholder i {
    font-size: 48px;
    color: #666;
    margin-bottom: 8px;
}

.upload-placeholder p {
    color: #888;
    font-size: 14px;
    margin: 0;
}

.upload-preview {
    display: none;
}

.upload-preview.has-media {
    display: block;
    margin-top: 16px;
}

.upload-preview img,
.upload-preview video {
    max-width: 100%;
    max-height: 200px;
    border-radius: 12px;
}

.comments-list {
    max-height: 320px;
    overflow-y: auto;
    margin-bottom: 16px;
}

.comment-item {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.comment-item:last-child {
    border-bottom: none;
}

.comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.comment-content {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.comment-author {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
    color: #fff;
}

.comment-text {
    font-size: 14px;
    color: rgba(255,255,255,0.82);
    line-height: 1.45;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.comment-text a {
    color: var(--accent-color);
    text-decoration: none;
}

.comment-text a:hover {
    text-decoration: underline;
}

.comment-text strong { font-weight: 700; color: #fff; }
.comment-text em { font-style: italic; }
.comment-text del { opacity: 0.6; }

.comment-text code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px;
    padding: 1px 5px;
}

.comment-time {
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    margin-left: 6px;
    font-weight: 400;
}

.comment-input-area {
    display: flex;
    gap: 6px;
    align-items: flex-end;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 22px;
    padding: 5px 6px 5px 8px;
    transition: border-color 0.2s, background 0.2s;
}

.comment-input-area:focus-within {
    border-color: var(--accent-color);
    background: rgba(255,255,255,0.08);
}

.comment-textarea {
    flex: 1;
    background: transparent;
    border: none;
    padding: 9px 4px;
    color: #fff;
    outline: none;
    font-size: 14px;
    font-family: inherit;
    resize: none;
    min-height: 22px;
    max-height: 120px;
    overflow-y: auto;
    line-height: 1.4;
}

.comment-textarea::placeholder {
    color: rgba(255,255,255,0.4);
}

.comment-emoji-btn {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background 0.2s;
}

.comment-emoji-btn:hover {
    color: var(--accent-color);
    background: rgba(255,255,255,0.08);
}

.comment-send-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color) 0%, #f50057 100%);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px var(--accent-glow);
    transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
}

.comment-send-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 14px var(--accent-glow);
}

.comment-send-btn:active {
    transform: scale(0.96);
}

.comment-emoji-btn .material-icons,
.comment-send-btn .material-icons {
    font-size: 20px;
}

.comment-item.comment-pending {
    opacity: 0.55;
}

.comment-reactions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    min-height: 24px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.reaction-chip:hover {
    background: rgba(255,255,255,0.12);
}

.reaction-chip.mine {
    border-color: var(--accent-color, #7c4dff);
    background: rgba(124,77,255,0.18);
}

.reaction-chip-img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 3px;
}

.reaction-count {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
}

.reaction-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 24px;
    border-radius: 12px;
    border: 1px dashed rgba(255,255,255,0.2);
    background: none;
    color: rgba(255,255,255,0.45);
    cursor: pointer;
}

.reaction-add:hover {
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.4);
}

.reaction-add .material-icons {
    font-size: 16px;
}

.custom-emoji-section {
    width: 100%;
    margin-bottom: 8px;
}

.custom-emoji-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    opacity: 0.85;
}

.custom-emoji-upload-btn {
    border: 1px solid rgba(128,128,128,0.4);
    background: none;
    color: inherit;
    border-radius: 12px;
    padding: 3px 10px;
    font-size: 12px;
    cursor: pointer;
}

.custom-emoji-upload-btn:hover {
    background: rgba(128,128,128,0.15);
}

.custom-emoji-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.custom-emoji-grid .emoji-btn.custom img,
#emoji-list .emoji-btn.custom img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    vertical-align: middle;
}

.custom-emoji-empty,
.custom-emoji-loading {
    font-size: 12px;
    opacity: 0.6;
}

.feed-item.keyboard-active {
    outline: 3px solid rgba(124, 77, 255, 0.9);
    outline-offset: -3px;
}

.feed-item:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -5px;
}

.feed-shortcuts-dialog {
    width: min(560px, calc(100vw - 32px));
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 16px;
    padding: 0;
    background: #17171c;
    color: #fff;
    box-shadow: 0 24px 80px rgba(0,0,0,0.55);
}

.feed-shortcuts-dialog::backdrop {
    background: rgba(0,0,0,0.7);
}

.feed-shortcuts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.feed-shortcuts-head h2 {
    margin: 0;
    font-size: 18px;
}

.feed-shortcuts-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
}

.feed-shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 20px;
    padding: 14px 18px 18px;
}

.feed-shortcuts-grid span {
    display: grid;
    grid-template-columns: 54px 1fr;
    align-items: center;
    min-height: 38px;
}

.feed-shortcuts-grid kbd {
    justify-self: start;
    min-width: 28px;
    padding: 3px 7px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    text-align: center;
}

.feed-shortcuts-grid b {
    font-size: 13px;
    font-weight: 500;
}

@media (max-width: 520px) {
    .feed-shortcuts-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) {
    .feed-media {
        max-width: 420px;
        margin: 0 auto;
        position: relative;
        height: 100%;
        border-radius: 16px;
        overflow: hidden;
    }

    .feed-overlay {
        max-width: 420px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 0 0 16px 16px;
    }

    .feed-actions {
        position: fixed;
        right: calc(50% - 260px);
        bottom: 120px;
    }
}

@media (max-width: 767px) {
    .feed-action {
        width: 46px;
        height: 46px;
    }

    .feed-action i {
        font-size: 20px;
    }

    .feed-overlay {
        padding: 20px 16px;
    }

    .author-avatar {
        width: 38px;
        height: 38px;
    }

    .feed-caption {
        font-size: 14px;
    }
}

.feed-sentinel {
    height: 100px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: none;
}

.feed-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255,255,255,0.2);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.feed-ad {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.feed-ad-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    gap: 16px;
}

.feed-ad-label {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(255,255,255,0.1);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.feed-ad-slot {
    flex: 1;
    width: 100%;
    max-width: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.2);
    border-radius: 12px;
    min-height: 300px;
}

.feed-ad-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,0.4);
}

.feed-ad-placeholder i {
    font-size: 48px;
}

.feed-ad-placeholder span {
    font-size: 14px;
}

.feed-ad-cta {
    background: linear-gradient(135deg, var(--accent-color) 0%, #ec4899 100%);
    color: #fff;
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.feed-ad-cta:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(255,64,129,0.4);
}

.repost-btn.reposted {
    color: #4caf50;
}

.repost-btn.reposted i {
    color: #4caf50;
}

.recommendations-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: none;
}

.recommendations-overlay.active {
    opacity: 1;
    visibility: visible;
}

.recommendations-panel {
    background: linear-gradient(180deg, #1e1e1e 0%, #141414 100%);
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 500px;
    max-height: 70vh;
    overflow: hidden;
    transform: none;
    transition: none;
}

.recommendations-overlay.active .recommendations-panel {
    transform: none;
}

.recommendations-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.recommendations-header h3 {
    margin: 0;
    font-size: 18px;
    color: #fff;
}

.close-recommendations {
    background: rgba(255,255,255,0.1);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.recommendations-list {
    padding: 16px;
    overflow-y: auto;
    max-height: calc(70vh - 70px);
}

.recommendation-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: rgba(255,255,255,0.05);
    color: inherit;
    border-radius: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}

.recommendation-item:hover,
.recommendation-item:focus-visible {
    background: rgba(255,255,255,0.1);
}

.rec-media {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.rec-media img,
.rec-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rec-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.inline-editor-preload-host {
    position: fixed;
    width: 1px;
    height: 1px;
    left: -2px;
    top: -2px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
}

.inline-video-editor {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: none;
    grid-template-rows: 48px minmax(0, 1fr);
    background: #f7f8fb;
}

.inline-video-editor.active {
    display: grid;
}

.inline-video-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 6px 10px;
    border-bottom: 1px solid #d9e0eb;
    background: #fff;
    color: #172033;
}

.inline-video-editor-toolbar strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inline-video-editor-toolbar a {
    margin-left: auto;
    color: #b4235f;
    font-weight: 700;
    text-decoration: none;
}

.inline-video-editor-close {
    width: 36px;
    height: 36px;
    border: 1px solid #d9e0eb;
    border-radius: 9px;
    background: #fff;
    color: #172033;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
}

.inline-video-editor-stage {
    position: relative;
    min-height: 0;
    background: #111827;
    overflow: hidden;
}

.inline-video-editor-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #f7f8fb;
    opacity: 0;
}

.inline-video-editor-frame.ready {
    opacity: 1;
}

.inline-video-editor-preview {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    background: #111827;
    color: #fff;
}

.inline-video-editor-preview.loaded {
    display: none;
}

.inline-video-editor-preview img,
.inline-video-editor-preview video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.inline-video-editor-status {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(0,0,0,0.72);
    font-size: 13px;
    white-space: nowrap;
}

html.inline-editor-open,
html.inline-editor-open body {
    overflow: hidden;
}

.rec-author {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
}

.rec-text {
    font-size: 14px;
    color: #fff;
    margin: 0;
    line-height: 1.4;
}

.rec-likes {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    gap: 4px;
}

.rec-likes i {
    font-size: 14px;
}

.loading-text,
.empty-text {
    text-align: center;
    color: rgba(255,255,255,0.5);
    padding: 40px 20px;
}

.create-dialog {
    max-width: 520px;
    padding: 0;
}

.create-dialog .dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
}

.create-dialog .dialog-header h4 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    flex: 1;
    text-align: left;
}

.post-submit-btn {
    background: linear-gradient(135deg, var(--accent-color) 0%, #f50057 100%);
    border: none;
    color: #fff;
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px var(--accent-glow), 0 2px 4px rgba(0,0,0,0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.post-submit-btn:hover {
    box-shadow: 0 4px 12px var(--accent-glow), 0 4px 8px rgba(0,0,0,0.3);
}

.post-submit-btn:disabled {
    opacity: 0.5;
}

.post-nsfw-toggle {
    text-align: left;
    margin: 12px 0;
}

.create-dialog-content {
    padding: 0 16px 16px;
    min-height: 200px;
}

.create-dialog-content.drag-over {
    background: rgba(255,107,107,0.1);
    border: 2px dashed var(--accent-color);
    border-radius: 12px;
}

.post-composer {
    margin-bottom: 12px;
}

.composer-text {
    min-height: 150px;
    max-height: 300px;
    overflow-y: auto;
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
    outline: none;
    padding: 12px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
}

.composer-text:empty::before {
    content: attr(data-placeholder);
    color: rgba(255,255,255,0.4);
    pointer-events: none;
}

.composer-text:focus {
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
}

.composer-toolbar {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.toolbar-btn {
    background: rgba(255,255,255,0.08);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.toolbar-btn:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

.toolbar-btn.active {
    background: var(--accent-color);
    color: #fff;
}

.upload-preview-area {
    margin-top: 12px;
}

.upload-preview-area:empty {
    display: none;
}

.upload-preview-area.has-media {
    display: block;
    position: relative;
}

.upload-preview-area img,
.upload-preview-area video {
    max-width: 100%;
    max-height: 300px;
    border-radius: 12px;
    object-fit: contain;
}

.upload-preview-area .remove-media {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,0.7);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emoji-picker {
    display: none;
    margin-top: 12px;
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    overflow: hidden;
}

.emoji-picker.active {
    display: block;
}

.emoji-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.emoji-search-box i {
    color: rgba(255,255,255,0.5);
    font-size: 20px;
}

.emoji-search-box input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    outline: none;
}

.emoji-search-box input::placeholder {
    color: rgba(255,255,255,0.4);
}

.emoji-results {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    padding: 12px;
    max-height: 200px;
    overflow-y: auto;
}

.emoji-item {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
}

.emoji-item:hover {
    background: rgba(255,255,255,0.1);
}

.share-dialog {
    max-width: 320px;
}

.share-options {
    padding: 8px 16px 16px;
}

.share-option {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 14px 16px;
    background: rgba(255,255,255,0.05);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    margin-bottom: 8px;
    transition: background 0.2s;
}

.share-option:hover {
    background: rgba(255,255,255,0.1);
}

.share-option i {
    font-size: 22px;
    color: rgba(255,255,255,0.7);
}

.share-option:last-child {
    margin-bottom: 0;
}

.emoji-btn {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    border-radius: 8px;
    background: transparent;
    border: none;
    transition: background 0.15s;
}

.emoji-btn:hover {
    background: rgba(255,255,255,0.1);
}

.emoji-results .no-results {
    grid-column: 1 / -1;
    text-align: center;
    color: rgba(255,255,255,0.5);
    padding: 20px;
    font-size: 14px;
}

.create-dialog-content.dragover {
    background: rgba(255,107,107,0.1);
}

.create-dialog-content.dragover::after {
    content: 'Drop to upload';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    pointer-events: none;
}

.remove-preview {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.remove-preview:hover {
    background: rgba(0,0,0,0.9);
}

.remove-preview i {
    font-size: 18px;
}

.upload-preview-area.has-media {
    position: relative;
}

.preview-image,
.preview-video {
    max-width: 100%;
    max-height: 250px;
    border-radius: 12px;
    display: block;
}

.chat-replay {
    background: linear-gradient(135deg, rgba(15,15,25,0.95) 0%, rgba(30,20,40,0.95) 100%);
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.chat-replay-header {
    padding: 12px 16px;
    background: linear-gradient(90deg, rgba(255,107,107,0.3) 0%, rgba(236,72,153,0.3) 100%);
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.chat-replay-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--accent-color);
}

.chat-replay-info {
    flex: 1;
}

.chat-replay-avatar-link,
.chat-replay-title-link {
    text-decoration: none;
}

.chat-replay-title-link:hover .chat-replay-title {
    text-decoration: underline;
}

.chat-replay-title {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

.chat-replay-subtitle {
    color: rgba(255,255,255,0.6);
    font-size: 12px;
}

.chat-replay-controls {
    display: flex;
    gap: 8px;
}

.chat-replay-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.chat-replay-btn:hover {
    background: var(--accent-color);
    transform: scale(1.1);
}

.chat-replay-messages {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-msg {
    display: flex;
    gap: 8px;
    max-width: 85%;
}

.chat-msg.ai {
    align-self: flex-start;
}

.chat-msg.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}

.chat-msg-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.4;
}

.chat-msg.ai .chat-msg-bubble {
    background: rgba(255,107,107,0.3);
    color: #fff;
    border-bottom-left-radius: 4px;
}

.chat-msg.user .chat-msg-bubble {
    background: linear-gradient(135deg, var(--accent-color) 0%, #ec4899 100%);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chat-msg-typing {
    display: flex;
    gap: 4px;
    padding: 12px 16px !important;
}

.chat-msg-typing span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    animation: typingDot 1.4s infinite;
}

.chat-msg-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-msg-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingDot {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
}

.game-share {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
    text-align: center;
}

.game-share-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--accent-color) 0%, #ec4899 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(255,107,107,0.3);
}

.game-share-icon i {
    font-size: 40px;
    color: #fff;
}

.game-share-title {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

.game-share-score {
    color: var(--accent-color);
    font-size: 28px;
    font-weight: 700;
}

.game-play-btn {
    background: linear-gradient(135deg, var(--accent-color) 0%, #ec4899 100%);
    color: #fff;
    border: none;
    padding: 12px 32px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(255,107,107,0.3);
}

.game-play-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,107,107,0.4);
}

.mention-popup {
    position: fixed;
    z-index: 10000;
    background: #1e1e1e;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    min-width: 260px;
    max-width: 320px;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    border: 1px solid rgba(255,255,255,0.1);
}

.mention-popup.active {
    display: block;
}

.mention-results {
    padding: 8px 0;
}

.mention-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}

.mention-item:hover,
.mention-item.active {
    background: rgba(255,255,255,0.08);
}

.mention-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255,255,255,0.1);
}

.mention-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mention-name {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mention-handle {
    color: rgba(255,255,255,0.5);
    font-size: 12px;
}

.mention-type {
    background: linear-gradient(135deg, var(--accent-color, #ff6b6b) 0%, #ec4899 100%);
    color: #fff;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: 600;
    flex-shrink: 0;
}

.mention-empty {
    color: rgba(255,255,255,0.5);
    text-align: center;
    padding: 20px;
    font-size: 14px;
}

.mention-tag {
    background: rgba(var(--accent-color-rgb, 255,107,107), 0.2);
    color: var(--accent-color, #ff6b6b);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
}

.mention-tag:hover {
    background: rgba(var(--accent-color-rgb, 255,107,107), 0.3);
}

.preview-media-wrapper {
    position: relative;
    display: inline-block;
}

.preview-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
}

.edit-preview-btn,
.upload-preview-area .remove-preview {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    position: relative;
}

.edit-preview-btn {
    gap: 6px;
    width: auto;
    padding: 0 10px;
    border-radius: 18px;
}

.edit-preview-btn span {
    font-size: 12px;
    font-weight: 700;
}

.edit-preview-btn:hover,
.upload-preview-area .remove-preview:hover {
    background: rgba(0,0,0,0.9);
    transform: scale(1.1);
}

.media-editor-dialog {
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    padding: 0;
    overflow: hidden;
}

.media-editor-dialog .editor-content {
    display: flex;
    flex-direction: column;
    height: calc(100% - 56px);
}

.editor-preview {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    min-height: 300px;
    position: relative;
}

#editor-canvas {
    max-width: 100%;
    max-height: 100%;
}

#editor-video {
    max-width: 100%;
    max-height: 100%;
}

.editor-tools {
    background: #1e1e1e;
    padding: 16px;
    max-height: 46vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.filter-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 12px;
    margin-bottom: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.filter-strip::-webkit-scrollbar {
    display: none;
}

.filter-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

.filter-btn .filter-preview {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: linear-gradient(135deg, #444 0%, #222 100%);
    border: 2px solid transparent;
    transition: all 0.2s;
}

.filter-btn[data-filter="clarendon"] .filter-preview { background: linear-gradient(135deg, #f59e0b, #2563eb); }
.filter-btn[data-filter="gingham"] .filter-preview { background: linear-gradient(135deg, #f5e6d3, #8fa6b8); }
.filter-btn[data-filter="moon"] .filter-preview { background: linear-gradient(135deg, #d1d5db, #374151); }
.filter-btn[data-filter="lark"] .filter-preview { background: linear-gradient(135deg, #fde68a, #67e8f9); }
.filter-btn[data-filter="reyes"] .filter-preview { background: linear-gradient(135deg, #f7d7c4, #cab8ff); }
.filter-btn[data-filter="juno"] .filter-preview { background: linear-gradient(135deg, #fb7185, #facc15); }
.filter-btn[data-filter="slumber"] .filter-preview { background: linear-gradient(135deg, #64748b, #c084fc); }
.filter-btn[data-filter="cinematic"] .filter-preview { background: linear-gradient(135deg, #0f766e, #f97316); }
.filter-btn[data-filter="ember"] .filter-preview { background: linear-gradient(135deg, #7f1d1d, #fb923c); }
.filter-btn[data-filter="noir"] .filter-preview { background: linear-gradient(135deg, #f8fafc, #020617); }
.filter-btn[data-filter="chrome"] .filter-preview { background: linear-gradient(135deg, #dbeafe, #4338ca); }

.filter-btn.active .filter-preview {
    border-color: var(--accent-color, #ff6b6b);
}

.filter-btn span:last-child {
    color: rgba(255,255,255,0.7);
    font-size: 11px;
}

.filter-btn.active span:last-child {
    color: #fff;
}

.tool-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.tool-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    background: rgba(255,255,255,0.05);
    border: none;
    border-radius: 8px;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
}

.tool-tab i {
    font-size: 18px;
}

.tool-tab.active {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.tool-panel {
    display: none;
}

.tool-panel.active {
    display: block;
}

.crop-ratios {
    display: flex;
    gap: 8px;
}

.crop-ratio {
    flex: 1;
    padding: 10px;
    background: rgba(255,255,255,0.05);
    border: none;
    border-radius: 8px;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
}

.crop-ratio.active {
    background: var(--accent-color, #ff6b6b);
    color: #fff;
}

.adjust-slider {
    margin-bottom: 12px;
}

.adjust-slider label {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    margin-bottom: 8px;
}

.adjust-slider output {
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.adjust-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
}

.adjust-slider input[type="range"] {
    width: 100%;
    -webkit-appearance: none;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    height: 4px;
}

.adjust-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.adjust-reset {
    width: 100%;
    min-height: 40px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    color: #fff;
    cursor: pointer;
    font-weight: 600;
}

.trim-controls {
    display: none;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 16px;
}

.trim-controls.active {
    display: block;
}

.trim-controls input[type="range"] {
    width: 100%;
    margin: 8px 0;
}

.trim-labels {
    display: flex;
    justify-content: space-between;
    color: rgba(255,255,255,0.6);
    font-size: 12px;
}

.editor-done-btn {
    background: var(--accent-color, #ff6b6b);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.editor-done-btn:hover {
    opacity: 0.9;
}

@media (max-width: 600px) {
    .media-editor-dialog {
        max-width: 100%;
        width: 100%;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }
    
    .editor-preview {
        min-height: 34vh;
    }

    .editor-tools { max-height: 58vh; }
    
    .filter-btn .filter-preview {
        width: 48px;
        height: 48px;
    }

    .adjust-grid { gap: 0 12px; }
}

.aiart-dialog {
    max-width: 500px;
    width: 100%;
    padding: 0;
}

.aiart-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

.aiart-preview {
    aspect-ratio: 1;
    max-height: 350px;
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.aiart-placeholder {
    text-align: center;
    color: rgba(255,255,255,0.5);
}

.aiart-placeholder i {
    font-size: 48px;
    margin-bottom: 8px;
}

.aiart-result {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aiart-actions {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.aiart-use-btn {
    background: var(--accent-color, #ff6b6b);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
}

.aiart-retry-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aiart-loading {
    text-align: center;
    color: rgba(255,255,255,0.7);
}

.aiart-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255,255,255,0.2);
    border-top-color: var(--accent-color, #ff6b6b);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 12px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.aiart-error {
    text-align: center;
    color: #ff6b6b;
}

.aiart-error i {
    font-size: 40px;
    margin-bottom: 8px;
}

.aiart-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.aiart-input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    outline: none;
    transition: all 0.2s;
}

.aiart-input:focus {
    border-color: var(--accent-color, #ff6b6b);
    background: rgba(255,255,255,0.1);
}

.aiart-input::placeholder {
    color: rgba(255,255,255,0.4);
}

.aiart-styles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.aiart-style {
    padding: 8px 16px;
    background: rgba(255,255,255,0.08);
    border: 1px solid transparent;
    border-radius: 20px;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.aiart-style:hover {
    background: rgba(255,255,255,0.12);
}

.aiart-style.active {
    background: var(--accent-color, #ff6b6b);
    color: #fff;
}

.aiart-generate-btn {
    background: var(--accent-color, #ff6b6b);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.aiart-generate-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .aiart-dialog {
        max-width: 100%;
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .aiart-preview {
        max-height: 300px;
    }
}

.quoted-post {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 12px;
    margin-top: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.quoted-post:hover {
    background: rgba(255,255,255,0.08);
}

.quoted-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.quoted-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.quoted-author {
    color: rgba(255,255,255,0.7);
    font-size: 12px;
}

.quoted-image {
    width: 100%;
    max-height: 150px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 8px;
}

.quoted-text {
    color: rgba(255,255,255,0.9);
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.quote-preview-wrapper {
    position: relative;
    padding: 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    margin-bottom: 12px;
}

.remove-quote-preview {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.remove-quote-preview i {
    font-size: 16px;
}

.quote-btn {
    opacity: 0.8;
}

.quote-btn:hover {
    opacity: 1;
}

.upload-preview-area.has-quote .quoted-post {
    margin-top: 0;
}

.link-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 12px;
    margin-top: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}

.link-preview:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
}

.link-preview-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent-color, #ff6b6b) 0%, #ec4899 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.link-preview-icon i {
    color: #fff;
    font-size: 20px;
}

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

.link-preview-title {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
}

.link-preview-url {
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-preview-arrow {
    color: rgba(255,255,255,0.5);
    font-size: 18px;
    flex-shrink: 0;
}

.link-preview:hover .link-preview-arrow {
    color: var(--accent-color, #ff6b6b);
}

.feed-ai-meta {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.15), rgba(255, 64, 129, 0.15));
    border: 1px solid rgba(138, 43, 226, 0.3);
    border-radius: 12px;
    padding: 12px;
    margin: 12px 0;
}

.ai-meta-header {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #a855f7;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.ai-meta-header i {
    font-size: 16px;
}

.ai-meta-details {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.ai-model, .ai-style {
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
}

.ai-model {
    background: rgba(168, 85, 247, 0.2);
    color: #c084fc;
}

.ai-style {
    background: rgba(255, 64, 129, 0.2);
    color: #ff80ab;
}

.ai-prompt {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
}

.ai-prompt i {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
    margin-top: 2px;
}

.ai-prompt:hover {
    color: rgba(255, 255, 255, 0.9);
}

.ai-prompt:hover i {
    color: var(--accent-color);
}

.remix-btn {
    background: linear-gradient(135deg, #a855f7, #ec4899) !important;
}

.remix-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
}

.grid-ai-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.9), rgba(255, 64, 129, 0.9));
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 10px;
    color: white;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.grid-item:hover .grid-ai-badge {
    opacity: 1;
}

.grid-ai-badge i {
    font-size: 12px;
}

.grid-prompt-preview {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.9));
    padding: 40px 12px 12px;
    color: rgba(255,255,255,0.9);
    font-size: 12px;
    line-height: 1.4;
    opacity: 0;
    transition: opacity 0.2s;
}

.grid-item:hover .grid-prompt-preview {
    opacity: 1;
}

.link-preview-card {
    position: relative;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    overflow: hidden;
}

.link-preview-card .remove-preview {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,0.6);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    z-index: 1;
}

.link-preview-img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
}

.link-preview-text {
    padding: 12px;
}

.link-preview-title {
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
    font-size: 14px;
}

.link-preview-desc {
    color: rgba(255,255,255,0.6);
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 6px;
}

.link-preview-url {
    color: rgba(255,255,255,0.4);
    font-size: 12px;
}

.composer-text code,
.feed-caption code {
    background: rgba(255,255,255,0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.9em;
}

.composer-text b,
.composer-text strong {
    font-weight: 700;
}

.composer-text i,
.composer-text em {
    font-style: italic;
}

.composer-text a {
    color: var(--accent-color);
    text-decoration: underline;
}

.grid-tags {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2;
}

.grid-item:hover .grid-tags {
    opacity: 1;
}

.grid-tag {
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    color: #3897f0;
    text-decoration: none;
    transition: all 0.15s;
}

.grid-tag:hover {
    background: rgba(56,151,240,0.3);
    color: #fff;
}

.related-tags-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.related-tags-label {
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    font-weight: 500;
}

.related-tag {
    background: rgba(56,151,240,0.15);
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 13px;
    color: #3897f0;
    text-decoration: none;
    transition: all 0.2s;
}

.related-tag:hover {
    background: rgba(56,151,240,0.3);
    color: #fff;
}

.create-art-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: all 0.2s;
    margin-left: auto;
}

.create-art-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(168,85,247,0.4);
}

.create-art-btn i {
    font-size: 16px;
}

.feed-action:focus-visible,
.follow-btn:focus-visible,
.profile-follow-btn:focus-visible,
.dialog-close:focus-visible,
.feed-back-btn:focus-visible,
.feed-nav-btn:focus-visible,
.share-option:focus-visible,
.comment-input-area input:focus-visible,
.comment-input-area button:focus-visible,
.explore-tab:focus-visible,
.search-input:focus-visible,
.search-clear:focus-visible,
.fab-create:focus-visible,
.video-play-overlay:focus-visible,
.chat-replay-btn:focus-visible,
.game-play-btn:focus-visible,
.feed-ad-cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.grid-item:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .feed-item:hover .feed-video,
    .feed-item:hover .feed-image {
        transform: none;
    }
    .grid-item:hover {
        transform: none;
    }
    .grid-item,
    .grid-hover {
        transition: none;
    }
    .feed-action,
    .follow-btn,
    .profile-follow-btn,
    .dialog-close,
    .feed-back-btn,
    .feed-nav-btn,
    .share-option,
    .explore-tab,
    .video-play-overlay,
    .create-art-btn {
        transition: none;
    }
    .feed-action.liked,
    .double-tap-heart.animate {
        animation: none;
    }
}

.post-page {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    background: #0a0a0a;
    color: #fff;
}

.post-inner {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 16px 96px;
}

.post-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    background: linear-gradient(180deg, #0a0a0a 60%, rgba(10,10,10,0));
}

.post-back,
.post-allbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px 9px 12px;
    border-radius: 22px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.18s, border-color 0.18s;
}

.post-back:hover,
.post-allbtn:hover {
    background: rgba(255,255,255,0.13);
    border-color: rgba(255,255,255,0.2);
}

.post-back i,
.post-allbtn i { font-size: 20px; }

.post-allbtn {
    background: linear-gradient(135deg, #ff4081, #ff6b6b);
    border-color: transparent;
    padding: 9px 16px;
}

.post-page .feed-scroll {
    height: auto;
    overflow: visible;
    scroll-snap-type: none;
}

.feed-item.post-static {
    height: auto;
    min-height: 0;
    display: block;
    background: #141414;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    overflow: hidden;
    scroll-snap-align: none;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
}

.post-static .post-media {
    position: relative;
    inset: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 40%, #1d1d1d, #0c0c0c);
    max-height: 74vh;
    overflow: hidden;
}

.post-static .post-media .feed-image,
.post-static .post-media .feed-video {
    width: 100%;
    height: auto;
    max-height: 74vh;
    object-fit: contain;
    display: block;
    transition: none;
}

.post-static:hover .feed-image,
.post-static:hover .feed-video { transform: none; }

.post-body { padding: 18px 20px 22px; text-align: left; }

.post-source {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.post-author {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #fff;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.post-source .author-avatar {
    width: 46px;
    height: 46px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    flex: 0 0 auto;
}

.post-source-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.post-source .author-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: none;
    white-space: nowrap;
}

.post-date {
    font-size: 12.5px;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
}

.post-source .follow-btn {
    margin-left: auto;
    border-color: rgba(255,255,255,0.6);
    flex: 0 0 auto;
}

.post-static .feed-caption {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255,255,255,0.92);
    text-shadow: none;
    margin: 0 0 14px;
}

.post-aimeta {
    margin: 0 0 14px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
}

.post-prompt {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0 0 8px;
    font-size: 13.5px;
    color: rgba(255,255,255,0.72);
    line-height: 1.45;
}

.post-prompt i { font-size: 18px; color: var(--accent-color); flex: 0 0 auto; }

.post-aimeta-tags { display: flex; flex-wrap: wrap; gap: 8px; }

.post-chip {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 14px;
    background: rgba(168,85,247,0.16);
    color: #c89bff;
    letter-spacing: 0.01em;
}

.post-static .feed-tags { margin-bottom: 16px; }

.post-static .feed-tag { text-decoration: none; }

.post-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.07);
    margin-top: 4px;
    padding-top: 16px;
}

.post-actions .feed-action {
    flex-direction: row;
    width: auto;
    height: 42px;
    border-radius: 21px;
    padding: 0 16px;
    gap: 8px;
    background: rgba(255,255,255,0.06);
    text-decoration: none;
}

.post-actions .feed-action:hover { transform: translateY(-1px); }

.post-actions .feed-action span {
    position: static;
    bottom: auto;
    font-size: 14px;
    text-shadow: none;
}

.post-actions .feed-action.liked { background: rgba(255,64,129,0.18); animation: none; }

.post-actions .remix-btn {
    margin-left: auto;
    background: linear-gradient(135deg, #ff4081, #ff6b6b);
    border-color: transparent;
}

.post-related { margin-top: 34px; }

.post-related-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
}

.post-related-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.post-related-all {
    color: var(--accent-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.post-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.post-related-item {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: #1a1a1a;
    text-decoration: none;
}

.post-related-item img,
.post-related-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.post-related-item:hover img,
.post-related-item:hover video { transform: scale(1.05); }

.post-related-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 10px 8px;
    font-size: 12px;
    color: #fff;
    line-height: 1.3;
    background: linear-gradient(to top, rgba(0,0,0,0.82), transparent);
    opacity: 0;
    transition: opacity 0.2s;
}

.post-related-item:hover .post-related-cap { opacity: 1; }

.post-related-play {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-related-play i { font-size: 18px; color: #fff; }

@media (max-width: 600px) {
    .post-page { padding: 0 10px 80px; }
    .post-static .post-media,
    .post-static .post-media .feed-image,
    .post-static .post-media .feed-video { max-height: 64vh; }
    .post-related-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; }
}

.post-imgtools {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 14px 20px 0;
}

.post-imgtools .imgtool-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.06);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.post-imgtools .imgtool-btn:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.28);
}

.post-imgtools .imgtool-btn i { font-size: 18px; color: #ff4081; }

#imgtool-dialog .imgtool-body { padding: 8px 24px 24px; }

.imgtool-status {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.85);
    font-size: 14px;
}

.imgtool-spinner {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: imgtool-spin 0.8s linear infinite;
}

@keyframes imgtool-spin { to { transform: rotate(360deg); } }

.imgtool-result img,
.imgtool-result video {
    width: 100%;
    border-radius: 12px;
    display: block;
}

.imgtool-result-links { display: flex; gap: 16px; margin-top: 12px; }

.imgtool-result-links a {
    color: #8ab4f8;
    font-size: 14px;
    text-decoration: none;
}

.imgtool-result-links a:hover { text-decoration: underline; }

.imgtool-error { color: #f28b82; font-size: 14px; margin: 0; }