:root{--bg: #0f1115;--panel: #171a21;--panel-2: #1e222b;--border: #2a2f3a;--text: #e6e8ec;--muted: #8b93a1;--accent: #6366f1;--accent-hover: #4f46e5;--danger: #ef4444;--ok: #22c55e;--sidebar-w: 240px;--thumb-min: 160px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}.app{display:flex;flex-direction:column;height:100vh}.app-body{flex:1;display:flex;overflow:hidden}.navbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--panel);border-bottom:1px solid var(--border)}.navbar-left{display:flex;align-items:center;gap:12px}.brand{display:flex;gap:12px;align-items:center}.actions-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:10px 16px;background:var(--panel-2);border-bottom:1px solid var(--border)}.actions-left{display:flex;align-items:center;gap:10px}.actions-info{display:flex;flex-direction:column;gap:2px}.actions-buttons{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.sidebar{position:fixed;top:0;left:0;z-index:40;height:100vh;width:80%;max-width:340px;transform:translate(-100%);transition:transform .25s ease;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.sidebar.open{transform:translate(0)}.sidebar-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:39;background:#00000080;opacity:0;pointer-events:none;transition:opacity .25s ease}.sidebar-backdrop.show{opacity:1;pointer-events:auto}.sidebar-header{padding:14px 16px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid var(--border)}.brand-mark{font-size:28px}.brand h1{margin:0;font-size:18px}.brand p{margin:2px 0 0;font-size:12px;color:var(--muted)}.folder-tree{overflow-y:auto;padding:8px;flex:1}.tree-row{display:flex;align-items:center;gap:6px;padding:6px 10px 6px 8px;margin:1px 0;border:1px solid transparent;border-radius:8px;color:var(--text);font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.tree-row:hover{background:var(--panel-2)}.tree-row.active{background:var(--accent-hover);border-color:var(--accent)}.tree-toggle{flex-shrink:0;width:16px;height:16px;display:grid;place-items:center;background:transparent;border:none;color:var(--muted);font-size:10px;cursor:pointer;padding:0}.tree-toggle.spacer{cursor:default}.tree-icon{flex-shrink:0;font-size:13px}.tree-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.count{flex-shrink:0;background:#ffffff1a;border-radius:999px;padding:1px 8px;font-size:11px}.content{display:flex;flex-direction:column;overflow:hidden}.muted{color:var(--muted);font-size:12px}.dest-status{font-size:12px;color:var(--muted);min-width:90px}.btn{padding:8px 14px;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;cursor:pointer}.btn:hover:not(:disabled){border-color:var(--accent)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--accent-hover);border-color:var(--accent)}.btn-primary:hover:not(:disabled){background:var(--accent)}.btn-icon{font-size:15px;padding:8px 12px}.icon-btn{background:transparent;border:none;color:var(--text);font-size:24px;cursor:pointer;line-height:1}.banner{margin:12px 20px 0;padding:10px 14px;border-radius:8px;font-size:13px}.banner-error{background:#ef44441f;border:1px solid var(--danger);color:#fca5a5}.banner-status{background:#22c55e1f;border:1px solid var(--ok);color:#86efac}.grid{flex:1;overflow-y:auto;padding:16px;display:grid;grid-template-columns:1fr;gap:14px;align-content:start}.empty{grid-column:1 / -1;color:var(--muted);text-align:center;padding:40px}.card{margin:0;background:var(--panel);border:2px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;transition:border-color .12s,transform .12s}.card:hover{transform:translateY(-2px)}.card.selected{border-color:var(--accent)}.thumb{position:relative;aspect-ratio:4 / 3;background:var(--bg)}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.checkmark{position:absolute;top:8px;left:8px;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:14px}.crop-btn{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:8px;border:none;background:#0000008c;color:#fff;cursor:pointer;font-size:14px}.crop-btn:hover{background:var(--accent)}figcaption{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;font-size:12px}figcaption .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}figcaption .size{color:var(--muted);flex-shrink:0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:grid;place-items:center;z-index:50}.modal{background:var(--panel);border:1px solid var(--border);border-radius:14px;width:min(90vw,900px);max-height:90vh;display:flex;flex-direction:column;overflow:hidden}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border)}.modal-header h2{margin:0;font-size:16px}.modal-body{display:flex;flex-direction:column;gap:8px;padding:18px}.modal-body label{font-size:13px;color:var(--muted)}.modal-body input{padding:9px 11px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:14px}.modal-body input.invalid{border-color:var(--danger)}.crop-canvas{overflow:auto;padding:16px;display:grid;place-items:center;-webkit-user-select:none;user-select:none}.crop-image-wrap{position:relative;display:inline-block;line-height:0;cursor:crosshair}.crop-canvas img{max-width:100%;max-height:60vh;display:block}.crop-rect{position:absolute;border:2px dashed var(--accent);background:#6366f133;pointer-events:none}.modal-footer{display:flex;align-items:center;gap:10px;padding:14px 18px;border-top:1px solid var(--border)}.modal-footer .spacer{flex:1}.hint{font-size:12px;color:var(--muted)}.error{color:#fca5a5;padding:0 18px;font-size:13px}.settings-page{flex:1;overflow-y:auto;padding:32px 20px;display:flex;justify-content:center}.settings-card{width:min(100%,640px);background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:24px;height:fit-content}.settings-head h2{margin:0 0 4px;font-size:20px}.settings-head p{margin:0 0 8px}.field{display:flex;flex-direction:column;gap:6px;padding:16px 0;border-top:1px solid var(--border)}.field>label{font-size:14px;font-weight:600}.field input[type=text],.field input:not([type]){padding:9px 11px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:14px}.field input:disabled{opacity:.5;cursor:not-allowed}.field-hint{font-size:12px;color:var(--muted)}.checkbox{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);cursor:pointer}.checkbox input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}.settings-actions{display:flex;align-items:center;gap:10px;padding-top:20px;border-top:1px solid var(--border)}.saved-note{color:#86efac;font-size:13px}@media(min-width:768px){.nav-toggle{display:none}.app-body{display:grid;grid-template-columns:var(--sidebar-w) 1fr}.sidebar{position:static;height:auto;width:auto;max-width:none;transform:none;transition:none;z-index:auto}.sidebar-backdrop{display:none}.grid{grid-template-columns:repeat(auto-fill,minmax(var(--thumb-min),1fr));padding:18px;gap:16px}}@media(min-width:1024px){:root{--sidebar-w: 280px;--thumb-min: 180px}.grid{padding:20px}}@media(min-width:1440px){:root{--sidebar-w: 320px;--thumb-min: 210px}.grid{padding:24px;gap:20px}}@media(min-width:1920px){:root{--sidebar-w: 360px;--thumb-min: 240px}.grid{padding:28px;gap:22px}}