*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Inter',sans-serif;background:#F5F7FA;color:#1a2332;height:100vh;display:flex;flex-direction:column;overflow:hidden;}
:root{--primary:#0059A5;--primary-dark:#004080;--secondary:#6ACCEB;--secondary-light:#e8f6fd;--white:#fff;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--shadow:0 1px 3px rgba(0,0,0,.08);--shadow-md:0 4px 6px -1px rgba(0,0,0,.08);--shadow-lg:0 10px 25px -3px rgba(0,0,0,.08);--radius:12px;--radius-sm:8px;--green:#10b981;--amber:#f59e0b;--red:#ef4444;--purple:#8b5cf6;}

/* Navbar */
.navbar{background:var(--white);border-bottom:1px solid var(--gray-200);padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;z-index:100;}
.nav-left{display:flex;align-items:center;gap:16px;}
.nav-logo{height:32px;}
.nav-sep{width:1px;height:24px;background:var(--gray-200);}
.nav-title{font-size:14px;font-weight:600;color:var(--primary);}
.nav-right{display:flex;align-items:center;gap:12px;}
.nav-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#2d7ed2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700;}
.nav-user-info{display:flex;flex-direction:column;}
.nav-user-name{font-size:13px;font-weight:600;color:var(--gray-800);}
.nav-user-role{font-size:11px;color:var(--gray-400);}
.nav-notif{position:relative;width:36px;height:36px;border-radius:8px;border:1px solid var(--gray-200);background:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--gray-500);}
.nav-notif-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;background:var(--red);border-radius:50%;border:2px solid var(--white);}

/* Layout */
.layout{display:flex;flex:1;overflow:hidden;}

/* Left Sidebar */
.left-sidebar{width:280px;background:var(--white);border-right:1px solid var(--gray-200);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;}
.ls-header{padding:16px 20px;border-bottom:1px solid var(--gray-200);}
.ls-header h3{font-size:15px;font-weight:700;color:var(--gray-800);margin-bottom:12px;}
.ls-search{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--radius-sm);background:var(--gray-50);border:1.5px solid var(--gray-200);}
.ls-search:focus-within{border-color:var(--primary);}
.ls-search svg{width:16px;height:16px;color:var(--gray-400);flex-shrink:0;}
.ls-search input{border:none;outline:none;background:transparent;font-size:13px;font-family:'Inter',sans-serif;flex:1;color:var(--gray-700);}
.ls-search input::placeholder{color:var(--gray-400);}
.ls-section-title{font-size:11px;font-weight:700;color:var(--gray-500);text-transform:uppercase;letter-spacing:0.5px;padding:16px 20px 8px;}
.ls-list{flex:1;overflow-y:auto;}
.ls-item{display:flex;align-items:center;gap:12px;padding:12px 20px;cursor:pointer;transition:background .15s;border-left:3px solid transparent;}
.ls-item:hover{background:var(--gray-50);}
.ls-item.active{background:rgba(0,89,165,.04);border-left-color:var(--primary);}
.ls-item-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.ls-item-icon.blue{background:rgba(0,89,165,.1);}
.ls-item-icon.green{background:rgba(16,185,129,.1);}
.ls-item-icon.purple{background:rgba(139,92,246,.1);}
.ls-item-icon.amber{background:rgba(245,158,11,.1);}
.ls-item-icon.red{background:rgba(239,68,68,.1);}
.ls-item-content{flex:1;min-width:0;}
.ls-item-name{font-size:13px;font-weight:600;color:var(--gray-800);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ls-item-meta{font-size:11px;color:var(--gray-500);}
.ls-item-badge{min-width:20px;height:20px;border-radius:50%;background:var(--primary);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ls-divider{height:1px;background:var(--gray-200);margin:4px 20px;}
.ls-discover{display:flex;align-items:center;gap:8px;padding:12px 20px;cursor:pointer;color:var(--primary);font-size:13px;font-weight:600;transition:background .15s;}
.ls-discover:hover{background:rgba(0,89,165,.04);}
.ls-discover svg{width:18px;height:18px;}

/* Main Feed */
.main-feed{flex:1;display:flex;flex-direction:column;overflow:hidden;}

/* Group Header */
.group-header{background:var(--white);border-bottom:1px solid var(--gray-200);padding:20px 24px;}
.group-header-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.group-header-left{display:flex;align-items:center;gap:16px;}
.group-icon-lg{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;}
.group-icon-lg.green{background:rgba(16,185,129,.12);}
.group-header-info h2{font-size:18px;font-weight:700;color:var(--gray-800);margin-bottom:2px;}
.group-header-info p{font-size:13px;color:var(--gray-500);}
.group-header-actions{display:flex;gap:8px;}
.gh-btn{padding:8px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;border:1.5px solid var(--gray-200);background:var(--white);color:var(--gray-700);transition:all .15s;font-family:'Inter',sans-serif;}
.gh-btn:hover{border-color:var(--primary);color:var(--primary);}
.gh-btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);}
.gh-btn-primary:hover{background:var(--primary-dark);}
.group-tabs{display:flex;gap:24px;}
.group-tab{padding:8px 0;font-size:13px;font-weight:500;color:var(--gray-500);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;}
.group-tab:hover{color:var(--primary);}
.group-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600;}

