*{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0f1115;--panel: #181b22;--panel-2: #1f232c;--border: #2a2f3a;--text: #e8eaf0;--muted: #8b93a3;--accent: #6c8cff;--accent-2: #4f6ee6;--danger: #e05a5a;--ok: #39c07f}body{background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif;min-height:100vh}main{max-width:1400px;margin:0 auto;padding:24px}.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:var(--panel);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}.brand{font-weight:700;font-size:18px;color:var(--text);text-decoration:none}.brand span{color:var(--accent);font-weight:500}.topbar-right{display:flex;align-items:center;gap:12px}.role-badge{padding:3px 10px;border-radius:999px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}.role-badge.agency{background:#6c8cff26;color:var(--accent)}.role-badge.client{background:#39c07f26;color:var(--ok)}.btn{padding:8px 16px;border-radius:8px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);cursor:pointer;font-size:14px;transition:background .15s,border-color .15s}.btn:hover{border-color:var(--accent)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.primary{background:var(--accent-2);border-color:var(--accent-2)}.btn.primary:hover{background:var(--accent)}.btn.ghost{background:transparent}.btn.danger{color:var(--danger)}.btn.danger:hover{border-color:var(--danger)}.btn.small{padding:2px 8px;font-size:12px}input[type=text],input[type=password],input:not([type]){padding:9px 12px;border-radius:8px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);font-size:14px;outline:none}input:focus{border-color:var(--accent)}.muted{color:var(--muted)}.error{color:var(--danger);margin:10px 0}.empty{padding:40px 0;text-align:center}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}.login-card{width:100%;max-width:360px;display:flex;flex-direction:column;gap:14px;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:36px 32px;text-align:center}.login-card h1{font-size:28px}.login-card .btn{padding:11px}.breadcrumb{margin-bottom:18px;font-size:15px}.breadcrumb a{color:var(--accent);text-decoration:none}.breadcrumb a:hover{text-decoration:underline}.breadcrumb .sep{color:var(--muted);margin:0 8px}.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:14px;background:var(--panel);border:1px solid var(--border);border-radius:12px;margin-bottom:20px}.inline-form{display:flex;gap:8px}.folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:28px}.folder-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:28px 18px 22px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--border);border-radius:16px;cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s}.folder-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 10px 24px #00000059}.folder-icon{font-size:52px;line-height:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}.folder-name{font-size:15px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.folder-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.stat{font-size:12px;color:var(--muted);background:#ffffff0d;border:1px solid var(--border);padding:3px 10px;border-radius:999px;white-space:nowrap}.stat.ok{color:var(--ok);border-color:#39c07f66;background:#39c07f1a}.folder-delete{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;border:1px solid var(--border);background:var(--panel);color:var(--danger);cursor:pointer;font-size:12px;opacity:0;transition:opacity .15s,border-color .15s}.folder-card:hover .folder-delete{opacity:1}.folder-delete:hover{border-color:var(--danger)}.folder-link{position:absolute;top:10px;left:10px;width:26px;height:26px;border-radius:50%;border:1px solid var(--border);background:var(--panel);color:var(--text);cursor:pointer;font-size:12px;opacity:0;transition:opacity .15s,border-color .15s}.folder-card:hover .folder-link{opacity:1}.folder-link:hover{border-color:var(--accent)}.folder-card.drop-target{border-color:var(--ok);background:#39c07f1f;transform:scale(1.03);box-shadow:0 0 0 3px #39c07f40}.drop-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#0f1115b3;display:grid;place-items:center;pointer-events:none}.drop-overlay-box{padding:26px 44px;border-radius:16px;border:2px dashed var(--accent);background:var(--panel);font-size:18px;font-weight:600}.upload-banner{margin:10px 0;padding:10px 14px;border-radius:10px;background:#6c8cff1f;border:1px solid var(--accent-2);color:var(--accent);font-size:14px}.viewer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#0a0b0eeb;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px}.viewer-scroll{overflow:auto;max-width:min(96vw,1100px);max-height:80vh;display:flex;border-radius:8px}.viewer-frame{position:relative;margin:auto}.viewer-frame img{max-width:min(92vw,1050px);max-height:78vh;display:block;border-radius:8px}.viewer-caption{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;font-size:14px;color:var(--text)}.zoom-controls{display:flex;align-items:center;gap:6px}.zoom-controls .btn{min-width:32px}.zoom-level{min-width:46px;text-align:center;font-variant-numeric:tabular-nums}.viewer-btn{position:absolute;z-index:101;width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--panel);color:var(--text);font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:border-color .15s}.viewer-btn:hover{border-color:var(--accent)}.viewer-close{top:18px;right:18px;font-size:16px}.viewer-prev{left:18px;top:50%;transform:translateY(-50%)}.viewer-next{right:18px;top:50%;transform:translateY(-50%)}@media(max-width:600px){.viewer-prev{left:6px}.viewer-next{right:6px}}.images-header{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:6px 0 14px}.images-header h2{font-size:18px}.hint{color:var(--muted);font-size:13px;margin-left:auto}.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.image-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden}.image-frame{position:relative}.image-frame img{width:100%;display:block}.quad-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.quad{border:1px dashed rgba(255,255,255,.25);background:transparent;cursor:pointer;position:relative;transition:background .12s}.quad:hover{background:#6c8cff2e}.quad .check{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#00000073;color:transparent;border:2px solid rgba(255,255,255,.5);font-size:15px;font-weight:700;transition:all .12s}.quad.selected{background:#39c07f38;border-color:var(--ok)}.quad.selected .check{background:var(--ok);color:#fff;border-color:var(--ok)}.image-meta{display:flex;align-items:center;gap:8px;padding:10px 12px}.filename{flex:1;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sel-badge{font-size:12px;color:var(--ok);background:#39c07f1f;padding:2px 8px;border-radius:999px;white-space:nowrap}@media(max-width:600px){main{padding:14px}.image-grid{grid-template-columns:1fr}}