@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --primary: #00BFFF;
  --primary-light: #33CCFF;
  --primary-dark: #0099CC;
  --primary-50: rgba(0,191,255,0.08);
  --primary-100: rgba(0,191,255,0.12);
  --primary-200: rgba(0,191,255,0.2);
  --accent: #FF6B35;
  --accent-light: #FF8F66;
  --success: #00E676;
  --danger: #FF3D57;
  --info: #00BFFF;
  --warning: #FFB300;
  --bg: #0A0A0F;
  --bg-card: #12121A;
  --bg-elevated: #1A1A25;
  --bg-sidebar: #08080D;
  --bg-sidebar-hover: #16162A;
  --bg-input: #16161F;
  --text: #E8E8EC;
  --text-secondary: #8B8B9E;
  --text-light: #5C5C72;
  --text-sidebar: #7B7B95;
  --text-sidebar-active: #FFFFFF;
  --border: #1E1E2E;
  --border-light: #16162A;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.5);
  --shadow-xl: 0 20px 50px rgba(0,0,0,0.6);
  --shadow-neon: 0 0 15px rgba(0,191,255,0.3), 0 0 30px rgba(0,191,255,0.1);
  --shadow-neon-strong: 0 0 20px rgba(0,191,255,0.5), 0 0 40px rgba(0,191,255,0.2), 0 0 60px rgba(0,191,255,0.1);
  --glow: 0 0 10px rgba(0,191,255,0.4);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

[data-theme="light"] {
  --bg: #F5F7FA;
  --bg-card: #FFFFFF;
  --bg-elevated: #F0F2F5;
  --bg-sidebar: #FFFFFF;
  --bg-sidebar-hover: #F0F4FF;
  --bg-input: #F0F2F5;
  --text: #1A1A2E;
  --text-secondary: #5A5A7A;
  --text-light: #8A8AA0;
  --text-sidebar: #5A5A7A;
  --text-sidebar-active: #0A0A1A;
  --border: #E2E4EA;
  --border-light: #EEF0F4;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 50px rgba(0,0,0,0.12);
  --shadow-neon: 0 0 15px rgba(0,191,255,0.15), 0 0 30px rgba(0,191,255,0.05);
  --shadow-neon-strong: 0 0 20px rgba(0,191,255,0.25), 0 0 40px rgba(0,191,255,0.1);
  --glow: 0 0 8px rgba(0,191,255,0.2);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.65; min-height:100vh; overflow-x:hidden; font-size:14px; letter-spacing:-0.01em; -webkit-font-smoothing:antialiased; }
#root { min-height:100vh; }
a { text-decoration:none; color:inherit; }
button { cursor:pointer; border:none; background:none; font-family:var(--font); }
input,textarea,select { font-family:var(--font); color:var(--text); }
img { max-width:100%; }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:#2A2A3A; border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#3A3A4A; }

/* ===== LAYOUT ===== */
.app-layout { display:flex; min-height:100vh; }
.sidebar { width:260px; background:var(--bg-sidebar); position:fixed; top:0; left:0; height:100vh; z-index:100; display:flex; flex-direction:column; transition:var(--transition); border-right:1px solid var(--border); }
.sidebar-logo { padding:24px 20px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--border); cursor:pointer; }
.sidebar-logo h1 { font-size:22px; font-weight:800; color:var(--text); letter-spacing:-0.03em; }
.sidebar-logo span { font-size:11px; color:var(--primary); font-weight:600; letter-spacing:1.5px; text-transform:uppercase; display:block; margin-top:2px; text-shadow:var(--glow); }
.sidebar-nav { flex:1; padding:16px 12px; overflow-y:auto; }
.sidebar-section { margin-bottom:20px; }
.sidebar-section-title { font-size:11px; font-weight:600; color:var(--text-light); text-transform:uppercase; letter-spacing:1.2px; padding:0 12px; margin-bottom:8px; }
.nav-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--radius-sm); color:var(--text-sidebar); font-size:14px; font-weight:500; transition:var(--transition); cursor:pointer; margin-bottom:2px; position:relative; }
.nav-item:hover { background:var(--bg-sidebar-hover); color:var(--primary-light); }
.nav-item.active { background:var(--bg-sidebar-hover); color:var(--text-sidebar-active); font-weight:700; box-shadow:inset 3px 0 0 var(--primary), var(--glow); }
.nav-item .icon { width:20px; height:20px; display:flex; align-items:center; justify-content:center; font-size:18px; }
.nav-item .badge { position:absolute; right:12px; background:var(--danger); color:#fff; font-size:11px; font-weight:700; padding:2px 7px; border-radius:var(--radius-full); min-width:20px; text-align:center; }
.sidebar-footer { padding:16px; border-top:1px solid var(--border); }
.sidebar-user { display:flex; align-items:center; gap:10px; padding:8px; border-radius:var(--radius-sm); cursor:pointer; transition:var(--transition); }
.sidebar-user:hover { background:var(--bg-sidebar-hover); }
.sidebar-user .avatar-sm { width:36px; height:36px; border-radius:var(--radius-full); object-fit:cover; border:2px solid var(--primary); box-shadow:var(--glow); }
.sidebar-user .user-info { flex:1; }
.sidebar-user .user-name { color:var(--sidebar-user-name); font-size:13px; font-weight:600; }
.sidebar-user .user-status { color:var(--text-sidebar); font-size:11px; }

.main-area { margin-left:260px; flex:1; min-height:100vh; display:flex; flex-direction:column; }
.topbar { background:var(--topbar-bg); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); padding:0 32px; height:64px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:50; }
.topbar-left { display:flex; align-items:center; gap:16px; }
.mobile-menu-btn { display:none; }
.sidebar-overlay { display:none; }
@media(max-width:768px) {
  .mobile-menu-btn { display:flex !important; }
  .sidebar-overlay { display:block !important; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:190; }
  .sidebar { z-index:200; }
}
.topbar-title { font-size:20px; font-weight:800; color:var(--text); letter-spacing:-0.03em; }
.search-box { position:relative; }
.search-box input { width:320px; padding:10px 16px 10px 40px; border:1px solid var(--border); border-radius:var(--radius-full); font-size:14px; background:var(--bg-input); transition:var(--transition); color:var(--text); }
.search-box input:focus { outline:none; border-color:var(--primary); box-shadow:var(--glow); width:380px; }
.search-box input::placeholder { color:var(--text-light); }
.search-box .search-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-light); font-size:16px; }
.topbar-right { display:flex; align-items:center; gap:8px; }
.topbar-btn { width:40px; height:40px; border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--text-secondary); transition:var(--transition); position:relative; }
.topbar-btn:hover { background:var(--primary-50); color:var(--primary); }
.topbar-btn .notif-dot { position:absolute; top:8px; right:8px; width:8px; height:8px; background:var(--danger); border-radius:50%; border:2px solid var(--bg); }