/* Feed Content */
.feed-scroll{flex:1;overflow-y:auto;padding:24px;}
.feed-scroll::-webkit-scrollbar{width:6px;}
.feed-scroll::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:10px;}

/* Compose Box */
.compose-box{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:16px 20px;margin-bottom:20px;display:flex;align-items:center;gap:12px;}
.compose-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#6ACCEB,#4db8e8);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;flex-shrink:0;}
.compose-input{flex:1;padding:10px 16px;border-radius:24px;background:var(--gray-50);border:1.5px solid var(--gray-200);font-size:13px;font-family:'Inter',sans-serif;color:var(--gray-700);outline:none;transition:border-color .2s;}
.compose-input:focus{border-color:var(--primary);}
.compose-input::placeholder{color:var(--gray-400);}

/* Post Cards */
.post-card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-md);margin-bottom:16px;overflow:hidden;}
.post-header{display:flex;align-items:center;gap:12px;padding:16px 20px 12px;}
.post-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700;flex-shrink:0;}
.post-author-info{flex:1;}
.post-author-name{font-size:14px;font-weight:600;color:var(--gray-800);display:flex;align-items:center;gap:6px;}
.post-author-role{font-size:12px;color:var(--gray-500);}
.coach-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:12px;background:rgba(16,185,129,.1);color:var(--green);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;}
.post-time{font-size:11px;color:var(--gray-400);flex-shrink:0;}
.post-body{padding:0 20px 16px;font-size:14px;line-height:1.6;color:var(--gray-700);}
.post-attachment{margin:0 20px 16px;padding:14px 16px;background:var(--gray-50);border-radius:var(--radius-sm);border:1px solid var(--gray-200);display:flex;align-items:center;gap:12px;cursor:pointer;transition:background .15s;}
.post-attachment:hover{background:var(--gray-100);}
.attachment-icon{width:36px;height:36px;border-radius:8px;background:rgba(0,89,165,.1);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.attachment-info{flex:1;}
.attachment-name{font-size:13px;font-weight:600;color:var(--gray-800);}
.attachment-meta{font-size:11px;color:var(--gray-500);}
.post-actions{display:flex;border-top:1px solid var(--gray-200);padding:0 8px;}
.post-action{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;font-size:13px;color:var(--gray-500);cursor:pointer;transition:all .15s;font-weight:500;border-radius:0;}
.post-action:hover{background:var(--gray-50);color:var(--primary);}
.post-action svg{width:16px;height:16px;}
.post-action.liked{color:var(--primary);font-weight:600;}

/* Pinned Post */
.post-card.pinned{border-left:3px solid var(--amber);}
.pin-label{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--amber);padding:8px 20px 0;text-transform:uppercase;letter-spacing:0.3px;}

/* Right Sidebar */
.right-sidebar{width:300px;background:var(--white);border-left:1px solid var(--gray-200);overflow-y:auto;flex-shrink:0;}
.right-sidebar::-webkit-scrollbar{width:4px;}
.right-sidebar::-webkit-scrollbar-thumb{background:var(--gray-200);border-radius:10px;}
.rs-section{padding:20px;border-bottom:1px solid var(--gray-200);}
.rs-section:last-child{border-bottom:none;}
.rs-title{font-size:12px;font-weight:700;color:var(--gray-500);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:16px;}

/* About */
.rs-about-desc{font-size:13px;color:var(--gray-600);line-height:1.6;margin-bottom:16px;}
.rs-stat-row{display:flex;gap:16px;}
.rs-stat{flex:1;text-align:center;padding:12px;background:var(--gray-50);border-radius:var(--radius-sm);}
.rs-stat-value{font-size:20px;font-weight:700;color:var(--primary);}
.rs-stat-label{font-size:11px;color:var(--gray-500);margin-top:2px;}

