:root{--bg: #f6f7f9;--card: #ffffff;--border: #e2e5ea;--accent: #2b6cb0;--error: #c53030;color-scheme:light}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:#1a202c}.center{min-height:100vh;display:grid;place-items:center;padding:1rem}.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1.5rem;width:100%;max-width:360px;display:flex;flex-direction:column;gap:.75rem}.card h1{font-size:1.25rem;margin:0 0 .5rem}input,button,.upload-btn{font:inherit;padding:.6rem .8rem;border-radius:8px;border:1px solid var(--border)}button,.upload-btn{cursor:pointer;background:var(--accent);color:#fff;border:none}button:disabled{opacity:.6;cursor:default}.error{color:var(--error);margin:.25rem 0}.toolbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.75rem 1rem;background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}.toolbar .spacer{flex:1}.toolbar button,.toolbar .upload-btn{padding:.4rem .7rem}.crumbs{display:flex;gap:.5rem;align-items:center}.crumbs span{font-family:monospace;color:#4a5568}.search{display:flex;gap:.25rem;align-items:center;flex:1 1 220px;max-width:420px}.search input[type=search]{flex:1;min-width:120px}.search button{padding:.4rem .6rem}.search-banner{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;color:#4a5568;margin:0 0 1rem}.link{background:transparent;color:var(--accent);border:none;padding:0;text-decoration:underline;cursor:pointer}.user{font-size:.85rem;color:#4a5568}.dropzone{padding:1rem;min-height:60vh}.dropzone.over{outline:3px dashed var(--accent);outline-offset:-8px;background:#ebf3fb}.folders{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.folder{background:#edf2f7;color:#2d3748;border:1px solid var(--border)}.folder-item{display:inline-flex;align-items:center;gap:.25rem;border:1px solid var(--border);border-radius:8px;background:#edf2f7;padding-right:.25rem}.folder-item.drop-target{outline:2px solid var(--accent);background:#d9ebfb}.folder-item .folder{border:none;background:transparent}.folder-actions{display:inline-flex;gap:.15rem}.icon-btn{background:transparent;color:inherit;padding:.25rem .4rem;font-size:.9rem;line-height:1}.icon-btn.danger{background:transparent}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}.tile{margin:0;background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden}.tile img{width:100%;aspect-ratio:1;object-fit:cover;display:block}.tile .placeholder{width:100%;aspect-ratio:1;display:grid;place-items:center;color:#a0aec0;font-size:.8rem}.tile figcaption{padding:.4rem .5rem;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.empty{color:#718096;text-align:center;margin-top:3rem}@media (min-width: 768px){.grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}.tile{cursor:pointer}.success{color:#276749;margin:.25rem 0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:grid;place-items:center;padding:1rem;z-index:100}.modal{background:var(--card);border-radius:12px;max-width:900px;width:100%;max-height:90vh;overflow:auto;position:relative;padding:1.25rem}.modal-close{position:absolute;top:.5rem;right:.5rem;background:transparent;color:#4a5568;font-size:1.1rem;padding:.3rem .6rem}.modal-body{display:grid;gap:1rem;grid-template-columns:1fr}.modal-preview img{width:100%;border-radius:8px;object-fit:contain;max-height:60vh}.modal-meta{display:flex;flex-direction:column;gap:.6rem}.modal-meta label{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:#4a5568}.modal-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}button.danger{background:var(--error)}.trash-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}.trash-list li{display:flex;align-items:center;gap:.5rem;padding:.5rem;border:1px solid var(--border);border-radius:8px}.trash-name{font-size:.9rem}.hint{color:#718096;font-size:.85rem}@media (min-width: 768px){.modal-body{grid-template-columns:1.4fr 1fr}}.upload-tray{position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--border);box-shadow:0 -2px 10px #00000014;padding:.75rem 1rem;z-index:50;max-height:40vh;overflow:auto}.upload-tray-header{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:.5rem}.upload-overall{flex:1;min-width:120px}.bar{background:#e2e8f0;border-radius:999px;height:8px;overflow:hidden;width:100%}.bar.small{height:6px}.bar-fill{background:var(--accent);height:100%;transition:width .15s ease}.upload-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}.upload-row{display:grid;grid-template-columns:1fr 2fr auto;align-items:center;gap:.5rem;font-size:.82rem}.upload-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#4a5568}.upload-row.done .upload-state{color:#276749}.upload-row.error .upload-state{color:var(--error)}.upload-row.error .bar-fill{background:var(--error)}
