.header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:16px 24px;box-shadow:0 2px 8px #00000026;display:flex;align-items:center;justify-content:space-between;gap:16px}.header-title{margin:0;font-size:28px}.add-blog-btn{background:linear-gradient(135deg,#4facfe,#2563eb);color:#fff;border:none;border-radius:8px;padding:10px 20px;font-size:16px;font-weight:600;letter-spacing:.3px;cursor:pointer;box-shadow:0 4px 12px #2563eb66;transition:transform .15s ease,box-shadow .2s ease}.add-blog-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #2563eb8c}.add-blog-btn:active{transform:translateY(0) scale(.98)}.add-blog-btn:focus-visible{outline:2px solid #ffffff;outline-offset:2px}@keyframes blog-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.blog{flex:1;min-width:0;background:#fff;border-radius:12px;box-shadow:0 4px 16px #00000014;padding:24px;display:flex;flex-direction:column;animation:blog-fade-in .3s ease}.blog-title{width:fit-content;font-size:24px;margin:0 0 8px;color:#33334d;border-left:4px solid #667eea;padding-left:10px}.blog-detail{margin:0;font-size:16px;line-height:1.6;color:#555570}.blog-list{width:300px;flex:0 0 300px;background:#fff;border-radius:12px;box-shadow:0 4px 16px #00000014;padding:16px;display:flex;flex-direction:column;gap:8px}.blog-list-title{margin:0 0 8px;font-size:18px;letter-spacing:.4px;color:#4a4a68;padding-bottom:8px;border-bottom:2px solid #667eea}.blog-list-items{display:flex;flex-direction:column;gap:8px}.list-item{position:relative;height:40px;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:8px;background:#f4f5fb;color:#33334d;font-size:15px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .15s ease}.list-item:before{content:"";flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#c3c8e8;transition:background .2s ease,box-shadow .2s ease}.list-item:hover{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;transform:translate(4px)}.list-item:hover:before{background:#fff;box-shadow:0 0 6px #fffc}.list-item:active{transform:translate(4px) scale(.98)}.list-item:focus-visible{outline:2px solid #667eea;outline-offset:2px}.list-item--selected{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:600;box-shadow:0 4px 12px #667eea59}.list-item--selected:before{background:#fff;box-shadow:0 0 8px #ffffffe6}.main{flex:1;width:100%;display:flex;flex-direction:row;align-items:stretch;justify-content:flex-start;gap:16px;text-align:left;padding:16px;background:#f5f6fa}@keyframes overlay-fade-in{0%{opacity:0}to{opacity:1}}@keyframes modal-pop-in{0%{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-overlay{position:fixed;inset:0;z-index:1000;background:#1e1e3c8c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px;animation:overlay-fade-in .2s ease}.blog-form{position:relative;width:460px;max-width:100%;background:#fff;border-radius:16px;box-shadow:0 20px 60px #00000040;padding:28px;animation:modal-pop-in .25s ease}.visible-count{position:absolute;top:12px;left:12px;min-width:24px;padding:4px 10px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:#f0f1f7;color:#555570;font-size:13px;font-weight:600;line-height:1}.close-btn{position:absolute;top:12px;right:12px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:#f0f1f7;color:#555570;font-size:16px;line-height:1;cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease}.close-btn:hover{background:#667eea;color:#fff;transform:rotate(90deg)}.close-btn:focus-visible{outline:2px solid #667eea;outline-offset:2px}.blog-form-title{margin:0 0 20px;font-size:24px;color:#33334d;padding-left:10px;border-left:4px solid #4facfe}.blog-form-fields{display:flex;flex-direction:column;gap:10px}.blog-form-label{font-size:14px;font-weight:600;color:#4a4a68;letter-spacing:.3px}.blog-form-input,.blog-form-textarea{width:100%;border:1px solid #d8dbe8;border-radius:8px;padding:10px 12px;font-size:15px;font-family:inherit;color:#33334d;background:#f9f9fd;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}.blog-form-input::placeholder,.blog-form-textarea::placeholder{color:#9a9ab0}.blog-form-input:focus,.blog-form-textarea:focus{outline:none;border-color:#4facfe;background:#fff;box-shadow:0 0 0 3px #4facfe33}.blog-form-textarea{resize:vertical;min-height:90px}.blog-form-submit{margin-top:8px;align-self:flex-end;background:linear-gradient(135deg,#4facfe,#2563eb);color:#fff;border:none;border-radius:8px;padding:10px 24px;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 4px 12px #2563eb59;transition:transform .15s ease,box-shadow .2s ease}.blog-form-submit:hover{transform:translateY(-2px);box-shadow:0 6px 16px #2563eb80}.blog-form-submit:active{transform:translateY(0) scale(.98)}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}.App{display:flex;flex-direction:column;min-height:100vh}