:root {
    --navy: #0f172a;
    --sidebar: #1e293b;
    --accent: #38bdf8;
    --exit: #ef4444;
}

body { font-family: 'Inter', sans-serif; margin: 0; background: #f8fafc; display: flex; }

.app-container { display: flex; width: 100vw; height: 100vh; }

.sidebar { width: 260px; background: var(--sidebar); color: white; padding: 20px; }
.nav-item { padding: 15px; cursor: pointer; border-radius: 8px; margin-bottom: 5px; transition: 0.3s; }
.nav-item:hover, .nav-item.active { background: var(--accent); color: var(--navy); font-weight: bold; }

.main-content { flex: 1; padding: 40px; overflow-y: auto; }
.page { max-width: 800px; margin: 0 auto; }
.hidden { display: none; }

/* Post Box & Tagging */
.create-post { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); position: relative; }
textarea { width: 100%; height: 100px; border: 1px solid #ddd; border-radius: 8px; padding: 10px; resize: none; }

#tag-dropdown { position: absolute; background: white; border: 1px solid #ccc; width: 200px; border-radius: 5px; z-index: 10; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
#tag-dropdown div { padding: 10px; cursor: pointer; border-bottom: 1px solid #eee; }
#tag-dropdown div:hover { background: #f0f9ff; }

#quick-exit { position: fixed; top: 20px; right: 20px; background: var(--exit); color: white; border: none; padding: 12px 24px; border-radius: 30px; cursor: pointer; font-weight: bold; z-index: 100; }