:root{--cream:#fdf6e3;--coral:#ff6b6b;--teal:#4ecdc4;--navy:#2c3e50;--gold:#f7b731;--purple:#a29bfe;--font-title:"Fredoka One", cursive;--font-body:"Nunito", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--cream);font-family:var(--font-body);color:var(--navy);min-height:100vh}a{color:inherit;text-decoration:none}button{cursor:pointer;font-family:var(--font-body)}input,textarea{font-family:var(--font-body)}.page-wrapper{max-width:1100px;margin:0 auto;padding:0 1.5rem}.site-header{background:var(--coral);text-align:center;padding:1.2rem 0;box-shadow:0 3px #0000001a}.site-header h1{font-family:var(--font-title);color:#fff;letter-spacing:1px;text-shadow:2px 2px #00000026;font-size:2.4rem}.site-header p{color:#ffffffd9;margin-top:.2rem;font-size:1rem}.header-link{display:block}.header-link:hover h1{text-shadow:3px 3px #0003}.comic-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2rem;display:grid}.comic-card{background:#fff;border:2px solid #0000000f;border-radius:12px;transition:transform .15s,box-shadow .15s;display:block;overflow:hidden;box-shadow:4px 6px #0000001f}.comic-card:hover{transform:translateY(-4px)rotate(-.5deg);box-shadow:6px 10px #00000026}.comic-card-image{aspect-ratio:3/4;background:#f0f0f0;position:relative;overflow:hidden}.comic-card-image img{object-fit:cover;width:100%;height:100%;display:block}.comic-card-placeholder{justify-content:center;align-items:center;height:100%;font-size:3rem;display:flex}.comic-card-pages{color:#fff;background:#000000a6;border-radius:20px;padding:2px 8px;font-size:.75rem;font-weight:700;position:absolute;bottom:8px;right:8px}.comic-card-body{padding:1rem}.comic-card-title{font-family:var(--font-title);color:var(--navy);margin-bottom:.3rem;font-size:1.2rem}.comic-card-date{color:#888;margin-bottom:.4rem;font-size:.8rem}.comic-card-reactions{margin-top:.3rem;font-size:.9rem}.back-link{color:var(--coral);margin-bottom:1.5rem;font-size:1rem;font-weight:700;transition:opacity .15s;display:inline-block}.back-link:hover{opacity:.75}.comic-view{max-width:800px;margin:0 auto}.comic-view-header{margin-bottom:2rem}.comic-view-title{font-family:var(--font-title);color:var(--navy);margin-bottom:.4rem;font-size:2.2rem}.comic-view-date{color:#888;margin-bottom:.6rem;font-size:.9rem}.comic-view-description{color:var(--navy);border-left:4px solid var(--teal);background:#fff;border-radius:10px;margin-top:.8rem;padding:1rem 1.2rem;font-size:1.05rem;line-height:1.6}.page-viewer{margin-bottom:2rem}.page-viewer-image{background:#fff;border-radius:12px;margin-bottom:1rem;overflow:hidden;box-shadow:4px 6px #0000001a}.page-viewer-image img{width:100%;height:auto;display:block}.page-viewer-nav{justify-content:center;align-items:center;gap:1.5rem;display:flex}.nav-btn{background:var(--coral);color:#fff;border:none;border-radius:25px;padding:.6rem 1.4rem;font-size:1rem;font-weight:700;transition:opacity .15s,transform .1s}.nav-btn:hover:not(:disabled){opacity:.85;transform:scale(1.05)}.nav-btn:disabled{cursor:default;background:#ccc}.page-counter{font-family:var(--font-title);color:var(--navy);text-align:center;min-width:120px;font-size:1.1rem}.reaction-bar{text-align:center;background:#fff;border-radius:16px;margin-top:2rem;padding:1.5rem;box-shadow:2px 4px #00000012}.reaction-label{font-family:var(--font-title);color:var(--navy);margin-bottom:1rem;font-size:1.2rem}.reaction-buttons{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.reaction-btn{background:var(--cream);border:2px solid #0000;border-radius:14px;flex-direction:column;align-items:center;gap:.3rem;min-width:80px;padding:.8rem 1.2rem;transition:transform .15s,background .15s,border-color .15s;display:flex}.reaction-btn:hover:not(:disabled){border-color:var(--coral);background:#fff0f0;transform:scale(1.08)}.reaction-btn--mine{border-color:var(--coral);background:#fff0f0}.reaction-btn:disabled{cursor:default}.reaction-emoji{font-size:2rem;line-height:1}.reaction-count{color:var(--navy);font-size:1rem;font-weight:700}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.reaction-btn--pop .reaction-emoji{animation:.4s pop}.password-gate{justify-content:center;margin-top:4rem;display:flex}.password-gate-box{text-align:center;background:#fff;border-radius:16px;width:100%;max-width:380px;padding:2.5rem;box-shadow:4px 6px #0000001a}.upload-form{flex-direction:column;gap:.6rem;display:flex}.form-label{color:var(--navy);margin-top:.6rem;font-size:.95rem;font-weight:700}.form-input{resize:vertical;background:#fff;border:2px solid #e0e0e0;border-radius:10px;outline:none;width:100%;padding:.75rem 1rem;font-size:1rem;transition:border-color .15s}.form-input:focus{border-color:var(--teal)}.form-error{color:var(--coral);margin-top:.3rem;font-size:.9rem;font-weight:600}.btn-primary{background:var(--coral);color:#fff;border:none;border-radius:30px;padding:.85rem 2rem;font-size:1.1rem;font-weight:700;transition:opacity .15s,transform .1s}.btn-primary:hover:not(:disabled){opacity:.88;transform:scale(1.02)}.btn-primary:disabled{opacity:.6;cursor:default}.btn-secondary{color:var(--navy);border:2px solid var(--navy);background:#fff;border-radius:25px;padding:.65rem 1.5rem;font-size:.95rem;font-weight:700;transition:background .15s,color .15s}.btn-secondary:hover{background:var(--navy);color:#fff}.preview-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.8rem;margin-top:.5rem;display:grid}.preview-item{aspect-ratio:3/4;background:#eee;border-radius:8px;position:relative;overflow:hidden;box-shadow:2px 3px #0000001a}.preview-item img{object-fit:cover;width:100%;height:100%;display:block}.preview-page-num{color:#fff;background:#0009;border-radius:10px;padding:1px 6px;font-size:.7rem;font-weight:700;position:absolute;bottom:4px;left:6px}.preview-item[draggable]{cursor:grab}.preview-item[draggable]:active{cursor:grabbing;opacity:.5}.preview-drag-over{outline:3px dashed var(--teal);outline-offset:-3px}.preview-remove{background:var(--coral);color:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:1rem;line-height:1;display:flex;position:absolute;top:4px;right:4px}