.content { flex:1; padding:24px 32px; max-width:1200px; width:100%; margin:0 auto; }

/* ===== AUTH ===== */
.auth-page { display:flex; min-height:100vh; }
.auth-left { flex:1; background:linear-gradient(135deg,#05050A 0%,#0A0A1A 50%,#101025 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px; position:relative; overflow:hidden; }
.auth-left::before { content:''; position:absolute; width:400px; height:400px; background:radial-gradient(circle,rgba(0,191,255,0.15),transparent 70%); top:-100px; right:-100px; }
.auth-left::after { content:''; position:absolute; width:300px; height:300px; background:radial-gradient(circle,rgba(0,191,255,0.1),transparent 70%); bottom:-50px; left:-50px; }
.auth-left h2 { color:var(--text); font-size:36px; font-weight:800; margin-bottom:12px; text-align:center; text-shadow:var(--shadow-neon); letter-spacing:-0.03em; }
.auth-left p { color:var(--text-secondary); font-size:16px; text-align:center; max-width:380px; line-height:1.7; }
.auth-right { flex:1; display:flex; align-items:center; justify-content:center; padding:48px; background:var(--bg); }
.auth-form { width:100%; max-width:420px; }
.auth-form h3 { font-size:28px; font-weight:800; margin-bottom:8px; letter-spacing:-0.03em; }
.auth-form .subtitle { color:var(--text-secondary); font-size:15px; margin-bottom:32px; }
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px; }
.form-input { width:100%; padding:12px 16px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:14px; transition:var(--transition); background:var(--bg-input); color:var(--text); }
.form-input:focus { outline:none; border-color:var(--primary); box-shadow:var(--glow); }
.form-input::placeholder { color:var(--text-light); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 24px; border-radius:var(--radius-sm); font-size:14px; font-weight:600; transition:var(--transition); }
.btn-primary { background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; box-shadow:var(--shadow-neon); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:var(--shadow-neon-strong); }
.btn-secondary { background:var(--bg-elevated); color:var(--text); border:1.5px solid var(--border); }
.btn-secondary:hover { border-color:var(--primary); color:var(--primary); }
.btn-ghost { color:var(--primary); }
.btn-ghost:hover { background:var(--primary-50); }
.btn-sm { padding:8px 16px; font-size:13px; }
.btn-icon { width:36px; height:36px; padding:0; border-radius:var(--radius-full); }
.btn-accent { background:linear-gradient(135deg,var(--accent),#CC5529); color:#fff; }
.btn-success { background:var(--success); color:#000; }
.btn-danger { background:var(--danger); color:#fff; }
.auth-link { text-align:center; margin-top:24px; font-size:14px; color:var(--text-secondary); }
.auth-link a,.auth-link span.link { color:var(--primary); font-weight:600; cursor:pointer; text-shadow:var(--glow); }
.auth-divider { display:flex; align-items:center; gap:16px; margin:24px 0; color:var(--text-light); font-size:13px; }
.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:var(--border); }

/* ===== CARDS ===== */
/* ===== CARDS ===== */
.card { 
  background: var(--bg-card-gradient); 
  border-radius: var(--radius-lg); 
  border: 1px solid var(--card-border); 
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
  overflow: hidden; 
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--card-glow), var(--card-shadow);
  position: relative;
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), transparent);
  opacity: 0.5;
}
.card:hover { 
  box-shadow: 0 15px 35px -5px rgba(0,0,0,0.3); 
  border-color: color-mix(in srgb, var(--primary) 40%, var(--card-border)); 
  transform: translateY(-4px);
}

/* Avatar Selection */
.avatar-option {
  padding: 4px;
  border-radius: 50%;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.avatar-option:hover {
  transform: scale(1.15);
  background: var(--primary-100);
}
.avatar-option.selected {
  transform: scale(1.1);
  box-shadow: 0 0 15px var(--primary);
}
.card-header { padding:20px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.card-body { padding:24px; }
.card-footer { padding:16px 24px; border-top:1px solid var(--border); }

/* ===== FEED ===== */
.feed-layout { display:grid; grid-template-columns:1fr 340px; gap:24px; }
.feed-main { display:flex; flex-direction:column; gap:20px; }
.feed-sidebar { display:flex; flex-direction:column; gap:20px; }

/* Stories */
.stories-bar { display:flex; gap:12px; padding:20px 24px; overflow-x:auto; }
.story-item { display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; min-width:72px; }
.story-avatar { width:64px; height:64px; border-radius:var(--radius-full); border:3px solid var(--primary); padding:3px; transition:var(--transition); box-shadow:var(--glow); }
.story-avatar img { width:100%; height:100%; border-radius:var(--radius-full); object-fit:cover; }
.story-avatar.add-story { background:var(--bg-elevated); display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--primary); border-style:dashed; }
.story-name { font-size:12px; color:var(--text-secondary); font-weight:500; max-width:72px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.story-item:hover .story-avatar { transform:scale(1.08); box-shadow:var(--shadow-neon); }

/* Post Composer */
.post-composer { padding:20px 24px; }
.composer-top { display:flex; gap:12px; align-items:flex-start; }
.composer-avatar { width:44px; height:44px; border-radius:var(--radius-full); object-fit:cover; flex-shrink:0; }
.composer-input { flex:1; }
.composer-input textarea { width:100%; min-height:60px; border:none; resize:none; font-size:15px; line-height:1.6; background:transparent; color:var(--text); }
.composer-input textarea:focus { outline:none; }
.composer-input textarea::placeholder { color:var(--text-light); }
.composer-actions { display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
.composer-tools { display:flex; gap:4px; }
.composer-tool { width:36px; height:36px; border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--text-secondary); transition:var(--transition); }
.composer-tool:hover { background:var(--primary-50); color:var(--primary); }

/* Post */
.post-card .post-header { display:flex; align-items:center; gap:12px; padding:20px 24px 12px; }
.post-avatar { width:44px; height:44px; border-radius:var(--radius-full); object-fit:cover; }
.post-user-info { flex:1; }
.post-username { font-size:15px; font-weight:700; letter-spacing:-0.02em; }
.post-meta { font-size:12px; color:var(--text-light); display:flex; align-items:center; gap:6px; }
.post-content { padding:0 24px 16px; }
.post-text { font-size:15px; line-height:1.7; color:var(--text); margin-bottom:12px; }
.post-image { border-radius:var(--radius-sm); overflow:hidden; margin-top:8px; }
.post-image img { width:100%; display:block; }
.post-stats { display:flex; align-items:center; justify-content:space-between; padding:8px 24px; font-size:13px; color:var(--text-light); }
.post-actions { display:flex; border-top:1px solid var(--border); }
.post-action { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; font-size:14px; font-weight:500; color:var(--text-secondary); transition:var(--transition); }
.post-action:hover { background:var(--primary-50); color:var(--primary); }
.post-action.liked { color:var(--danger); }

/* ===== PROFILE ===== */
.profile-cover { height:240px; background:linear-gradient(135deg,#05050A,#0A0A2A,#101040); border-radius:var(--radius-lg) var(--radius-lg) 0 0; position:relative; overflow:hidden; }
.profile-cover::before { content:''; position:absolute; top:50%; left:50%; width:300px; height:300px; background:radial-gradient(circle,rgba(0,191,255,0.12),transparent 70%); transform:translate(-50%,-50%); }
.profile-cover::after { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300BFFF' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.profile-info-section { padding:0 32px; margin-top:-60px; position:relative; z-index:2; display:flex; align-items:flex-end; gap:24px; margin-bottom:24px; }
.profile-avatar-big { width:128px; height:128px; border-radius:var(--radius-full); border:4px solid var(--bg-card); box-shadow:var(--shadow-neon); object-fit:cover; overflow:hidden; }
.profile-details { flex:1; padding-bottom:8px; }
.profile-name { font-size:28px; font-weight:800; color:#fff; text-shadow: 0 2px 10px rgba(0,0,0,0.6); letter-spacing:-0.03em; }
.profile-handle { font-size:14px; color:var(--primary); margin-top:2px; text-shadow:var(--glow); }
.profile-bio { font-size:14px; color:var(--text-secondary); margin-top:8px; max-width:500px; }
.profile-stats { display:flex; gap:24px; margin-top:12px; }
.profile-stat .num { font-size:18px; font-weight:800; color:var(--text); letter-spacing:-0.02em; }
.profile-stat .label { font-size:12px; color:var(--text-secondary); }
.profile-actions { display:flex; gap:8px; padding-bottom:8px; }
.profile-tabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:24px; padding:0 32px; }
.profile-tab { padding:12px 20px; font-size:14px; font-weight:600; color:var(--text-secondary); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:var(--transition); }
.profile-tab:hover { color:var(--primary); }
.profile-tab.active { color:var(--primary); border-bottom-color:var(--primary); text-shadow:var(--glow); }

/* ===== EVENTS ===== */
.events-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px; }
.event-card .event-image { height:180px; background:linear-gradient(135deg,#0A0A1A,#101030); display:flex; align-items:center; justify-content:center; position:relative; }
.event-image img { width:100%; height:100%; object-fit:cover; }
.event-date-badge { position:absolute; top:16px; left:16px; background:rgba(10,10,15,0.9); backdrop-filter:blur(8px); border-radius:var(--radius-sm); padding:8px 12px; text-align:center; border:1px solid var(--border); }
.event-date-badge .month { font-size:11px; font-weight:700; color:var(--primary); text-transform:uppercase; text-shadow:var(--glow); }
.event-date-badge .day { font-size:22px; font-weight:800; color:#fff; line-height:1; }
.event-category { position:absolute; top:16px; right:16px; background:rgba(0,191,255,0.2); border:1px solid rgba(0,191,255,0.3); color:var(--primary); font-size:11px; font-weight:600; padding:4px 10px; border-radius:var(--radius-full); }
.event-info { padding:20px; }
.event-title { font-size:17px; font-weight:700; margin-bottom:8px; }
.event-detail { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-secondary); margin-bottom:6px; }
.event-footer { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-top:1px solid var(--border); }
.event-attendees { display:flex; }
.event-attendees .att-avatar { width:28px; height:28px; border-radius:var(--radius-full); border:2px solid var(--bg-card); margin-left:-8px; object-fit:cover; }
.event-attendees .att-avatar:first-child { margin-left:0; }

/* ===== MARKETPLACE ===== */
.marketplace-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; }
.market-card .market-image { height:200px; background:var(--bg-elevated); position:relative; overflow:hidden; }
.market-card .market-image img { width:100%; height:100%; object-fit:cover; transition:var(--transition); }
.market-card:hover .market-image img { transform:scale(1.05); }
.market-price { position:absolute; bottom:12px; left:12px; background:rgba(10,10,15,0.9); color:var(--primary); padding:6px 14px; border-radius:var(--radius-full); font-size:16px; font-weight:700; border:1px solid rgba(0,191,255,0.3); text-shadow:var(--glow); }
.market-badge { position:absolute; top:12px; right:12px; padding:4px 10px; border-radius:var(--radius-full); font-size:11px; font-weight:600; }
.market-badge.new { background:var(--success); color:#000; }
.market-badge.hot { background:var(--danger); color:#fff; }
.market-info { padding:16px 20px; }
.market-title { font-size:15px; font-weight:600; margin-bottom:4px; }
.market-location { font-size:13px; color:var(--text-secondary); display:flex; align-items:center; gap:6px; }

/* ===== ACTIVITIES ===== */
.activities-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.activity-icon { width:48px; height:48px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:16px; }
.activity-icon.purple { background:var(--primary-100); color:var(--primary); }
.activity-icon.amber { background:rgba(255,179,0,0.12); color:var(--warning); }
.activity-icon.green { background:rgba(0,230,118,0.12); color:var(--success); }
.activity-icon.blue { background:var(--primary-100); color:var(--primary); }
.activity-title { font-size:17px; font-weight:700; margin-bottom:6px; }
.activity-desc { font-size:13px; color:var(--text-secondary); line-height:1.6; margin-bottom:16px; }

/* Poll */
.poll-option { display:flex; align-items:center; gap:12px; padding:10px 16px; border:1.5px solid var(--border); border-radius:var(--radius-sm); margin-bottom:8px; cursor:pointer; transition:var(--transition); position:relative; overflow:hidden; }
.poll-option:hover { border-color:rgba(0,191,255,0.3); }
.poll-option.voted { border-color:var(--primary); background:var(--primary-50); }
.poll-bar { position:absolute; left:0; top:0; bottom:0; background:var(--primary-100); transition:width 0.6s ease; z-index:0; }
.poll-option span { position:relative; z-index:1; font-size:14px; font-weight:500; }
.poll-option .pct { margin-left:auto; font-size:13px; font-weight:600; color:var(--primary); text-shadow:var(--glow); }

/* Progress */
.progress-bar { height:8px; background:var(--border); border-radius:var(--radius-full); overflow:hidden; margin-bottom:6px; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--primary),var(--primary-light)); border-radius:var(--radius-full); transition:width 0.6s ease; box-shadow:var(--glow); }
.progress-text { font-size:12px; color:var(--text-secondary); }

/* Trending */
.trending-item { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.trending-item:last-child { border:none; }
.trending-rank { font-size:16px; font-weight:800; color:var(--primary); min-width:28px; text-shadow:var(--glow); }
.trending-info .topic { font-size:14px; font-weight:600; }
.trending-info .posts-count { font-size:12px; color:var(--text-secondary); }

/* ===== NOTIF DROPDOWN ===== */
.notif-dropdown { position:absolute; top:50px; right:0; width:380px; background:var(--bg-card); border-radius:var(--radius-lg); box-shadow:var(--shadow-xl); border:1px solid var(--border); z-index:999; animation:slideDown 0.2s ease; }
.notif-header { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.notif-header h4 { font-size:16px; font-weight:700; }
.notif-list { max-height:400px; overflow-y:auto; }
.notif-item { display:flex; gap:12px; padding:14px 20px; transition:var(--transition); cursor:pointer; }
.notif-item:hover { background:var(--bg-elevated); }
.notif-item.unread { background:var(--primary-50); border-left:3px solid var(--primary); }
.notif-avatar { width:40px; height:40px; border-radius:var(--radius-full); object-fit:cover; flex-shrink:0; }
.notif-content { flex:1; }
.notif-text { font-size:13px; line-height:1.5; }
.notif-text strong { font-weight:600; }
.notif-time { font-size:11px; color:var(--text-light); margin-top:4px; }

/* ===== CHAT ===== */
.chat-layout { display:grid; grid-template-columns:300px 1fr; height:calc(100vh - 64px); }
.chat-list { border-right:1px solid var(--border); overflow-y:auto; background:var(--bg-card); }
.chat-list-header { padding:20px; border-bottom:1px solid var(--border); }
.chat-list-header h3 { font-size:18px; font-weight:700; }
.chat-contact { display:flex; align-items:center; gap:12px; padding:14px 20px; cursor:pointer; transition:var(--transition); border-bottom:1px solid var(--border); }
.chat-contact:hover { background:var(--bg-elevated); }
.chat-contact.active { background:var(--primary-50); border-left:3px solid var(--primary); }
.chat-contact-avatar { width:44px; height:44px; border-radius:var(--radius-full); object-fit:cover; position:relative; }
.online-dot { position:absolute; bottom:2px; right:2px; width:10px; height:10px; background:var(--success); border-radius:50%; border:2px solid var(--bg-card); box-shadow:0 0 6px var(--success); }
.chat-contact-info { flex:1; }
.chat-contact-name { font-size:14px; font-weight:600; }
.chat-contact-last { font-size:12px; color:var(--text-light); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:160px; }
.chat-contact-time { font-size:11px; color:var(--text-light); }
.chat-window { display:flex; flex-direction:column; background:var(--bg); }
.chat-window-header { padding:16px 24px; background:var(--bg-card); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; }
.chat-messages { flex:1; padding:24px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
.message { max-width:65%; padding:12px 16px; border-radius:var(--radius-lg); font-size:14px; line-height:1.5; animation:fadeIn 0.3s ease; }
.message.sent { align-self:flex-end; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; border-bottom-right-radius:4px; box-shadow:var(--glow); }
.message.received { align-self:flex-start; background:var(--bg-elevated); border:1px solid var(--border); border-bottom-left-radius:4px; }
.message .time { font-size:10px; opacity:0.7; margin-top:4px; text-align:right; }
.chat-input-area { padding:16px 24px; background:var(--bg-card); border-top:1px solid var(--border); display:flex; gap:12px; align-items:center; }
.chat-input-area input { flex:1; padding:12px 16px; border:1.5px solid var(--border); border-radius:var(--radius-full); font-size:14px; background:var(--bg-input); color:var(--text); }
.chat-input-area input:focus { outline:none; border-color:var(--primary); box-shadow:var(--glow); }

/* ===== WIDGETS ===== */
.widget-title { font-size:16px; font-weight:700; margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; }
.suggestion-item { display:flex; align-items:center; gap:12px; padding:10px 0; }
.suggestion-avatar { width:44px; height:44px; border-radius:var(--radius-full); object-fit:cover; }
.suggestion-name { font-size:14px; font-weight:600; }
.suggestion-mutual { font-size:12px; color:var(--text-light); }

/* ===== MODAL ===== */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(4px); z-index:200; display:flex; align-items:center; justify-content:center; animation:fadeIn 0.2s ease; }
.modal { background:var(--bg-card); border-radius:var(--radius-xl); border:1px solid var(--border); width:100%; max-width:560px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-xl); animation:slideUp 0.3s ease; }
.modal-header { padding:24px 28px 0; display:flex; align-items:center; justify-content:space-between; }
.modal-header h3 { font-size:20px; font-weight:700; }
.modal-close { width:32px; height:32px; border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--text-secondary); transition:var(--transition); }
.modal-close:hover { background:var(--bg-elevated); }
.modal-body { padding:24px 28px; }
.modal-footer { padding:16px 28px 24px; display:flex; justify-content:flex-end; gap:12px; }
.avatar-upload { display:flex; align-items:center; gap:20px; margin-bottom:24px; }
.avatar-upload-preview { width:80px; height:80px; border-radius:var(--radius-full); overflow:hidden; border:2px solid var(--primary); box-shadow:var(--glow); }
.textarea { width:100%; min-height:80px; padding:12px 16px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:14px; resize:vertical; background:var(--bg-input); color:var(--text); font-family:var(--font); transition:var(--transition); }
.textarea:focus { outline:none; border-color:var(--primary); box-shadow:var(--glow); }

/* Status */
.status-selector { display:flex; gap:8px; flex-wrap:wrap; }
.status-option { padding:6px 14px; border-radius:var(--radius-full); font-size:12px; font-weight:600; border:1.5px solid var(--border); cursor:pointer; transition:var(--transition); color:var(--text-secondary); }
.status-option:hover { border-color:var(--primary); }
.status-option.active { background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:var(--glow); }
.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.status-dot.online { background:var(--success); box-shadow:0 0 6px var(--success); }
.status-dot.away { background:var(--warning); }
.status-dot.busy { background:var(--danger); }
.status-dot.offline { background:var(--text-light); }

/* ===== ADMIN ===== */
.admin-layout { display:grid; grid-template-columns:1fr; gap:24px; }
.admin-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.admin-stat-card { padding:24px; text-align:center; }
.admin-stat-card .stat-icon { font-size:32px; margin-bottom:12px; }
.admin-stat-card .stat-number { font-size:32px; font-weight:800; color:var(--primary); text-shadow:var(--glow); }
.admin-stat-card .stat-label { font-size:13px; color:var(--text-secondary); margin-top:4px; }
.admin-table { width:100%; border-collapse:collapse; }
.admin-table th { text-align:left; padding:12px 16px; font-size:12px; font-weight:600; color:var(--text-light); text-transform:uppercase; letter-spacing:1px; border-bottom:1px solid var(--border); }
.admin-table td { padding:12px 16px; font-size:14px; border-bottom:1px solid var(--border); }
.admin-table tr:hover td { background:var(--bg-elevated); }
.admin-badge { padding:3px 10px; border-radius:var(--radius-full); font-size:11px; font-weight:600; }
.admin-badge.admin { background:rgba(0,191,255,0.15); color:var(--primary); border:1px solid rgba(0,191,255,0.3); }
.admin-badge.user { background:rgba(255,255,255,0.05); color:var(--text-secondary); border:1px solid var(--border); }
.admin-badge.active { background:rgba(0,230,118,0.15); color:var(--success); }
.admin-badge.banned { background:rgba(255,61,87,0.15); color:var(--danger); }
.admin-tabs { display:flex; gap:4px; background:var(--bg-elevated); border-radius:var(--radius-sm); padding:4px; margin-bottom:24px; flex-wrap:wrap; }
.admin-tab { padding:10px 20px; border-radius:6px; font-size:13px; font-weight:600; color:var(--text-secondary); cursor:pointer; transition:var(--transition); }
.admin-tab:hover { color:var(--text); }
.admin-tab.active { background:var(--bg-card); color:var(--primary); box-shadow:var(--shadow-sm); text-shadow:var(--glow); }
.admin-chart { height:200px; display:flex; align-items:flex-end; gap:8px; padding:20px 0 30px 0; }
.admin-bar { flex:1; background:linear-gradient(180deg,var(--primary),rgba(0,191,255,0.3)); border-radius:4px 4px 0 0; transition:height 0.6s ease; box-shadow:var(--glow); position:relative; min-width:20px; }
.admin-bar:hover { opacity:0.8; }
.admin-bar-label { position:absolute; bottom:-22px; left:50%; transform:translateX(-50%); font-size:10px; color:var(--text-light); white-space:nowrap; z-index:1; }

/* Settings */
.settings-section { margin-bottom:32px; }
.settings-section h3 { font-size:18px; font-weight:700; margin-bottom:16px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.setting-row { display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--border); }
.setting-info { flex:1; }
.setting-label { font-size:14px; font-weight:600; }
.setting-desc { font-size:12px; color:var(--text-secondary); margin-top:2px; }
.toggle { width:44px; height:24px; background:var(--border); border-radius:12px; position:relative; cursor:pointer; transition:var(--transition); }
.toggle.on { background:var(--primary); box-shadow:var(--glow); }
.toggle::after { content:''; position:absolute; width:18px; height:18px; background:#fff; border-radius:50%; top:3px; left:3px; transition:var(--transition); }
.toggle.on::after { left:23px; }

/* Role Badges */
.role-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:var(--radius-full); font-size:11px; font-weight:700; letter-spacing:0.02em; text-transform:uppercase; }
.role-badge.developer { background:linear-gradient(135deg,rgba(0,191,255,0.2),rgba(0,136,204,0.2)); color:#00BFFF; border:1px solid rgba(0,191,255,0.4); text-shadow:var(--glow); }
.role-badge.admin { background:rgba(255,179,0,0.15); color:#FFB300; border:1px solid rgba(255,179,0,0.3); }
.role-badge.moderator { background:rgba(0,230,118,0.15); color:#00E676; border:1px solid rgba(0,230,118,0.3); }
.role-badge.user { display:none; }
.role-badge-sm { padding:1px 8px; font-size:9px; vertical-align:middle; margin-left:6px; }

/* Theme Toggle */
.theme-toggle { width:40px; height:40px; border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--transition); color:var(--text-secondary); }
.theme-toggle:hover { background:var(--primary-50); color:var(--primary); }
.theme-toggle svg { width:20px; height:20px; }

/* DB Explorer */
.db-table-card { cursor:pointer; transition:var(--transition); }
.db-table-card:hover { border-color:var(--primary); box-shadow:var(--glow); }
.db-table-name { font-size:16px; font-weight:700; letter-spacing:-0.02em; }
.db-table-count { font-size:24px; font-weight:800; color:var(--primary); text-shadow:var(--glow); }
.db-col { font-size:12px; padding:4px 8px; background:var(--bg-elevated); border-radius:4px; font-family:'Courier New',monospace; }
.query-input { width:100%; padding:14px 18px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:13px; font-family:'Courier New',monospace; background:var(--bg-input); color:var(--text); resize:vertical; min-height:80px; }
.query-input:focus { outline:none; border-color:var(--primary); box-shadow:var(--glow); }
.query-results { overflow-x:auto; margin-top:16px; }
.query-results table { width:100%; border-collapse:collapse; font-size:12px; }
.query-results th { text-align:left; padding:8px 12px; background:var(--bg-elevated); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-light); border-bottom:1px solid var(--border); }
.query-results td { padding:8px 12px; border-bottom:1px solid var(--border); font-family:'Courier New',monospace; font-size:12px; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ===== WORKSPACE & TASKS ===== */
.ws-header { margin-bottom:24px; display:flex; justify-content:space-between; align-items:flex-end; border-bottom:1px solid var(--border); padding-bottom:16px; }
.ws-title { font-size:24px; font-weight:800; letter-spacing:-0.03em; text-shadow:var(--glow); }
.ws-subtitle { font-size:13px; color:var(--text-secondary); margin-top:4px; font-weight:500; }

.project-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:20px; }
.project-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px; position:relative; overflow:hidden; transition:var(--transition); cursor:pointer; }
.project-card:hover { border-color:var(--primary); box-shadow:var(--glow); transform:translateY(-2px); }
.project-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--proj-color, var(--primary)); }
.project-card-header { display:flex; justify-content:space-between; margin-bottom:12px; }
.project-card-title { font-size:16px; font-weight:700; color:var(--text); letter-spacing:-0.01em; }
.project-status { font-size:10px; font-weight:700; text-transform:uppercase; padding:2px 8px; border-radius:10px; background:rgba(255,255,255,0.05); }
.project-card-body { font-size:13px; color:var(--text-secondary); margin-bottom:16px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.project-card-footer { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--text-light); }

.kanban-board { display:flex; gap:16px; min-height:600px; overflow-x:auto; padding-bottom:24px; }
.kanban-column { flex:1; min-width:280px; background:var(--bg-elevated); border-radius:var(--radius-md); border:1px solid var(--border); display:flex; flex-direction:column; }
.kanban-column-header { padding:14px 16px; border-bottom:1px solid var(--border); font-weight:700; font-size:14px; display:flex; justify-content:space-between; align-items:center; letter-spacing:-0.01em; }
.kanban-count { font-size:11px; background:var(--bg-body); color:var(--text-secondary); padding:2px 8px; border-radius:10px; }
.kanban-column-body { padding:12px; flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:12px; min-height:100px; }

.task-card { background:var(--bg-card); border:1px solid var(--border); border-radius:6px; padding:14px; cursor:grab; transition:var(--transition); position:relative; }
.task-card:hover { border-color:rgba(0,191,255,0.5); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.task-card:active { cursor:grabbing; }
.task-card.dragging { opacity:0.5; transform:scale(0.98); }
.task-title { font-size:14px; font-weight:600; color:var(--text); margin-bottom:10px; line-height:1.3; }
.task-meta { display:flex; justify-content:space-between; align-items:center; margin-top:12px; }
.task-assignee { display:flex; align-items:center; gap:6px; }
.task-assignee img { width:24px; height:24px; border-radius:50%; border:1px solid var(--border); }
.task-assignee .no-avatar { width:24px; height:24px; border-radius:50%; background:var(--bg-elevated); display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--text-light); border:1px dashed var(--border); }

.priority-badge { font-size:10px; font-weight:700; font-family:'Courier New',monospace; padding:2px 6px; border-radius:4px; text-transform:uppercase; letter-spacing:0.5px; }
.priority-low { background:rgba(0,230,118,0.1); color:var(--success); border:1px solid rgba(0,230,118,0.3); }
.priority-medium { background:rgba(255,179,0,0.1); color:var(--warning); border:1px solid rgba(255,179,0,0.3); }
.priority-high { background:rgba(255,61,87,0.1); color:var(--danger); border:1px solid rgba(255,61,87,0.3); }
.priority-urgent { background:rgba(255,0,0,0.2); color:#ff5252; border:1px solid #ff5252; box-shadow:0 0 8px rgba(255,0,0,0.4); animation:neonPulse 2s infinite; }

.team-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:16px; }
.team-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px; display:flex; flex-direction:column; align-items:center; text-align:center; transition:var(--transition); }
.team-card:hover { border-color:var(--primary); }
.team-card img { width:64px; height:64px; border-radius:50%; margin-bottom:12px; border:2px solid var(--border); padding:2px; }
.team-name { font-size:15px; font-weight:700; margin-bottom:4px; }
.team-title { font-size:12px; color:var(--text-secondary); margin-bottom:12px; }
.team-dept { font-size:11px; padding:2px 8px; border-radius:10px; font-weight:600; background:rgba(255,255,255,0.05); border:1px solid var(--border); }

/* ===== ANIMATIONS ===== */
@keyframes fadeIn { from{opacity:0}to{opacity:1} }
@keyframes slideDown { from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)} }
@keyframes slideUp { from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)} }
@keyframes pulse { 0%,100%{transform:scale(1)}50%{transform:scale(1.05)} }
@keyframes float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)} }
@keyframes neonPulse { 0%,100%{filter:drop-shadow(0 0 8px rgba(0,191,255,0.6))}50%{filter:drop-shadow(0 0 16px rgba(0,191,255,0.9)) drop-shadow(0 0 30px rgba(0,191,255,0.4))} }
.animate-fadeIn { animation:fadeIn 0.5s ease; }
.animate-slideUp { animation:slideUp 0.4s ease; }
.animate-pulse { animation:pulse 2s ease infinite; }
.animate-float { animation:float 3s ease infinite; }
.animate-neon { animation:neonPulse 2s ease infinite; }

