:root{--bg-color: #1a1a1b;--text-color: #d7dadc;--sidebar-bg: #1a1a1b;--post-bg: #272729;--accent-color: #8b70cc;--button-color: #444;--upvote-color: #8b70cc;--header-height: 48px}.app{display:flex;width:100%;min-height:100vh;background-color:var(--bg-color);color:var(--text-color);overflow-x:hidden}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:var(--bg-color);margin:0;padding:0}a{text-decoration:none;color:var(--text-color)}button{cursor:pointer;border:none;background-color:var(--button-color);color:var(--text-color);padding:8px 16px;border-radius:4px;font-size:14px}.create-post-btn{background-color:var(--accent-color);margin:16px;width:calc(100% - 32px);padding:10px;font-weight:700;border-radius:20px}.sidebar{width:240px;min-width:240px;height:100vh;background-color:var(--sidebar-bg);border-right:1px solid #343536;padding-top:20px;display:flex;flex-direction:column;position:sticky;top:0;overflow-y:auto}.logo-container{padding:0 20px 20px;border-bottom:1px solid #343536;display:flex;align-items:center}.cattit-logo{width:52px;height:52px;margin-right:10px}.logo{font-size:2rem;font-weight:700;color:var(--accent-color)}.user-section{padding:15px 20px;border-bottom:1px solid #343536;display:flex;flex-direction:column}.user-info{display:flex;align-items:center;margin-bottom:12px}.user-avatar{width:36px;height:36px;border-radius:50%;background-color:var(--accent-color);margin-right:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}.user-details{flex:1}.username{font-weight:600;color:var(--text-color);font-size:16px}.logout-btn{background-color:transparent;color:#818384;border:1px solid #818384;border-radius:20px;padding:6px 12px;font-size:14px;cursor:pointer;width:100%;transition:all .2s}.logout-btn:hover{background-color:#ff45001a;color:var(--accent-color);border-color:var(--accent-color)}.sidebar-section{padding:20px;border-bottom:1px solid #343536}.sidebar-section h2{font-size:1rem;margin-bottom:15px;color:var(--text-color)}.sidebar-list{list-style:none}.sidebar-item{margin-bottom:12px;font-size:.9rem;color:#b9bbbe}.user-circle{width:24px;height:24px;border-radius:50%;background-color:#777;margin-right:10px}.subcattit-icon{width:24px;height:24px;border-radius:50%;margin-right:10px;overflow:hidden}.subcattit-icon img{width:100%;height:100%;object-fit:cover}.loading{color:#818384;font-size:14px;text-align:center;padding:10px 0}.no-content{color:#818384;font-size:14px;text-align:center;padding:10px 0;font-style:italic}.auth-buttons{padding:16px;display:flex;justify-content:center}.login-btn{background-color:var(--accent-color);color:#fff;padding:8px 16px;border-radius:20px;font-weight:700;text-decoration:none;display:inline-block;text-align:center;width:100%}.create-post-btn-link{text-decoration:none;width:100%;display:block;padding:0 20px;margin-top:20px}.create-post-btn{background-color:var(--accent-color);color:#fff;border:none;border-radius:20px;padding:10px;width:100%;font-weight:600;cursor:pointer}.create-subcattit-btn-link{text-decoration:none;width:100%;display:block;padding:0 20px;margin-top:10px}.create-subcattit-btn{background-color:#388e3c;color:#fff;border:none;border-radius:20px;padding:10px;width:100%;font-weight:600;cursor:pointer}.create-subcattit-btn:hover{background-color:#2e7d32}.logo-link{text-decoration:none;color:inherit;display:block}.sidebar-link{text-decoration:none;color:var(--text-color);padding:5px 0;display:block}.sidebar-link:hover{color:var(--accent-color)}@media (max-width: 768px){.sidebar{display:none}}.post-feed{flex:1;display:flex;flex-direction:column;background-color:var(--bg-color);overflow-y:auto;height:100vh}.header{height:var(--header-height);border-bottom:1px solid #343536;display:flex;align-items:center;justify-content:space-between;padding:0 20px;position:sticky;top:0;background-color:var(--bg-color);z-index:10;margin-bottom:20px}.login-button button{background-color:var(--accent-color);color:#fff;font-weight:600;padding:8px 16px;border-radius:20px;border:none;cursor:pointer}.feed-controls{display:flex;align-items:center;gap:16px}.feed-types{display:flex;border-radius:20px;overflow:hidden;background-color:#272729}.feed-type-btn{background-color:transparent;border:none;padding:8px 16px;color:#818384;cursor:pointer;font-weight:600;transition:background-color .2s,color .2s}.feed-type-btn.active{background-color:var(--accent-color);color:#fff}.timeframe-selector select{background-color:#272729;border:none;padding:8px 24px 8px 12px;color:#818384;border-radius:20px;cursor:pointer;font-size:14px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23818384' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}.sort-selector select{background-color:#272729;border:none;padding:8px 24px 8px 12px;color:#818384;border-radius:20px;cursor:pointer;font-size:14px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23818384' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}.feed-content{flex:1;padding:20px;max-width:800px;margin:0 auto;width:100%}.loading{text-align:center;padding:20px;color:#818384}.no-posts{background-color:var(--post-bg);padding:30px;border-radius:8px;text-align:center;margin-bottom:15px;font-size:16px;color:#818384}.load-more-btn{background-color:#272729;color:var(--text-color);border:none;padding:10px 20px;border-radius:20px;cursor:pointer;font-weight:600;margin:20px auto;display:block;transition:background-color .2s}.load-more-btn:hover{background-color:#3a3a3c}.no-more-posts{text-align:center;padding:20px;color:#818384;font-size:14px}.add-post-button{background-color:var(--accent-color);color:#fff;font-weight:600;padding:10px;border-radius:4px;width:100%;margin-bottom:16px;cursor:pointer;border:none}.new-post-form{background-color:var(--post-bg);border-radius:4px;padding:16px;margin-bottom:16px}.new-post-form form{display:flex;flex-direction:column;gap:12px}.new-post-form input,.new-post-form textarea{padding:10px;border-radius:4px;background-color:#1a1a1b;border:1px solid #343536;color:var(--text-color);font-family:inherit;font-size:14px}.new-post-form textarea{min-height:100px;resize:vertical}.new-post-form button{background-color:var(--accent-color);color:#fff;font-weight:600;padding:10px;border-radius:4px;cursor:pointer;border:none}@media (max-width: 768px){.post-feed{width:100%;padding-top:50px}.header{padding:0 10px}.feed-controls{flex-direction:column;align-items:flex-start;gap:10px}.feed-content{padding:10px}.timeframe-selector select{font-size:12px;padding:6px 20px 6px 10px}.feed-type-btn{padding:6px 12px;font-size:12px}}.post{display:flex;background-color:var(--post-bg);border-radius:4px;margin-bottom:16px;overflow:hidden}.post-content{flex:1;padding:12px}.vote-section{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;background-color:#0003;border-radius:20px;margin-left:12px;height:32px}.vote-btn{background:none;border:none;color:#717273;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;height:24px}.vote-icon-path{fill:#717273;transition:fill .2s ease}.upvote:hover .vote-icon-path,.upvote.active .vote-icon-path{fill:var(--upvote-color)}.downvote:hover .vote-icon-path,.downvote.active .vote-icon-path{fill:#7193ff}.count-text{font-size:12px;font-weight:700;margin:0 4px}.post-header{display:flex;align-items:center;margin-bottom:8px;font-size:12px;color:#818384}.post-community{font-weight:500;margin-right:4px}.post-separator{margin:0 4px}.post-posted-by{margin-right:4px}.post-user{font-weight:500;margin-right:8px}.post-title{font-size:18px;margin-bottom:12px;line-height:1.3}.post-text{font-size:16px;line-height:1.4;margin-bottom:12px;color:var(--text-color);word-wrap:break-word;white-space:pre-wrap}.post-image{width:100%;border-radius:4px;margin-bottom:12px;overflow:hidden}.post-image img{width:100%;height:auto;max-height:500px;object-fit:contain}.post-image-placeholder{width:100%;height:300px;background-color:#444;border-radius:4px;margin-bottom:12px}.post-actions{display:flex;margin-top:8px}.action-button{display:flex;align-items:center;background-color:#0003;border-radius:20px;padding:2px;height:32px}.post-action-btn{display:flex;align-items:center;background:none;border:none;color:#818384;padding:4px 8px;border-radius:2px;height:24px}.post-action-btn:hover{background-color:#ffffff0d}.comment-icon{width:32px;height:32px;margin-right:6px;filter:invert(50%)}.post-link{text-decoration:none;color:inherit;display:block}.post-link:hover{cursor:pointer}.post-link:hover .post-title{color:#ff4500}.post-user-link{text-decoration:none;color:inherit}.post-user-link:hover .post-user{color:var(--accent-color);text-decoration:underline}.post-community-link{text-decoration:none;color:inherit}.post-community-link:hover .post-community{color:var(--accent-color);text-decoration:underline}.post-action-link{text-decoration:none;color:inherit;display:block}@media (max-width: 768px){.post{margin-bottom:15px}.post-content{padding:12px}.post-header{flex-wrap:wrap;gap:4px}.post-title{font-size:16px;line-height:1.3}.post-text{font-size:14px;line-height:1.4}.post-image img{max-height:250px}.post-actions{flex-wrap:wrap;gap:8px}.action-button{min-height:32px}}.mobile-nav{display:none}.mobile-header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background-color:var(--post-bg);position:fixed;top:0;left:0;right:0;z-index:1000;border-bottom:1px solid #444;height:50px;box-sizing:border-box}.mobile-header .logo-container{display:flex;align-items:center;text-decoration:none;color:inherit}.mobile-header .cattit-logo{width:30px;height:30px;margin-right:8px}.mobile-header .logo{font-size:20px;color:var(--accent-color);margin:0}.burger-menu{display:flex;flex-direction:column;justify-content:space-between;width:30px;height:20px;background:transparent;border:none;cursor:pointer;padding:0;z-index:1001}.burger-menu span{width:100%;height:3px;background-color:var(--text-color);border-radius:3px;transition:all .3s ease}.burger-menu.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}.burger-menu.open span:nth-child(2){opacity:0}.burger-menu.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}.mobile-menu{position:fixed;top:50px;left:0;right:0;bottom:0;background-color:var(--bg-color);padding:20px;z-index:999;transform:translate(100%);transition:transform .3s ease;overflow-y:auto}.mobile-menu.open{transform:translate(0)}.mobile-backdrop{position:fixed;top:50px;left:0;right:0;bottom:0;background-color:#00000080;z-index:998}.mobile-user-section{margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #444}.mobile-user-info{display:flex;align-items:center}.mobile-user-avatar{width:40px;height:40px;border-radius:50%;background-color:var(--accent-color);margin-right:12px}.mobile-username{font-weight:700;color:var(--text-color)}.mobile-create-post{display:block;background-color:var(--accent-color);color:#fff;text-align:center;padding:14px 12px;border-radius:6px;margin-bottom:20px;text-decoration:none;font-weight:700;font-size:16px;transition:background-color .2s}.mobile-create-post:hover{background-color:var(--accent-hover, #e04100)}.mobile-section{margin-bottom:20px}.mobile-section h2{font-size:18px;margin-bottom:10px;color:var(--text-color);border-bottom:1px solid #444;padding-bottom:5px}.mobile-list{list-style:none;padding:0}.mobile-list li{margin-bottom:10px}.mobile-list a{color:var(--text-color);text-decoration:none;display:block;padding:12px 0;font-size:16px;transition:color .2s}.mobile-list a:hover{color:var(--accent-color)}.mobile-loading{color:#818384;font-size:14px;padding:10px 0}.mobile-no-content{color:#818384;font-size:14px;text-align:center;padding:10px 0;font-style:italic}.mobile-login{display:block;background-color:#444;color:var(--text-color);text-align:center;padding:12px;border-radius:4px;text-decoration:none;margin-top:20px}.mobile-logout{display:block;background-color:transparent;color:#818384;text-align:center;padding:12px;border-radius:4px;margin-top:20px;width:100%;border:1px solid #818384;cursor:pointer;font-size:16px}.mobile-logout:hover{background-color:#ff45001a;color:var(--accent-color);border-color:var(--accent-color)}@media (max-width: 768px){.mobile-nav{display:block}}.login-container{display:flex;justify-content:center;align-items:flex-start;padding-top:100px;min-height:100vh;background-color:var(--bg-color);color:var(--text-color);width:100%;position:absolute;top:0;left:0;overflow-y:auto}.login-card{background-color:#272729;border-radius:20px;padding:30px;width:350px;box-shadow:0 4px 8px #0003;margin:0 auto 50px}.login-header{text-align:center;margin-bottom:20px}.login-header .logo-container{display:flex;align-items:center;justify-content:center;margin-bottom:10px}.login-header .cattit-logo{width:40px;height:40px;margin-right:10px}.login-header h1{font-size:28px;color:var(--accent-color)}.login-header h2{font-size:16px;font-weight:400;margin-top:5px}.login-tabs{display:flex;margin-bottom:20px;border-radius:20px;overflow:hidden}.tab{flex:1;padding:10px;text-align:center;background-color:#333;border:none;color:var(--text-color);cursor:pointer;transition:background-color .3s}.tab.active{background-color:var(--accent-color)}.error-message{background-color:#ff00001a;color:#ff6b6b;padding:10px;border-radius:8px;text-align:center;margin-bottom:15px;font-size:14px;border:1px solid rgba(255,0,0,.2)}.login-form{display:flex;flex-direction:column;gap:15px}.form-group input[type=text],.form-group input[type=password],.form-group input[type=url]{width:100%;padding:12px 15px;border-radius:20px;border:none;background-color:#333;color:var(--text-color);font-size:14px}.form-group.checkbox{display:flex;align-items:center;gap:8px}.birthday-field.hidden,.profile-image-field.hidden{visibility:hidden;height:0;margin:0;padding:0;opacity:0;transition:all .3s ease}.birthday-field,.profile-image-field{visibility:visible;height:auto;opacity:1;transition:all .3s ease}.image-preview{margin-top:10px;width:100%;display:flex;justify-content:center}.image-preview img{width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid var(--accent-color)}.submit-btn{background-color:var(--accent-color);color:#fff;border:none;border-radius:20px;padding:12px;font-weight:700;cursor:pointer;margin-top:10px}.submit-btn:disabled{background-color:#666;cursor:not-allowed}.cat-face{text-align:center;margin-top:20px;font-size:18px;color:var(--accent-color)}::placeholder{color:#888}@media (max-width: 768px){.login-container{padding-top:80px}.login-card{width:90%;max-width:350px;padding:20px}.login-header h1{font-size:24px}.login-header h2{font-size:14px}.form-group input[type=text],.form-group input[type=password],.form-group input[type=url]{padding:10px;font-size:14px}.image-preview img{width:80px;height:80px}}.post-detail-container{flex:1;padding:20px;overflow-y:auto;display:flex;justify-content:center;background-color:var(--bg-color);min-height:100vh;box-sizing:border-box}.post-detail{max-width:800px;width:100%;background-color:var(--post-bg);border-radius:8px 8px 0 0;box-shadow:0 2px 8px #0000004d;padding:20px;color:var(--text-color);min-height:calc(100vh - 40px);display:flex;flex-direction:column;margin-bottom:0}.app{display:flex;min-height:100vh;height:100%}html,body,#root{height:100%;margin:0;padding:0}.post-content{flex:0 0 auto}.post-top-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;width:100%}.back-button{display:inline-block;color:var(--accent-color);text-decoration:none;font-weight:500}.back-button:hover{text-decoration:underline}.post-actions-menu{display:flex;align-items:center}.delete-post-btn{background-color:#ff4500;color:#fff;border:none;border-radius:4px;padding:8px 12px;font-size:14px;cursor:pointer;transition:background-color .2s;font-weight:500}.delete-post-btn:hover{background-color:#d63600}.delete-post-btn:disabled{background-color:#999;cursor:not-allowed}.comments-section{margin-top:30px;border-top:1px solid #444;padding-top:20px;width:100%;flex:1;display:flex;flex-direction:column}.comments-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.comments-header select{background-color:#333;color:var(--text-color);border:1px solid #444;padding:5px 10px;border-radius:4px}.comments-section h3{margin-bottom:0;font-size:18px;color:var(--text-color)}.comment-form{margin-bottom:20px;width:100%}.comment-form textarea{width:100%;height:100px;padding:12px;border:1px solid #444;border-radius:4px;resize:vertical;margin-bottom:10px;font-family:inherit;background-color:#333;color:var(--text-color)}.comment-form button{background-color:var(--accent-color);color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;font-weight:500}.comment-form button:hover{opacity:.9}.comment-form button:disabled{background-color:#555;cursor:not-allowed}.comment-error{color:#ff4500;margin-bottom:10px}.login-to-comment{margin-bottom:20px;text-align:center;color:#aaa}.login-to-comment a{color:var(--accent-color);text-decoration:none}.login-to-comment a:hover{text-decoration:underline}.comments-list{margin-bottom:20px}.pagination{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:20px}.pagination button{background-color:#333;color:var(--text-color);border:1px solid #444;padding:5px 10px;border-radius:4px;cursor:pointer}.pagination button:hover{background-color:#444}.pagination button:disabled{background-color:#222;color:#666;cursor:not-allowed}.no-comments{text-align:center;color:#aaa;margin-top:20px}@media (max-width: 768px){.post-detail-container{padding:50px 10px 10px;min-height:calc(100vh - 50px)}.post-detail{padding:15px;min-height:calc(100vh - 70px)}.post-title{font-size:18px}.comment-form textarea{height:80px}.comments-section h3{font-size:16px}}.file-requirement-note{font-size:14px;color:#aaa;margin-top:5px}.post-header{display:flex;align-items:center;margin-bottom:10px;flex-wrap:wrap}.post-community-link{color:var(--accent-color);text-decoration:none;font-weight:500}.post-community{margin-right:4px}.post-separator{margin:0 4px;color:#555}.post-posted-by{color:#777;margin-right:4px}.post-user{color:var(--accent-color)}.post-time{color:#777;margin-left:4px}.post-actions-menu{margin-left:auto}.post-title{font-size:24px;margin:10px 0;color:var(--text-color)}.comment{background-color:#1a1a1a;border-radius:4px;padding:12px;margin-bottom:15px;border-left:3px solid #333}.comment-header{display:flex;align-items:center;margin-bottom:8px;font-size:14px}.comment-user{font-weight:500;color:var(--accent-color);margin-right:8px}.comment-time{color:#777}.comment-actions-menu{margin-left:auto}.delete-comment-btn{background-color:transparent;color:#ff4500;border:none;font-size:12px;padding:2px 8px;cursor:pointer;border-radius:4px}.delete-comment-btn:hover{background-color:#ff45001a;text-decoration:underline}.delete-comment-btn:disabled{color:#999;cursor:not-allowed}.comment-content{margin-bottom:8px;word-wrap:break-word;white-space:pre-wrap}.vote-section{display:flex;align-items:center;gap:4px}.vote-btn{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}.vote-icon-path{stroke:#777;fill:transparent;transition:fill .2s,stroke .2s}.vote-btn.upvote:hover .vote-icon-path{stroke:#ff8b60}.vote-btn.downvote:hover .vote-icon-path{stroke:#9494ff}.vote-btn.upvote.active .vote-icon-path{fill:#ff4500;stroke:#ff4500}.vote-btn.downvote.active .vote-icon-path{fill:#7171ff;stroke:#7171ff}.count-text{font-size:12px;color:#aaa;min-width:20px;text-align:center}.create-post-container{flex:1;padding:20px;max-width:800px;margin:0 auto}.create-post-content{background:#272729;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.create-post-content h2{margin-bottom:20px;color:var(--text-color);font-size:24px}.create-post-form{display:flex;flex-direction:column;gap:20px}.form-group input,.form-group textarea,.form-group select{background-color:#272729;padding:10px;border:1px solid #ddd;border-radius:4px;font-size:16px;color:#fff}.form-group textarea{min-height:120px;resize:vertical}.form-group select{cursor:pointer}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--accent-color)}.loading{color:#666;font-style:italic}.no-communities-message{background-color:#272729;border:1px solid #444;border-radius:4px;padding:15px;color:#fff;text-align:center}.no-communities-message p{margin:5px 0;color:#ccc}.file-input{padding:10px;border:2px dashed #ddd;border-radius:4px;cursor:pointer;transition:border-color .2s}.file-input:hover{border-color:#1976d2}.image-preview{margin-top:10px;position:relative;max-width:300px}.image-preview img{width:100%;height:auto;border-radius:4px;border:1px solid #ddd}.remove-image{position:absolute;top:10px;right:10px;background-color:#000000b3;color:#fff;border:none;padding:5px 10px;border-radius:4px;cursor:pointer;transition:background-color .2s}.remove-image:hover{background-color:#000000e6}.file-requirement-note{color:#999;font-size:14px;font-style:italic;margin-top:5px}@media (max-width: 768px){.create-post-container{padding:50px 10px 10px}.create-post-content{padding:15px}.create-post-content h2{font-size:20px}.form-group input,.form-group textarea,.form-group select{padding:10px;font-size:14px}.form-group textarea{min-height:100px}.form-actions{flex-direction:column;gap:10px}.cancel-button,.submit-button{width:100%;text-align:center}}.create-subcattit-container{flex:1;padding:20px;max-width:800px;margin:0 auto}.create-subcattit-content{background:#272729;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.create-subcattit-content h2{margin-bottom:20px;color:var(--text-color);font-size:24px}.create-subcattit-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-weight:600;color:#333}.form-group input,.form-group textarea{background-color:#272729;padding:10px;border:1px solid #ddd;border-radius:4px;font-size:16px;color:#fff}.form-group textarea{resize:vertical}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--accent-color)}.help-text{color:#999;font-size:14px;margin-top:4px}.character-count{text-align:right;color:#666;font-size:14px}.error-message{color:#d32f2f;background-color:#272729;padding:10px;border-radius:4px;margin-bottom:20px}.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}.submit-button,.cancel-button{padding:10px 20px;border-radius:4px;font-weight:600;cursor:pointer;transition:background-color .2s}.submit-button{background-color:#1976d2;color:#272729;border:none}.submit-button:hover{background-color:#1565c0}.submit-button:disabled{background-color:#90caf9;cursor:not-allowed}.cancel-button{background-color:#f5f5f5;color:#333;text-decoration:none;border:1px solid #ddd}.cancel-button:hover{background-color:#eee}@media (max-width: 768px){.create-subcattit-container{padding:60px 10px 10px}.create-subcattit-content{padding:15px}.create-subcattit-content h2{font-size:20px}.form-group input,.form-group textarea{padding:10px;font-size:14px}.form-actions{flex-direction:column;gap:10px}.cancel-button,.submit-button{width:100%;text-align:center}}.subcattit-container{flex:1;overflow-y:auto;display:flex;flex-direction:column;background-color:var(--bg-color);color:var(--text-color)}.subcattit-banner{width:100%;height:150px;overflow:hidden;position:relative;max-width:800px;margin:0 auto}.subcattit-banner img{width:100%;height:150px;object-fit:cover;border-radius:4px 4px 0 0}.subcattit-header{padding:20px;background-color:var(--post-bg);border-bottom:1px solid #444;max-width:800px;margin:0 auto;width:100%}.subcattit-header h1{margin-bottom:10px;font-size:24px;color:var(--text-color)}.subcattit-info{display:flex;gap:15px;margin-bottom:10px;font-size:14px;color:#888}.subcattit-description{line-height:1.5;color:var(--text-color)}.subcattit-posts{padding:20px;max-width:800px;margin:0 auto;width:100%}.posts-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.posts-header h2{font-size:18px;color:var(--text-color);margin:0}.posts-header select{padding:8px 12px;border-radius:4px;border:1px solid #444;background-color:var(--post-bg);color:var(--text-color);font-size:14px;cursor:pointer}.posts-header select:hover{border-color:var(--accent-color)}.no-posts{padding:20px;text-align:center;color:#888;font-style:italic}.error{background-color:#ff4b4b1a;color:#ff4b4b;padding:15px;border-radius:4px;margin:20px 0;text-align:center}.pagination{display:flex;justify-content:center;align-items:center;gap:15px;margin-top:20px;padding:10px}.pagination button{padding:8px 16px;border:none;border-radius:4px;background-color:var(--accent-color);color:#fff;font-size:14px;cursor:pointer;transition:background-color .2s}.pagination button:hover:not(:disabled){background-color:var(--accent-hover)}.pagination button:disabled{background-color:#444;cursor:not-allowed}.pagination span{color:var(--text-color);font-size:14px}@media (max-width: 768px){.subcattit-container{padding-top:50px}.subcattit-banner{height:100px}.subcattit-header{padding:15px}.subcattit-header h1{font-size:20px}.subcattit-posts{padding:15px}.posts-header{flex-direction:column;gap:10px;align-items:flex-start}.posts-header h2{font-size:16px}.pagination{flex-wrap:wrap}}.subcattit-header-content{display:flex;align-items:center;gap:20px}.subcattit-icon{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--accent-color)}.subcattit-title-info{flex:1}.subcattit-actions{display:flex;gap:10px;align-items:center;margin-left:auto}.settings-button{padding:8px 16px;border-radius:4px;border:1px solid #444;background-color:var(--post-bg);color:var(--text-color);font-weight:700;cursor:pointer;transition:all .2s;font-size:14px}.settings-button:hover{background-color:var(--accent-color);border-color:var(--accent-color);color:#fff}.join-button{padding:8px 16px;border-radius:4px;border:none;background-color:#0079d3;color:#fff;font-weight:700;cursor:pointer;transition:background-color .2s}.join-button:hover{background-color:#1484d6}.join-button.joined{background-color:#d93e30;color:#fff}.join-button.joined:hover{background-color:#e74c3c}.join-button:disabled{background-color:#ccc;cursor:not-allowed}.icon-section{display:flex;flex-direction:column;gap:10px}.current-icon{display:flex;justify-content:center}.icon-preview{width:80px;height:80px;border-radius:8px;object-fit:cover;border:2px solid #e0e0e0}.banner-section{display:flex;flex-direction:column;gap:10px}.current-banner{display:flex;justify-content:center}.banner-preview{width:100%;max-width:400px;height:120px;border-radius:8px;object-fit:cover;border:2px solid #e0e0e0}.icon-section input[type=file],.banner-section input[type=file]{padding:12px;border:2px dashed #ccc;border-radius:8px;background-color:#f9f9f9;cursor:pointer;transition:border-color .2s;text-align:center}.icon-section input[type=file]:hover,.banner-section input[type=file]:hover{border-color:#007bff}.unauthorized-message{padding:20px;text-align:center;color:#666}.unauthorized-message p{margin:0;font-size:16px}@media (prefers-color-scheme: dark){.icon-preview,.banner-preview{border-color:#555}.icon-section input[type=file],.banner-section input[type=file]{background-color:#333;border-color:#555;color:#e0e0e0}.unauthorized-message p{color:#ccc}}.user-profile-container{flex:1;overflow-y:auto;display:flex;flex-direction:column;background-color:var(--bg-color);color:var(--text-color)}.user-profile-header{display:flex;padding:20px;background-color:var(--post-bg);border-bottom:1px solid #444;gap:20px;align-items:center}.user-avatar{width:100px;height:100px;border-radius:50%;overflow:hidden;border:3px solid var(--accent-color)}.user-avatar img{width:100%;height:100%;object-fit:cover}.user-info{flex:1}.user-info-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.user-info-header .settings-button{padding:8px 16px;border-radius:4px;border:1px solid #444;background-color:var(--post-bg);color:var(--text-color);font-weight:700;cursor:pointer;transition:all .2s;font-size:14px}.user-info-header .settings-button:hover{background-color:var(--accent-color);border-color:var(--accent-color);color:#fff}.user-info h1{margin:0;font-size:24px;color:var(--text-color)}.user-stats{display:flex;gap:15px;margin-bottom:10px;font-size:14px;color:#888;flex-wrap:wrap}.username{color:var(--accent-color)}.karma{color:#ff8b60}.user-bio{line-height:1.5;color:var(--text-color);font-size:14px}.user-content{padding:20px}.content-tabs{display:flex;margin-bottom:20px;border-bottom:1px solid #444}.tab-button{background:none;border:none;padding:10px 20px;color:var(--text-color);font-size:16px;cursor:pointer;border-bottom:2px solid transparent}.tab-button.active{color:var(--accent-color);border-bottom:2px solid var(--accent-color)}.posts-list{display:flex;flex-direction:column;gap:20px}.user-comments{display:flex;flex-direction:column;gap:15px}.user-comment-item{background-color:var(--post-bg);border-radius:4px;padding:15px;border-left:3px solid var(--accent-color)}.comment-meta{display:flex;gap:10px;margin-bottom:10px;font-size:12px;color:#888}.comment-post-title{color:var(--accent-color)}.comment-content{margin-bottom:10px;line-height:1.4;color:var(--text-color)}.comment-actions{display:flex;align-items:center}.vote-section{display:flex;align-items:center;gap:5px}.vote-btn{background:none;border:none;cursor:pointer;padding:2px;display:flex;align-items:center;justify-content:center}.vote-btn:hover .vote-icon-path{fill:var(--upvote-color)}.upvote .vote-icon-path,.downvote .vote-icon-path{fill:#888}.count-text{font-size:12px;color:#888}.no-content{padding:20px;text-align:center;color:#888;font-style:italic}.loading{display:flex;justify-content:center;align-items:center;height:100vh;font-size:18px;color:var(--accent-color)}@media (max-width: 768px){.user-profile-container{padding-top:60px}.user-profile-header{flex-direction:column;align-items:center;padding:15px;text-align:center}.user-avatar{width:80px;height:80px;margin-bottom:15px}.user-info h1{font-size:20px}.user-stats{justify-content:center}.user-content{padding:15px}.tab-button{padding:8px 15px;font-size:14px}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:#fff;border-radius:8px;padding:0;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 4px 20px #00000026}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e0e0e0}.modal-header h2{margin:0;color:#333;font-size:1.5rem}.close-button{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#666;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s}.close-button:hover{background-color:#f0f0f0}.settings-form{padding:20px}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:600;color:#333}.profile-picture-section{display:flex;flex-direction:column;gap:10px}.current-picture{display:flex;justify-content:center}.profile-preview{width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid #e0e0e0}.profile-picture-section input[type=file]{padding:8px;border:2px dashed #ccc;border-radius:4px;background-color:#f9f9f9;cursor:pointer;transition:border-color .2s}.profile-picture-section input[type=file]:hover{border-color:#007bff}.uploading{color:#007bff;font-style:italic;text-align:center}.form-group input,.form-group textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;font-size:14px;font-family:inherit;box-sizing:border-box}.form-group textarea{resize:vertical;min-height:100px}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}.char-count{text-align:right;font-size:12px;color:#666;margin-top:4px}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:30px;padding-top:20px;border-top:1px solid #e0e0e0}.cancel-button,.save-button{padding:10px 20px;border:none;border-radius:4px;font-size:14px;cursor:pointer;transition:background-color .2s}.cancel-button{background-color:#f8f9fa;color:#333;border:1px solid #ddd}.cancel-button:hover{background-color:#e9ecef}.save-button{background-color:#007bff;color:#fff}.save-button:hover:not(:disabled){background-color:#0056b3}.save-button:disabled{background-color:#ccc;cursor:not-allowed}.error-message{background-color:#f8d7da;color:#721c24;padding:10px;border-radius:4px;margin-bottom:15px;border:1px solid #f5c6cb}.success-message{background-color:#d4edda;color:#155724;padding:10px;border-radius:4px;margin-bottom:15px;border:1px solid #c3e6cb}@media (prefers-color-scheme: dark){.modal-content{background:#2a2a2a;color:#e0e0e0}.modal-header{border-bottom-color:#444}.modal-header h2{color:#e0e0e0}.close-button{color:#ccc}.close-button:hover{background-color:#444}.form-group label{color:#e0e0e0}.form-group input,.form-group textarea{background-color:#333;border-color:#555;color:#e0e0e0}.form-group input:focus,.form-group textarea:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff40}.profile-picture-section input[type=file]{background-color:#333;border-color:#555;color:#e0e0e0}.form-actions{border-top-color:#444}.cancel-button{background-color:#444;color:#e0e0e0;border-color:#555}.cancel-button:hover{background-color:#555}}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400}body{margin:0;padding:0;width:100%;height:100vh;overflow-x:hidden}#root{width:100%;height:100%;margin:0;padding:0;display:flex}