@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap";.theme-selector{padding:5px 10px;margin:5px;border-radius:4px;font-weight:700;background-color:#90caf9;color:#1565c0;border:1px solid #bcd0ee;cursor:pointer;transition:background .2s,color .2s,border .2s}body[data-theme=dark] .theme-selector{background-color:#00e5ff;color:#121212;border:1px solid #00e5ff}body[data-theme=light] .theme-selector{background-color:#90caf9;color:#1565c0;border:1px solid #bcd0ee}body{font-family:Inter,Roboto,Open Sans,Arial,sans-serif}body[data-theme=light]{background:#fff;color:#000}body[data-theme=dark]{background:#1e1818;color:#fff}body[data-theme=dark] .PostList{background-color:#181818;color:#eee}body[data-theme=dark] .PostList h2{color:#fff;border-bottom:2px solid #333}body[data-theme=dark] .filter-btn{background-color:#00b89b;color:#fff}body[data-theme=dark] .search-bar input[type=text]{background:#1a1a1a;color:#fff;border:1px solid #00e5ff}body[data-theme=dark] .search-bar input[type=text]:focus{border-color:#1de9b6}body[data-theme=light] .PostList{background-color:#f8f8f8;color:#222}body[data-theme=light] .PostList h2{color:#333;border-bottom:2px solid #ccc}body[data-theme=light] .filter-btn{background-color:#e3eafc;color:#222;border:1px solid #bcd0ee}body[data-theme=light] .search-bar input[type=text]{background:#fff;color:#222;border:1px solid #bcd0ee}body[data-theme=light] .search-bar input[type=text]:focus{border-color:#90caf9}.PostList{max-width:1000px;margin:0 auto;padding:40px 20px;border-radius:16px;box-shadow:0 4px 24px #00000012}.PostList h2{text-align:center;margin-bottom:30px;font-size:28px;padding-bottom:10px}.filter-btn{padding:6px 12px;border-radius:12px;font-weight:700;cursor:pointer;margin-right:8px;transition:background .2s,color .2s,border .2s}.search-bar{width:100%;display:flex;justify-content:center;margin:14px 0 20px}.search-bar input[type=text]{width:400px;padding:10px 14px;font-size:1em;border-radius:6px;transition:border-color .2s,background .2s,color .2s}select[name=flag]{width:220px;padding:10px;margin-bottom:20px;margin-right:12px;border-radius:6px;border:1px solid #ccc;font-size:16px;background-color:#f4f8fb;color:#222;transition:border-color .2s,background .2s}.loading-spinner{display:flex;flex-direction:column;align-items:center;margin:40px 0}.spinner{border:4px solid #e3eafc;border-top:4px solid #2d72d9;border-radius:50%;width:36px;height:36px;animation:spin 1s linear infinite;margin-bottom:12px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}body[data-theme=dark]{background-color:#121212;color:#fff}body[data-theme=dark] button{background-color:#00e5ff;color:#121212}body[data-theme=dark] .header{background-color:#1f1f1f;border-bottom:2px solid #00e5ff}body[data-theme=dark] .Card{background-color:#1e1e1e;color:#fff}body[data-theme=dark] .card-image{border-radius:4px}body[data-theme=dark] .details-btn{background-color:#1de9b6;color:#121212}body[data-theme=dark] .details-btn:hover{background-color:#00e5ff;color:#121212}body[data-theme=dark] .menu-popup{background:#222;color:#00e5ff}body[data-theme=dark] .menu-popup a{color:#dbd6d6}body[data-theme=light]{background-color:#f4f8fb;color:#222}body[data-theme=light] input[type=submit]:hover,body[data-theme=light] button:hover,body[data-theme=light] .headerBtn:hover{background-color:#e3eafc;color:#1565c0}body[data-theme=light] .App{background:none}body[data-theme=light] .header{background-color:#e3eafc;border-bottom:2px solid #90caf9;color:#1565c0}body[data-theme=light] .Card{background-color:#fff;color:#222;border:1px solid #e3eafc}body[data-theme=light] .card-image{border-radius:4px;border:1px solid #bcd0ee}body[data-theme=light] .card-meta{color:#555}body[data-theme=light] .details-btn{background-color:#90caf9;color:#1565c0}body[data-theme=light] .details-btn:hover{background-color:#e3eafc;color:#1565c0}body[data-theme=light] .Card p{color:#555}body[data-theme=light] .menu-popup{background:#f7faff;color:#1565c0;box-shadow:0 2px 8px #00000014}body[data-theme=light] .menu-popup a,body[data-theme=light] .menu-popup button{color:#1565c0}.Card h2{text-align:center;margin:16px 0}.App{max-width:800px;margin:0 auto;padding:20px}.header{padding:20px;text-align:center}.headerBtn{padding:5px 10px;margin:5px;border-radius:4px;cursor:pointer;font-weight:700}.Card{padding:20px;margin:20px 0;border-radius:10px;box-shadow:0 2px 5px #00000012}.card-image{max-width:100%;height:auto;margin-top:10px}.card-meta{font-size:.9em}.details-btn{padding:3px 10px;border-radius:4px;text-decoration:none;position:relative;left:43%;transform:translate(-50%)}.Card p{font-size:.95em;text-align:center}.more-icon{width:22px;height:22px;position:absolute;top:12px;right:12px;cursor:pointer;z-index:2}.card-meta{position:relative}.menu-popup{position:absolute;top:40px;right:20px;border-radius:4px;box-shadow:0 2px 8px #0000002e;padding:10px 16px;min-width:90px;display:flex;flex-direction:column}.menu-popup a,.menu-popup button{background:none;padding:8px 0;text-align:left;font-size:1em;cursor:pointer;border-radius:4px;font-weight:400;display:block;width:100%;margin-left:0;box-sizing:border-box}.menu-popup a{text-decoration:none}form{max-width:600px;margin:50px auto;padding:30px;background-color:#fff;border-radius:10px;box-shadow:0 2px 10px #0000001a}form h2{text-align:center;margin-bottom:20px;color:#333}label{font-weight:700;display:block;margin-bottom:5px;color:#444}input[type=text],textarea{width:100%;padding:10px;margin-bottom:20px;border-radius:6px;border:1px solid #ccc;box-sizing:border-box;font-size:16px}input[type=submit]{width:100%;background-color:#2d72d9;color:#fff;padding:12px;border:none;border-radius:6px;font-size:16px;cursor:pointer;transition:background-color .3s}input[type=submit]:hover{background-color:#1a56b3}body[data-theme=dark] form{background-color:#181818;color:#fff;box-shadow:0 2px 10px #00000040}body[data-theme=dark] form h2{color:#00e5ff}body[data-theme=dark] label{color:#bbb}body[data-theme=dark] input[type=text],body[data-theme=dark] textarea{background-color:#121212;color:#fff;border:1px solid #444}body[data-theme=dark] input[type=submit]{background-color:#00e5ff;color:#181818}body[data-theme=dark] input[type=submit]:hover{background-color:#1de9b6;color:#181818}select[name=flag]{width:100%;padding:10px;margin-bottom:20px;border-radius:6px;border:1px solid #ccc;font-size:16px;background-color:#f4f8fb;color:#222;transition:border-color .2s,background .2s}select[name=flag]:focus{border-color:#2d72d9;background-color:#e3eafc;outline:none}body[data-theme=dark] select[name=flag]{background-color:#121212;color:#fff;border:1px solid #444}body[data-theme=dark] select[name=flag]:focus{border-color:#00e5ff;background-color:#181818}body[data-theme=dark] .PostDetail{background-color:#1e1e1e;color:#fff}body[data-theme=dark] .PostDetail h2{color:#fff;border-bottom:2px solid #00e5ff}body[data-theme=dark] .comments-section{background-color:#2a2a2a}body[data-theme=dark] .comments-section li{background-color:#333;color:#eee}body[data-theme=dark] .comments-section input[type=text]{background-color:#1e1e1e;color:#fff;border:1px solid #444}body[data-theme=light] .PostDetail{background-color:#f7faff;color:#222;box-shadow:0 4px 12px #00000014}body[data-theme=light] .PostDetail h2{color:#1565c0;border-bottom:2px solid #90caf9}body[data-theme=light] .PostDetail .meta{color:#555}body[data-theme=light] .detail-img{border:1px solid #bcd0ee}body[data-theme=light] .comments-section{background-color:#e3eafc}body[data-theme=light] .comments-section h4{color:#1565c0}body[data-theme=light] .comments-section li{background-color:#fff;color:#222;border:1px solid #e3eafc}body[data-theme=light] .comments-section input[type=text]{background-color:#fff;color:#222;border:1px solid #bcd0ee}body[data-theme=light] .gray{color:#555}body[data-theme=light] button{background-color:#90caf9;color:#1565c0}body[data-theme=light] button:hover{background-color:#e3eafc}.PostDetail{max-width:700px;margin:40px auto;padding:30px;border-radius:12px;font-family:Inter,Roboto,sans-serif}.detail-img{display:block;max-width:100%;height:auto;margin:20px auto;border-radius:8px}.content{font-size:1.1rem;line-height:1.6;margin-bottom:20px}button{padding:10px 14px;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s;font-weight:700;margin:10px 0 10px 4px}.gray{margin:10px 0;font-size:1rem}.comments-section{margin-top:40px;padding:20px;border-radius:8px}.comments-section h4{font-size:20px;margin-bottom:10px}.comments-section ul{list-style:none;padding:0;margin-bottom:15px}.comments-section li{padding:10px 14px;margin-bottom:8px;border-radius:6px}.comments-section input[type=text]{width:100%;padding:10px;border-radius:4px;margin-bottom:10px}