/* ===== UTILITY ===== */
.flex { display:flex; }.flex-col { flex-direction:column; }.items-center { align-items:center; }.justify-between { justify-content:space-between; }
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.text-center{text-align:center}.text-sm{font-size:13px}.text-xs{font-size:11px}.text-muted{color:var(--text-secondary)}
.fw-600{font-weight:600}.fw-700{font-weight:700}.w-full{width:100%}.hidden{display:none}

.page-btn { background:var(--bg-elevated); border:1px solid var(--border); color:var(--text); padding:6px 14px; border-radius:var(--radius-sm); font-size:12px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:6px; transition:var(--transition); }
.page-btn:hover:not(:disabled) { background:var(--primary-50); color:var(--primary); border-color:var(--primary-light); box-shadow: var(--glow); transform: translateY(-1px); }
.page-btn:disabled { opacity:0.3; cursor:not-allowed; }

.pagination-container { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:20px; padding-top:16px; border-top:1px solid var(--border-light); }
.page-info { font-size:12px; font-weight:600; color:var(--text-light); letter-spacing:0.5px; }

.page-header { margin-bottom:24px; }
.page-header h2 { font-size:24px; font-weight:800; letter-spacing:-0.03em; }
.page-header p { color:var(--text-secondary); font-size:14px; margin-top:4px; }
.tabs { display:flex; gap:4px; background:var(--bg-elevated); border-radius:var(--radius-sm); padding:4px; margin-bottom:20px; width:fit-content; }
.tab { padding:8px 18px; border-radius:6px; font-size:13px; font-weight:600; color:var(--text-secondary); cursor:pointer; transition:var(--transition); }
.tab:hover { color:var(--text); }
.tab.active { background:var(--bg-card); color:var(--primary); box-shadow:var(--shadow-sm); }

