.header{background:var(--dark);border-bottom:3px solid var(--yellow);position:sticky;top:0;z-index:100;box-shadow:0 4px 0 var(--yellow)}.header-inner{max-width:900px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.logo{display:flex;align-items:center;gap:8px}.logo-emoji{font-size:28px;animation:wiggle 2s ease-in-out infinite}.logo-emoji-right{animation-delay:.5s}.logo-text{display:flex;flex-direction:column;line-height:1}.logo-main{font-family:var(--font-display);font-size:22px;color:var(--yellow);letter-spacing:1px}.logo-sub{font-family:var(--font-display);font-size:14px;color:var(--pink);letter-spacing:2px;text-transform:uppercase}.header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.sort-tabs{display:flex;background:var(--mid);border-radius:8px;padding:3px;border:2px solid var(--mid)}.sort-btn{background:transparent;border:none;color:#aaa;font-size:13px;font-weight:700;padding:5px 12px;border-radius:6px;transition:all .15s}.sort-btn.active{background:var(--yellow);color:var(--dark)}.sort-btn:hover:not(.active){color:#fff}.username-btn{background:var(--mid);border:2px solid #444;color:#ccc;font-size:13px;font-weight:700;padding:7px 12px;border-radius:8px;transition:all .15s;white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}.username-btn:hover{border-color:var(--yellow);color:var(--yellow)}.name-form{display:flex;gap:4px;align-items:center}.name-input{background:var(--mid);border:2px solid var(--yellow);color:#fff;padding:6px 10px;border-radius:8px;font-size:13px;width:130px;outline:none}.name-save,.name-cancel{background:var(--mid);border:2px solid #444;color:#fff;width:28px;height:28px;border-radius:6px;font-size:12px;display:flex;align-items:center;justify-content:center}.name-save:hover{border-color:#4caf50;color:#4caf50}.name-cancel:hover{border-color:var(--pink);color:var(--pink)}.upload-btn{background:var(--yellow);color:var(--dark);border:3px solid var(--dark);font-size:14px;font-weight:800;padding:8px 16px;border-radius:8px;box-shadow:var(--shadow);transition:all .15s;white-space:nowrap}.upload-btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg);background:var(--orange)}.upload-btn:active{transform:translate(2px,2px);box-shadow:none}@media (max-width: 500px){.logo-emoji-right{display:none}.header-inner{gap:8px}}.comments{border-top:2px solid #f0f0f0;padding:16px;background:#fafafa}.comments-loading,.no-comments{font-size:13px;color:#aaa;margin-bottom:12px;font-weight:600}.comments-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}.comment{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font-size:14px}.comment-user{font-weight:800;color:var(--dark);font-size:13px}.comment-body{color:var(--text);flex:1;min-width:100px}.comment-time{font-size:11px;color:#bbb;white-space:nowrap}.comment-form{display:flex;flex-direction:column;gap:8px}.comment-name{border:2px solid #ddd;border-radius:8px;padding:7px 10px;font-size:13px;outline:none;transition:border-color .15s;background:#fff}.comment-name:focus{border-color:var(--yellow)}.comment-input-row{display:flex;gap:8px}.comment-input{flex:1;border:2px solid #ddd;border-radius:8px;padding:8px 12px;font-size:14px;outline:none;transition:border-color .15s;background:#fff}.comment-input:focus{border-color:var(--dark)}.comment-submit{background:var(--dark);color:#fff;border:2px solid var(--dark);border-radius:8px;padding:8px 16px;font-size:13px;font-weight:800;transition:all .1s}.comment-submit:hover:not(:disabled){background:var(--pink);border-color:var(--pink)}.comment-submit:disabled{opacity:.4;cursor:default}.post-card{background:var(--card-bg);border:3px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;transition:transform .15s,box-shadow .15s}.post-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--dark)}.post-header{padding:12px 16px 8px}.post-meta{display:flex;align-items:center;gap:12px}.post-username{font-weight:800;font-size:14px;color:var(--dark)}.post-time{font-size:12px;color:#999}.post-image-wrap{width:100%;background:#f0f0f0;position:relative;overflow:hidden}.post-image{width:100%;max-height:600px;object-fit:cover;display:block;transition:transform .3s ease}.post-card:hover .post-image{transform:scale(1.02)}.post-caption{padding:12px 16px 8px;font-size:15px;font-weight:600;line-height:1.5;color:var(--text)}.post-actions{display:flex;gap:8px;padding:10px 16px 14px;border-top:2px solid #f0f0f0;margin-top:4px}.action-btn{background:var(--cream);border:2px solid var(--border);border-radius:8px;padding:6px 14px;font-size:13px;font-weight:800;color:var(--text);box-shadow:2px 2px 0 var(--border);transition:all .1s;display:flex;align-items:center;gap:6px}.action-btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--border)}.action-btn:active{transform:translate(1px,1px);box-shadow:none}.upvote-btn{background:var(--cream);min-width:64px;justify-content:center}.upvote-btn.upvoted{background:var(--yellow);border-color:var(--dark)}.upvote-btn:disabled{cursor:default}.upvote-btn.popping .upvote-arrow{animation:pop .4s ease}.upvote-arrow{font-size:14px;display:inline-block}.upvote-count{font-family:var(--font-display);font-size:16px}.comment-btn.active{background:#e8f4fd;border-color:#64b5f6}.share-btn:hover{background:#f3e5f5;border-color:var(--pink)}.feed{display:flex;flex-direction:column;gap:20px}.feed-loading{text-align:center;padding:60px 20px;color:var(--mid)}.loading-dogs{font-size:40px;margin-bottom:12px;display:flex;justify-content:center;gap:8px}.loading-dogs span:nth-child(1){animation:wiggle .6s ease-in-out infinite}.loading-dogs span:nth-child(2){animation:wiggle .6s ease-in-out infinite .2s}.loading-dogs span:nth-child(3){animation:wiggle .6s ease-in-out infinite .4s}.feed-loading p{font-weight:700;font-size:16px;color:#888}.feed-empty{text-align:center;padding:80px 20px}.empty-emoji{font-size:60px;margin-bottom:16px}.feed-empty h2{font-family:var(--font-display);font-size:28px;margin-bottom:8px}.feed-empty p{color:#888;font-size:16px}.load-more{text-align:center;padding:24px;color:#888;font-weight:700}.feed-end{text-align:center;padding:32px;color:#aaa;font-size:14px;font-weight:700}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#1a1a2eb3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeUp .2s ease}.modal{background:#fff;border:3px solid var(--dark);border-radius:16px;box-shadow:8px 8px 0 var(--dark);width:100%;max-width:480px;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:2px solid #f0f0f0}.modal-header h2{font-family:var(--font-display);font-size:22px;color:var(--dark)}.modal-close{background:none;border:2px solid #ddd;border-radius:8px;width:32px;height:32px;font-size:14px;color:#999;display:flex;align-items:center;justify-content:center;transition:all .1s}.modal-close:hover{border-color:var(--pink);color:var(--pink)}.modal-body{padding:20px;display:flex;flex-direction:column;gap:16px}.dropzone{border:3px dashed #ccc;border-radius:12px;padding:40px 20px;text-align:center;cursor:pointer;transition:all .2s;background:#fafafa}.dropzone:hover,.dropzone.drag-over{border-color:var(--yellow);background:#fffbf0}.dropzone-icon{font-size:40px;margin-bottom:10px}.dropzone-main{font-weight:800;font-size:16px;margin-bottom:4px}.dropzone-sub{font-size:13px;color:#aaa}.preview-wrap{position:relative;border-radius:10px;overflow:hidden;border:2px solid #eee}.preview-img{width:100%;max-height:300px;object-fit:cover;display:block}.change-photo{position:absolute;bottom:10px;right:10px;background:#000000b3;color:#fff;border:none;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:700}.change-photo:hover{background:#000000e6}.form-fields{display:flex;flex-direction:column;gap:12px}.field{display:flex;flex-direction:column;gap:6px;position:relative}.field label{font-size:13px;font-weight:800;color:var(--dark)}.optional{font-weight:400;color:#aaa}.field input,.field textarea{border:2px solid #ddd;border-radius:8px;padding:9px 12px;font-size:14px;outline:none;transition:border-color .15s;resize:vertical}.field input:focus,.field textarea:focus{border-color:var(--dark)}.char-count{font-size:11px;color:#bbb;text-align:right}.upload-error{background:#fff0f0;border:2px solid #ffcdd2;border-radius:8px;padding:10px 14px;font-size:13px;font-weight:700;color:#c62828}.modal-footer{padding:14px 20px 20px;display:flex;gap:10px;justify-content:flex-end;border-top:2px solid #f0f0f0}.cancel-btn{background:#fff;border:2px solid #ddd;border-radius:8px;padding:10px 20px;font-size:14px;font-weight:700;color:#888;transition:all .1s}.cancel-btn:hover:not(:disabled){border-color:#aaa;color:var(--dark)}.submit-btn{background:var(--yellow);border:3px solid var(--dark);border-radius:8px;padding:10px 24px;font-size:14px;font-weight:800;color:var(--dark);box-shadow:var(--shadow);transition:all .1s}.submit-btn:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:var(--shadow-lg);background:var(--orange)}.submit-btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:var(--shadow)}.app{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;max-width:680px;width:100%;margin:0 auto;padding:24px 16px 80px}:root{--cream: #FFF8E7;--yellow: #FFD93D;--orange: #FF6B35;--pink: #FF3D9A;--dark: #1A1A2E;--mid: #2D2D44;--text: #1A1A2E;--card-bg: #FFFFFF;--border: #1A1A2E;--shadow: 4px 4px 0px #1A1A2E;--shadow-lg: 6px 6px 0px #1A1A2E;--font-display: "Boogaloo", cursive;--font-body: "Nunito", sans-serif;--radius: 12px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);background-color:var(--cream);background-image:radial-gradient(circle at 20% 20%,rgba(255,217,61,.15) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(255,61,154,.1) 0%,transparent 50%);color:var(--text);min-height:100vh}button{cursor:pointer;font-family:var(--font-body)}input,textarea{font-family:var(--font-body)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--cream)}::-webkit-scrollbar-thumb{background:var(--dark);border-radius:4px}@keyframes wiggle{0%,to{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-up{animation:fadeUp .4s ease forwards}