html{margin:0;padding:0;width:100%;height:100%;overflow:hidden}body{margin:0;padding:0;width:100%;height:100%;min-height:100vh;overflow:hidden}#app.blog-dashboard{width:100%;height:100%;min-height:100vh;overflow:hidden;background:#ecf0f4;font-family:Inter,sans-serif}.blog-dashboard .dashboard-wrap{display:flex;flex-direction:column;width:100%;height:100%;min-height:100vh;overflow:hidden}.blog-dashboard .dashboard-header{height:56px;min-height:56px;background:#202342;color:#fff;flex-shrink:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;box-shadow:0 1px 4px #00000026}.blog-dashboard .header-left{display:flex;align-items:center;gap:2rem}.blog-dashboard .header-left .brand{font-weight:700;font-size:1.2rem;color:#fff}.blog-dashboard .nav-horizontal{display:flex;align-items:center;gap:0}.blog-dashboard .nav-horizontal a{padding:.5rem 1rem;color:#ffffffd9;text-decoration:none;border-radius:6px;transition:background .15s,color .15s}.blog-dashboard .nav-horizontal a:hover{background:rgba(255,255,255,.1);color:#fff}.blog-dashboard .nav-horizontal a.router-link-active{background:rgba(255,255,255,.15);color:#fff}.blog-dashboard .nav-dropdown{position:relative}.blog-dashboard .nav-dropdown-btn{padding:.5rem 1rem;color:#ffffffd9;background:none;border:none;border-radius:6px;cursor:pointer;font-size:1rem;display:flex;align-items:center;gap:.25rem}.blog-dashboard .nav-dropdown-btn:hover,.blog-dashboard .nav-dropdown-btn.active{background:rgba(255,255,255,.1);color:#fff}.blog-dashboard .nav-dropdown-arrow{font-size:.7rem;opacity:.8}.blog-dashboard .nav-dropdown-menu{position:absolute;top:100%;left:0;margin-top:.25rem;min-width:220px;max-height:70vh;background:#fff;border-radius:6px;box-shadow:0 4px 12px #00000026;padding:.25rem;display:none;overflow-y:auto;z-index:200}.blog-dashboard .nav-dropdown.open .nav-dropdown-menu{display:block}.blog-dashboard .nav-dropdown-menu a{display:block;padding:.6rem 1rem;color:#374151;border-radius:4px}.blog-dashboard .nav-dropdown-menu a:hover{background:#f3f4f6;color:#111}.blog-dashboard .header-right{display:flex;align-items:center}.blog-dashboard .btn-logout{margin-right:.75rem;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;border-radius:6px;padding:.35rem .7rem;cursor:pointer}.blog-dashboard .btn-logout:hover{background:rgba(255,255,255,.1)}.blog-dashboard .time-badge{margin-right:.75rem;display:inline-flex;align-items:center;padding:.35rem .6rem;border-radius:6px;background:rgba(255,255,255,.14);color:#e5e7eb;font-size:.82rem}.blog-dashboard .unread-menu-btn{margin-right:.75rem;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;border-radius:6px;padding:.35rem .6rem;cursor:default}.blog-dashboard .unread-menu-btn .badge{background:#dc2626;color:#fff;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;font-size:.72rem}.blog-dashboard .position-relative{position:relative}.blog-dashboard .position-absolute{position:absolute}.blog-dashboard .top-0{top:0}.blog-dashboard .start-100{left:100%}.blog-dashboard .translate-middle{transform:translate(-50%,-50%)}.blog-dashboard .rounded-pill{border-radius:999px}.blog-dashboard .bg-danger{background:#dc2626}.blog-dashboard .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.blog-dashboard .reply-badge{margin-right:.75rem;display:inline-flex;align-items:center;gap:.3rem;padding:.35rem .6rem;border-radius:6px;background:rgba(255,255,255,.14);color:#e5e7eb;font-size:.82rem}.blog-dashboard .dashboard-main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}.blog-dashboard .dashboard-content{flex:1;padding:1.5rem;overflow:auto;min-height:0}.blog-dashboard .api-status{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .75rem;border-radius:6px;font-size:.85rem}.blog-dashboard .api-status.ok{background:rgba(40,199,111,.25);color:#6ee7b7}.blog-dashboard .api-status.error{background:rgba(234,84,85,.25);color:#fca5a5}.blog-dashboard .api-status .dot{width:6px;height:6px;border-radius:50%;background:currentColor}