/* ===== RESPONSIVE UTILITIES ===== */
.responsive-grid-4 { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.responsive-grid-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.responsive-layout-main { display:grid; grid-template-columns:1fr 300px; gap:24px; }
.responsive-layout-ceo { display:grid; grid-template-columns:1fr 280px; gap:24px; }

/* ===== RESPONSIVE BREAKPOINTS ===== */
@media(max-width:1024px){
  .feed-layout{grid-template-columns:1fr}
  .feed-sidebar{display:none}
  .activities-grid{grid-template-columns:1fr}
  .admin-stats{grid-template-columns:repeat(2,1fr)}
  .responsive-layout-main { grid-template-columns:1fr; }
  .responsive-layout-ceo { grid-template-columns:1fr; }
  .responsive-grid-4 { grid-template-columns:repeat(2, 1fr); }
  .responsive-grid-3 { grid-template-columns:repeat(2, 1fr); }
}
@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main-area{margin-left:0}
  .content{padding:16px}
  .topbar{padding:0 16px}
  .auth-page{flex-direction:column}
  .auth-left{padding:32px;min-height:auto}
  .chat-layout{grid-template-columns:1fr}
  .events-grid{grid-template-columns:1fr}
  .marketplace-grid{grid-template-columns:1fr}
  .profile-info-section{flex-direction:column;align-items:center;text-align:center}
  .admin-stats{grid-template-columns:1fr}
  .responsive-grid-4 { grid-template-columns:1fr; }
  .responsive-grid-3 { grid-template-columns:1fr; }
  .ws-header { flex-direction:column; align-items:flex-start; gap:16px; }
  .company-card-content { flex-direction:column; align-items:center; text-align:center; }
  .company-card-content > div { width:100%; display:flex; flex-direction:column; align-items:center; }
  .company-card-actions { justify-content:center; width:100%; margin-top:12px; }
}
.icon-neon { color: var(--primary); text-shadow: var(--shadow-neon); font-size: 1.25em; vertical-align: middle; }
.twitter-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 0; max-width: 1000px; margin: 0 auto; min-height: 100vh; background: var(--bg-card); border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.feed-column { width: 100%; min-width: 0; border-right: 1px solid var(--border); padding-bottom: 100px; }
.sidebar-column { position: sticky; top: 0; height: 100vh; padding: 24px; overflow-y: auto; }
.sticky-header { position: sticky; top: 0; z-index: 10; background: rgba(5, 5, 10, 0.85); backdrop-filter: blur(12px); padding: 16px 20px; border-bottom: 1px solid var(--border); margin: 0; }
.ws-title { font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
.ws-subtitle { font-size: 13px; color: var(--text-light); }
.post-input-card.twitter-style { border: none; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; padding: 16px 20px; background: transparent; }
.post-input-card.twitter-style .post-textarea { font-size: 18px; color: var(--text); padding-top: 8px; border: none; resize: none; background: transparent; }
.post-input-card.twitter-style .post-textarea:focus { outline: none; }
.post-card.twitter-style { border: none; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; padding: 16px 20px; cursor: pointer; transition: background 0.2s; margin-bottom: 0; background: transparent; display: block; width: 100%; }
.post-card.twitter-style:hover { background: rgba(255, 255, 255, 0.03); }
@media (max-width: 900px) { .twitter-layout { grid-template-columns: 1fr; border: none; background: transparent; } .hide-mobile { display: none; } .feed-column { border-right: none; } }