:root{--c-primary:#1E4E8C;--c-bg:#f0f2f5;--c-white:#fff;--c-gray:#e4e6eb;--c-text:#050505;--c-muted:#65676b;--radius:8px;}
*{box-sizing:border-box;margin:0;padding:0;}
body.cocomi-page{background:var(--c-bg);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--c-text);}
#cocomi-root{max-width:1020px;margin:0 auto;padding:16px;}
.cocomi-card{background:var(--c-white);border-radius:var(--radius);box-shadow:0 1px 2px rgba(0,0,0,.1);padding:16px;margin-bottom:12px;}
.cocomi-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:none;border-radius:6px;cursor:pointer;font-size:15px;font-weight:600;transition:background .15s;}
.cocomi-btn-primary{background:var(--c-primary);color:#fff;}.cocomi-btn-primary:hover{background:#1a4070;}
.cocomi-btn-ghost{background:transparent;color:var(--c-primary);}.cocomi-btn-ghost:hover{background:var(--c-gray);}
.cocomi-input{width:100%;padding:10px 12px;border:1px solid #ccd0d5;border-radius:6px;font-size:16px;background:var(--c-white);}
.cocomi-input:focus{outline:none;border-color:var(--c-primary);}
.cocomi-avatar{border-radius:50%;object-fit:cover;}
.cocomi-post-box{display:flex;gap:10px;align-items:flex-start;}
.cocomi-post-content{flex:1;}
.cocomi-actions{display:flex;gap:2px;margin-top:4px;}
.cocomi-action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border:none;background:none;border-radius:6px;color:var(--c-muted);font-size:15px;font-weight:600;cursor:pointer;}
.cocomi-action-btn:hover{background:var(--c-gray);}
.cocomi-action-btn.liked{color:#e2401c;}
.cocomi-video-card{background:#000;border-radius:8px;overflow:hidden;margin:8px 0;position:relative;cursor:pointer;}
.cocomi-video-card img{width:100%;display:block;opacity:.85;}
.cocomi-video-card .play-btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:48px;}
.cocomi-nav{position:fixed;top:0;left:0;bottom:0;width:220px;background:var(--c-white);border-right:1px solid var(--c-gray);display:flex;flex-direction:column;z-index:100;overflow-y:auto;}
.cocomi-nav-header{display:flex;align-items:center;gap:11px;padding:18px 16px 14px;border-bottom:1px solid var(--c-gray);margin-bottom:6px;}
.cocomi-nav-avatar{width:42px;height:42px;border-radius:50%;background:var(--c-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;flex-shrink:0;overflow:hidden;}
.cocomi-nav-uname{font-weight:700;font-size:13px;color:var(--c-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cocomi-nav-handle{font-size:11px;color:var(--c-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cocomi-nav-item{display:flex;align-items:center;gap:13px;padding:11px 14px;margin:2px 8px;border-radius:12px;color:var(--c-muted);text-decoration:none;font-size:15px;font-weight:500;transition:background .15s,color .15s;}
.cocomi-nav-item:hover{background:rgba(30,78,140,.06);color:var(--c-primary);}
.cocomi-nav-item.active{background:rgba(30,78,140,.1);color:var(--c-primary);font-weight:700;}
.cocomi-nav-icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;flex-shrink:0;}
.cocomi-nav-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.cocomi-nav-item.active .cocomi-nav-icon svg{stroke-width:2.2;}
.cocomi-nav-sep{height:1px;background:var(--c-gray);margin:8px 16px;}
.cocomi-badge{background:#e2401c;color:#fff;border-radius:10px;font-size:11px;padding:1px 5px;min-width:18px;text-align:center;}
.cocomi-spinner{text-align:center;padding:40px;color:var(--c-muted);}
.cocomi-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:200;}
.cocomi-modal-box{background:#fff;border-radius:12px;padding:24px;max-width:720px;width:90%;max-height:80vh;overflow-y:auto;}
.cocomi-toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:10px 20px;border-radius:20px;z-index:300;font-size:14px;pointer-events:none;}

#cocomi-root,.cocomi-root{position:fixed;top:0;left:0;right:0;bottom:0;padding-left:220px;padding-right:280px;overflow-y:auto;background:var(--c-bg);z-index:50;box-sizing:border-box;}
.cocomi-right-sidebar{position:fixed;top:0;right:0;bottom:0;width:280px;background:var(--c-white);border-left:1px solid var(--c-gray);padding:20px 16px;overflow-y:auto;z-index:60;}
.cocomi-sidebar-user{display:flex;align-items:center;gap:10px;padding:8px 0;cursor:pointer;border-radius:8px;}
.cocomi-sidebar-user:hover{background:rgba(0,0,0,.04);}
.cocomi-sidebar-user img{width:38px;height:38px;border-radius:50%;object-fit:cover;}
.cocomi-sidebar-user-name{font-weight:600;font-size:14px;color:var(--c-text);margin:0;}
.cocomi-sidebar-user-handle{font-size:12px;color:var(--c-muted);margin:0;}
.cocomi-nav-logout{color:var(--c-muted);}
.cocomi-nav-logout:hover{background:rgba(192,57,43,.07)!important;color:#c0392b!important;}