:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#213547;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh;background-color:#f5f5f5}h1{font-size:3.2em;line-height:1.1}.comments-section{border-top:1px solid #e1e5e9;margin-top:1rem}.comments-header{padding:.75rem 0}.comments-toggle{background:none;border:none;color:#6b7280;cursor:pointer;display:flex;align-items:center;gap:.5rem;font-size:.9rem;padding:.5rem 0;transition:color .2s}.comments-toggle:hover{color:#374151}.toggle-icon{font-size:.8rem;transition:transform .2s}.comments-content{padding:1rem 0}.error-message{background-color:#fee2e2;border:1px solid #fecaca;border-radius:.375rem;color:#dc2626;font-size:.875rem;margin-bottom:1rem;padding:.75rem}.add-comment-section{margin-bottom:1.5rem}.show-add-form-btn{background-color:#f3f4f6;border:1px solid #d1d5db;border-radius:.375rem;color:#374151;cursor:pointer;font-size:.875rem;padding:.625rem 1rem;transition:all .2s}.show-add-form-btn:hover{background-color:#e5e7eb;border-color:#9ca3af}.add-comment-form{background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:.5rem;padding:1rem}.add-comment-form .form-group{margin-bottom:.75rem}.add-comment-form .form-group:last-of-type{margin-bottom:1rem}.add-comment-form input,.add-comment-form textarea{border:1px solid #d1d5db;border-radius:.375rem;font-size:.875rem;padding:.625rem;width:100%;transition:border-color .2s,box-shadow .2s}.add-comment-form input:focus,.add-comment-form textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a;outline:none}.add-comment-form input:disabled,.add-comment-form textarea:disabled{background-color:#f3f4f6;color:#6b7280;cursor:not-allowed}.form-actions{display:flex;gap:.75rem;justify-content:flex-end}.cancel-btn,.submit-btn{border:1px solid;border-radius:.375rem;cursor:pointer;font-size:.875rem;font-weight:500;padding:.5rem 1rem;transition:all .2s}.cancel-btn{background-color:#fff;border-color:#d1d5db;color:#374151}.cancel-btn:hover:not(:disabled){background-color:#f9fafb;border-color:#9ca3af}.submit-btn{background-color:#3b82f6;border-color:#3b82f6;color:#fff}.submit-btn:hover:not(:disabled){background-color:#2563eb;border-color:#2563eb}.submit-btn:disabled,.cancel-btn:disabled{cursor:not-allowed;opacity:.5}.comments-list{max-height:400px;overflow-y:auto}.loading,.no-comments{color:#6b7280;font-size:.875rem;font-style:italic;padding:1rem;text-align:center}.comment-item{border:1px solid #e5e7eb;border-radius:.5rem;margin-bottom:.75rem;padding:1rem;background-color:#fafafa;transition:all .2s}.comment-item:hover{border-color:#d1d5db;box-shadow:0 1px 3px #0000001a}.comment-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:.75rem}.comment-header-left{display:flex;align-items:center;gap:.75rem}.comment-header .delete-comment-btn{background:none;border:none;color:#dc2626;cursor:pointer;font-size:.875rem;opacity:.6;padding:.25rem;transition:all .2s}.comment-header .delete-comment-btn:hover:not(:disabled){opacity:1;transform:scale(1.1)}.comment-header .delete-comment-btn:disabled{cursor:not-allowed;opacity:.3}.comment-author{color:#374151;font-size:.875rem;font-weight:600}.comment-date{color:#6b7280;font-size:.75rem}.comment-text{color:#374151;font-size:.875rem;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}.load-more-btn{background-color:#f3f4f6;border:1px solid #d1d5db;border-radius:.375rem;color:#374151;cursor:pointer;font-size:.875rem;margin-top:.75rem;padding:.5rem 1rem;transition:all .2s;width:100%}.load-more-btn:hover{background-color:#e5e7eb;border-color:#9ca3af}.reactions-section{margin:.75rem 0}.reaction-error{background-color:#fee2e2;border:1px solid #fecaca;border-radius:.375rem;color:#dc2626;font-size:.75rem;margin-bottom:.5rem;padding:.5rem}.reactions-container{display:flex;gap:.5rem;margin-bottom:.5rem}.reaction-btn{align-items:center;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:1.5rem;cursor:pointer;display:flex;font-size:.875rem;gap:.375rem;padding:.375rem .75rem;position:relative;transition:all .2s}.reaction-btn:hover:not(:disabled){background-color:#f3f4f6;border-color:#d1d5db;transform:translateY(-1px)}.reaction-btn:active:not(:disabled){transform:translateY(0)}.reaction-btn:disabled{cursor:not-allowed;opacity:.6}.reaction-btn.reaction-off{background-color:#f9fafb;border-color:#e5e7eb;color:#6b7280;opacity:.7}.reaction-btn.reaction-off:hover:not(:disabled){background-color:#f3f4f6;border-color:#d1d5db;opacity:1;transform:translateY(-1px)}.reaction-btn.reaction-on{background-color:#3b82f6;border-color:#3b82f6;color:#fff;transform:scale(1.05);box-shadow:0 2px 4px #3b82f64d;opacity:1}.reaction-btn.reaction-on:hover:not(:disabled){background-color:#2563eb;border-color:#2563eb;transform:scale(1.05) translateY(-1px);box-shadow:0 4px 8px #2563eb66}.reaction-btn.reaction-on .reaction-emoji{animation:pulse .3s ease-out}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.reaction-emoji{font-size:1rem;line-height:1}.reaction-count{color:#374151;font-size:.875rem;font-weight:500;min-width:1rem;text-align:center}.reaction-btn.has-reactions .reaction-count{color:#1d4ed8;font-weight:600}.reaction-loading{animation:spin 1s linear infinite;font-size:.75rem;position:absolute;right:.25rem;top:.25rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.reactions-summary{margin-top:.75rem;padding-top:.75rem;border-top:1px solid #e5e7eb}.reaction-totals{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:.5rem}.reaction-total{color:#374151;font-size:.875rem;font-weight:500;display:flex;align-items:center;gap:.25rem}.total-reactions{color:#6b7280;font-size:.75rem;font-style:italic}@media (max-width: 640px){.reactions-container{gap:.375rem}.reaction-btn{font-size:.8rem;gap:.25rem;padding:.25rem .5rem}.reaction-emoji{font-size:.875rem}.reaction-count{font-size:.8rem}}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}input,textarea{color:#1f2937!important;background-color:#fff!important}.app{min-height:100vh;padding:20px}.container{max-width:600px;margin:0 auto;background:#fff;border-radius:12px;padding:32px;box-shadow:0 2px 10px #0000001a}h1{margin:0 0 32px;font-size:28px;font-weight:600;color:#1a1a1a}h2{margin:0 0 20px;font-size:20px;font-weight:600;color:#1a1a1a}.error,.validation-errors{background-color:#fee;color:#d63384;padding:12px 16px;border-radius:8px;margin-bottom:20px;border:1px solid #f5c6cb}.validation-errors ul{margin:0;padding-left:20px}.validation-errors li{margin-bottom:4px}.validation-errors li:last-child{margin-bottom:0}.add-announcement{margin-bottom:40px;padding-bottom:32px;border-bottom:1px solid #eee}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:500;color:#374151}.form-group input,.form-group textarea{width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:16px;font-family:inherit;background-color:#fff;color:#1f2937;transition:border-color .2s,box-shadow .2s}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a;color:#1f2937}.form-group input:disabled,.form-group textarea:disabled{background-color:#f9fafb;color:#6b7280;cursor:not-allowed}.form-group input::placeholder,.form-group textarea::placeholder{color:#9ca3af}.form-group textarea{resize:vertical;min-height:80px}.char-count{color:#6b7280;font-size:.75rem;margin-top:.25rem;text-align:right}.submit-btn{background-color:#3b82f6;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s}.submit-btn:hover:not(:disabled){background-color:#2563eb}.submit-btn:disabled{background-color:#9ca3af;cursor:not-allowed}.announcements{margin-top:32px}.loading,.no-announcements{text-align:center;padding:40px;color:#6b7280;font-style:italic}.announcements-list{display:flex;flex-direction:column;gap:16px}.announcement-item{border:1px solid #e5e7eb;border-radius:8px;padding:20px;background:#fff;transition:border-color .2s}.announcement-item:hover{border-color:#d1d5db}.announcement-content{width:100%}.announcement-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:8px}.announcement-title{margin:0;font-size:18px;font-weight:600;color:#1a1a1a;flex:1}.announcement-meta{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}.status{padding:4px 8px;border-radius:6px;font-size:12px;font-weight:500;text-transform:capitalize}.status.active{background-color:#dcfce7;color:#166534}.status.closed{background-color:#f3f4f6;color:#374151}.date{font-size:14px;color:#6b7280}.announcement-description{margin:8px 0 0;color:#4b5563;line-height:1.5}.announcement-actions{flex-shrink:0}.close-btn,.reopen-btn{padding:6px 12px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;border:1px solid;transition:all .2s}.close-btn{background-color:#fff;color:#dc2626;border-color:#dc2626}.close-btn:hover{background-color:#dc2626;color:#fff}.reopen-btn{background-color:#fff;color:#059669;border-color:#059669}.reopen-btn:hover{background-color:#059669;color:#fff}@media (max-width: 640px){.container{margin:10px;padding:20px}.announcement-header{flex-direction:column;align-items:stretch;gap:8px}.announcement-actions{align-self:flex-end}.announcement-meta{gap:8px}.date{font-size:12px}}