:root{color-scheme:dark;font-family:system-ui,-apple-system,sans-serif;background:#111827;color:#e5e7eb}*{box-sizing:border-box}body{margin:0;min-height:100dvh;-webkit-tap-highlight-color:transparent}.app{min-height:100dvh;padding:1rem}.app-main{display:flex;flex-direction:column;gap:1rem}.app-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.app-header h1{margin:0;font-size:1.5rem}.sign-out{color:#9ca3af;text-decoration:none;font-size:.9rem}.app-header-right{display:flex;align-items:center;gap:.75rem}.sync-status{font-size:.85rem;padding:.3rem .7rem;border-radius:999px;border:1px solid #4b5563;color:#9ca3af}.sync-syncing{color:#fbbf24;border-color:#b45309}.sync-synced{color:#34d399;border-color:#065f46}.sync-offline{color:#fca5a5;border-color:#7f1d1d;background:#7f1d1d33}.sync-error{color:#fca5a5;border-color:#7f1d1d}.signed-out{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;min-height:60dvh;text-align:center}.button{display:inline-block;padding:.75rem 1.5rem;border-radius:.5rem;background:#3b82f6;color:#fff;text-decoration:none;font-weight:600;font-size:1rem;border:none;cursor:pointer}.error-banner{padding:.75rem 1rem;border-radius:.5rem;background:#7f1d1d;color:#fecaca}.muted{color:#9ca3af}.create-form{display:flex;gap:.5rem}.create-form input,.edit-form input{flex:1;padding:.6rem .75rem;border-radius:.5rem;border:1px solid #4b5563;background:#1f2937;color:#e5e7eb;font-size:1rem;min-width:0}.create-form button,.edit-form button,.song-actions button{padding:.6rem 1rem;border-radius:.5rem;border:1px solid #4b5563;background:#1f2937;color:#e5e7eb;font-size:1rem;cursor:pointer}.create-form button:disabled{opacity:.5;cursor:default}.song-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}.song-item{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;border-radius:.5rem;background:#1f2937}.song-title{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;text-align:left;background:none;border:none;padding:0;color:#e5e7eb;font-size:1rem;cursor:pointer}.song-actions{display:flex;gap:.5rem;flex-shrink:0}.song-actions .danger{border-color:#7f1d1d;color:#fca5a5}.edit-form{display:flex;gap:.5rem;flex:1;min-width:0}.song-view-header{display:flex;align-items:center;gap:.75rem}.song-view-title{margin:0;font-size:1.25rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.back-button,.upload-button{padding:.5rem .75rem;border-radius:.5rem;border:1px solid #4b5563;background:#1f2937;color:#e5e7eb;font-size:1rem;cursor:pointer;flex-shrink:0}.upload-button:disabled{opacity:.5;cursor:default}.empty-hint{text-align:center;padding:3rem 0}.confirm-dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:20}.confirm-dialog{background:#1f2937;border:1px solid #4b5563;border-radius:.75rem;padding:1.25rem;max-width:320px;width:calc(100% - 2rem)}.confirm-dialog-message{margin:0 0 1rem;color:#e5e7eb}.confirm-dialog-actions{display:flex;justify-content:flex-end;gap:.5rem}.confirm-dialog-actions button{padding:.5rem 1rem;border-radius:.5rem;border:1px solid #4b5563;background:#1f2937;color:#e5e7eb;font-size:1rem;cursor:pointer}.confirm-dialog-remove{background:#dc2626;border-color:#dc2626;color:#fff}.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem;max-width:1200px;margin:0 auto;direction:rtl}@media(min-width:560px){.image-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.image-thumb{width:100%;aspect-ratio:1;object-fit:cover;object-position:right center;border-radius:.5rem;background:#1f2937}.image-thumb-slot{position:relative;touch-action:pan-y;cursor:pointer;direction:ltr}.image-thumb-wrap{width:100%;padding:0;border:none;background:none;cursor:pointer;outline-offset:2px}.thumb-remove{position:absolute;top:.25rem;right:.25rem;width:1.75rem;height:1.75rem;border-radius:50%;border:none;background:#000000b3;color:#fff;font-size:1rem;line-height:1;cursor:pointer;z-index:2}.thumb-remove:active{background:#dc2626}.page-number{position:absolute;bottom:.35rem;left:50%;transform:translate(-50%);background:#000000a6;color:#fff;border-radius:999px;padding:.05rem .5rem;font-size:.8rem;line-height:1.5;pointer-events:none;z-index:1}.image-thumb-dragging{opacity:.4;outline:2px solid #3b82f6}.viewer{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;display:flex;align-items:center;justify-content:center;touch-action:none;z-index:10}.viewer-stage{position:relative;width:100%;height:100%}.viewer-image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-select:none}.stroke-container{position:absolute;top:0;right:0;bottom:0;left:0}.stroke-canvas{position:absolute;touch-action:none}.stroke-toolbar{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-radius:999px;background:#111827d9;border:1px solid #4b5563;z-index:2}.stroke-toolbar-erasing .toolbar-group{opacity:.3;pointer-events:none}.stroke-toolbar-erasing .toolbar-erase{opacity:1}.toolbar-group{display:flex;align-items:center;gap:.5rem}.swatch{width:1.75rem;height:1.75rem;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}.swatch-active{border-color:#fff}.width-option{width:1.5rem;height:1.5rem;border-radius:50%;border:1px solid #6b7280;background:transparent;cursor:pointer;position:relative;padding:0}.width-option:after{content:"";position:absolute;top:50%;right:50%;bottom:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:#e5e7eb}.width-option:nth-child(1):after{width:3px;height:3px}.width-option:nth-child(2):after{width:6px;height:6px}.width-option:nth-child(3):after{width:10px;height:10px}.width-option:nth-child(4):after{width:14px;height:14px}.width-active{border-color:#fff}.toolbar-erase{padding:.4rem .75rem;border-radius:999px;border:1px solid #4b5563;background:#1f2937;color:#e5e7eb;font-size:.9rem;cursor:pointer}.toolbar-erase-active{background:#3b82f6;border-color:#3b82f6}.viewer-header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.75rem 1rem;background:linear-gradient(to bottom,rgba(0,0,0,.6),transparent);z-index:3}.viewer-tools{display:flex;align-items:center;gap:.4rem}.tool-button{padding:.5rem .75rem;border-radius:.5rem;border:1px solid #4b5563;background:#111827cc;color:#e5e7eb;font-size:1rem;line-height:1;cursor:pointer}.tool-button:disabled{opacity:.4;cursor:default}.tool-button-active{background:#3b82f6;border-color:#3b82f6;color:#fff}.viewer-close{padding:.5rem .9rem;border-radius:.5rem;border:1px solid #4b5563;background:#111827cc;color:#e5e7eb;font-size:1.25rem;line-height:1;cursor:pointer}.viewer-manage{padding:.5rem .75rem;border-radius:.5rem;border:1px solid #4b5563;background:#111827cc;color:#e5e7eb;font-size:.95rem;line-height:1;cursor:pointer}.viewer-position{color:#e5e7eb;font-weight:500;font-size:1rem;background:#11182799;padding:.35rem .75rem;border-radius:999px}