/* Success Coach */
.coach-card{display:flex;align-items:center;gap:12px;padding:12px;background:var(--gray-50);border-radius:var(--radius-sm);cursor:pointer;transition:background .15s;}
.coach-card:hover{background:var(--gray-100);}
.coach-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;flex-shrink:0;background:linear-gradient(135deg,var(--green),#059669);}
.coach-info{flex:1;}
.coach-name{font-size:13px;font-weight:600;color:var(--gray-800);margin-bottom:2px;}
.coach-title{font-size:12px;color:var(--gray-500);}
.coach-status{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--green);font-weight:500;margin-top:4px;}
.coach-status-dot{width:6px;height:6px;border-radius:50%;background:var(--green);}

/* Members */
.member-row{display:flex;align-items:center;gap:10px;padding:8px 0;cursor:pointer;transition:opacity .15s;}
.member-row:hover{opacity:.8;}
.member-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;flex-shrink:0;}
.member-name{font-size:13px;color:var(--gray-700);font-weight:500;}
.member-role-tag{font-size:10px;padding:2px 6px;border-radius:4px;font-weight:600;margin-left:auto;flex-shrink:0;}
.tag-mentor{background:rgba(0,89,165,.1);color:var(--primary);}
.tag-student{background:rgba(139,92,246,.1);color:var(--purple);}
.tag-coach{background:rgba(16,185,129,.1);color:var(--green);}
.see-all-link{display:block;text-align:center;font-size:13px;font-weight:600;color:var(--primary);padding:10px;cursor:pointer;transition:opacity .15s;margin-top:8px;}
.see-all-link:hover{opacity:.8;}

/* Upcoming Events */
.event-mini{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--gray-100);}
.event-mini:last-child{border-bottom:none;}
.event-date-box{width:44px;height:44px;border-radius:var(--radius-sm);background:rgba(0,89,165,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;}
.event-date-month{font-size:9px;font-weight:700;color:var(--primary);text-transform:uppercase;}
.event-date-day{font-size:16px;font-weight:700;color:var(--primary);}
.event-mini-info{flex:1;}
.event-mini-title{font-size:13px;font-weight:600;color:var(--gray-800);margin-bottom:2px;}
.event-mini-time{font-size:11px;color:var(--gray-500);}

/* Discover Overlay */
.discover-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:500;display:none;align-items:center;justify-content:center;}
.discover-overlay.show{display:flex;}
.discover-modal{background:var(--white);border-radius:16px;width:680px;max-height:80vh;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.2);display:flex;flex-direction:column;}
.dm-header{padding:20px 24px;border-bottom:1px solid var(--gray-200);display:flex;align-items:center;justify-content:space-between;}
.dm-header h3{font-size:16px;font-weight:700;color:var(--gray-800);}
.dm-close{background:none;border:none;font-size:20px;color:var(--gray-500);cursor:pointer;}
.dm-body{flex:1;overflow-y:auto;padding:24px;}
.discover-card{display:flex;align-items:center;gap:16px;padding:16px;border-radius:var(--radius);border:1.5px solid var(--gray-200);margin-bottom:12px;transition:all .15s;cursor:pointer;}
.discover-card:hover{border-color:var(--primary);box-shadow:var(--shadow-md);}
.discover-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.discover-info{flex:1;}
.discover-name{font-size:14px;font-weight:600;color:var(--gray-800);margin-bottom:2px;}
.discover-desc{font-size:12px;color:var(--gray-500);line-height:1.4;}
.discover-meta-row{display:flex;gap:12px;margin-top:6px;}
.discover-meta{font-size:11px;color:var(--gray-400);display:flex;align-items:center;gap:4px;}
.discover-join-btn{padding:8px 20px;border-radius:20px;background:var(--primary);color:#fff;font-size:12px;font-weight:600;border:none;cursor:pointer;transition:background .15s;font-family:'Inter',sans-serif;flex-shrink:0;}
.discover-join-btn:hover{background:var(--primary-dark);}
.discover-join-btn.joined{background:var(--gray-100);color:var(--gray-500);cursor:default;}

/* Responsive */
@media(max-width:1200px){.right-sidebar{display:none;}}
@media(max-width:768px){.left-sidebar{display:none;}}