*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#faf6f0;--card:#fff;--text:#3d3231;--muted:#a89b96;--accent:#c9847a;--accent-hover:#b06e64;--shadow:0 2px 12px #3d323114;--radius:12px}body{background:var(--bg);color:var(--text);min-height:100dvh;font-family:Inter,sans-serif}.loading{min-height:100dvh;color:var(--muted);justify-content:center;align-items:center;font-family:Caveat,cursive;font-size:1.5rem;display:flex}.header{justify-content:space-between;align-items:center;max-width:800px;margin:0 auto;padding:1.5rem 2rem;display:flex}.header h1{color:var(--accent);font-family:Caveat,cursive;font-size:2rem;font-weight:600}.logout-btn{color:var(--muted);cursor:pointer;background:0 0;border:none;font-size:.875rem}.logout-btn:hover{color:var(--text)}.footer{text-align:center;max-width:800px;margin:0 auto;padding:1rem 1.5rem 2rem}.footer a{color:var(--muted);font-size:.85rem;text-decoration:none}.footer a:hover{color:var(--accent)}.auth-overlay{justify-content:center;align-items:center;min-height:100dvh;padding:1rem;display:flex}.auth-modal{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;width:100%;max-width:360px;padding:2.5rem 2rem}.auth-modal h2{color:var(--accent);margin-bottom:.5rem;font-family:Caveat,cursive;font-size:2rem}.auth-hint{color:var(--muted);margin-bottom:1.5rem;font-size:.875rem}.auth-modal input{border:1px solid #e0d6d0;border-radius:8px;outline:none;width:100%;padding:.75rem 1rem;font-size:1rem;transition:border-color .2s}.auth-modal input:focus{border-color:var(--accent)}.auth-error{color:#c0392b;margin-top:.5rem;font-size:.85rem}.auth-modal button[type=submit]{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:8px;width:100%;margin-top:1rem;padding:.75rem;font-size:1rem;transition:background .2s}.auth-modal button[type=submit]:hover:not(:disabled){background:var(--accent-hover)}.auth-modal button:disabled{opacity:.5;cursor:default}.poem-grid{flex-direction:column;gap:0;max-width:800px;margin:0 auto;padding:0 1.5rem 3rem;display:flex}.poem-line{color:var(--accent);text-align:center;padding:1.25rem 1rem;font-family:Caveat,cursive;font-size:1.5rem;line-height:1.4}.block{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);margin:.5rem 0;transition:transform .2s;overflow:hidden}.block--filled{cursor:pointer}.block--filled:hover{transform:translateY(-2px)}.block--empty{justify-content:center;align-items:center;min-height:60px;display:flex}.block__placeholder{border:2px dashed #e0d6d0;border-radius:8px;width:100%;height:3rem;margin:.75rem}.block__upload-btn{border:1.5px dashed var(--muted);width:2.5rem;height:2.5rem;color:var(--muted);cursor:pointer;background:0 0;border-radius:50%;justify-content:center;align-items:center;margin:.5rem;font-size:1.25rem;transition:border-color .2s,color .2s;display:flex}.block__upload-btn:hover{border-color:var(--accent);color:var(--accent)}.block--filled{position:relative}.block__action-btn--delete{width:2rem;height:2rem;color:var(--muted);cursor:pointer;opacity:0;background:#ffffffd9;border:none;border-radius:50%;justify-content:center;align-items:center;transition:opacity .2s,color .2s;display:flex;position:absolute;top:.5rem;right:.5rem}.block--filled:hover .block__action-btn--delete{opacity:1}.block__action-btn--delete:hover{color:#c0392b}.block__thumb{border-radius:var(--radius);width:100%;display:block}.dialog-overlay{z-index:100;background:#00000080;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.upload-dialog{background:var(--card);border-radius:var(--radius);width:100%;max-width:480px;padding:2rem;position:relative}.dialog-close{color:var(--muted);cursor:pointer;background:0 0;border:none;font-size:1.5rem;position:absolute;top:.75rem;right:1rem}.upload-dialog h3{color:var(--accent);font-family:Caveat,cursive;font-size:1.5rem}.upload-line{color:var(--muted);margin:.25rem 0 1rem;font-family:Caveat,cursive;font-size:1.15rem}.upload-drop{text-align:center;color:var(--muted);cursor:pointer;border:2px dashed #e0d6d0;border-radius:8px;padding:2.5rem 1rem;transition:border-color .2s}.upload-drop:hover{border-color:var(--accent)}.upload-preview img{border-radius:8px;width:100%}.upload-actions{justify-content:flex-end;gap:.75rem;margin-top:1rem;display:flex}.upload-actions button{cursor:pointer;border:none;border-radius:8px;padding:.6rem 1.25rem;font-size:.9rem;transition:background .2s}.upload-actions button[type=submit]{background:var(--accent);color:#fff}.upload-actions button[type=submit]:hover:not(:disabled){background:var(--accent-hover)}.upload-actions button:disabled{opacity:.5;cursor:default}.btn-secondary{background:var(--bg);color:var(--text)}.btn-secondary:hover{background:#ede6df}.btn-danger{color:#fff;background:#c0392b}.btn-danger:hover{background:#a93226}.confirm-dialog{background:var(--card);border-radius:var(--radius);text-align:center;width:100%;max-width:320px;padding:2rem}.confirm-dialog p{margin-bottom:1.25rem;font-size:1rem}.confirm-actions{justify-content:center;gap:.75rem;display:flex}.confirm-actions button{cursor:pointer;border:none;border-radius:8px;padding:.6rem 1.25rem;font-size:.9rem}.lightbox{z-index:200;cursor:pointer;background:#000000d9;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.lightbox__close{color:#fff;cursor:pointer;background:0 0;border:none;font-size:2rem;position:absolute;top:1rem;right:1.5rem}.lightbox__img{cursor:default;border-radius:8px;max-width:95%;max-height:90dvh}.celebration{text-align:center;opacity:0;max-width:800px;margin:0 auto 2rem;padding:2rem 1.5rem;transition:opacity .8s,transform .8s;position:relative;transform:translateY(20px)}.celebration--visible{opacity:1;transform:translateY(0)}.celebration__poem{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem}.celebration__line{color:var(--accent);font-family:Caveat,cursive;font-size:1.4rem;line-height:1.6}.celebration__sparkles{pointer-events:none;position:absolute;inset:0;overflow:hidden}.sparkle{background:var(--accent);opacity:0;border-radius:50%;width:6px;height:6px;animation:linear infinite fall;position:absolute;top:-10px}@keyframes fall{0%{opacity:0;transform:translateY(0)scale(0)}10%{opacity:.8;transform:translateY(0)scale(1)}90%{opacity:.3}to{opacity:0;transform:translateY(400px)scale(.5)}}@media (width<=600px){.header{padding:1rem}.header h1{font-size:1.5rem}.poem-grid{padding:0 1rem 2rem}.block__line{font-size:1.2rem}}
