*{box-sizing:border-box}html,body,#root{color:#1f2937;background:#eef1f5;width:100%;min-height:100%;margin:0;font-family:Inter,Arial,sans-serif}body{min-height:100vh}button,input,textarea,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.app-shell{justify-content:center;align-items:stretch;min-height:100vh;padding:24px;display:flex}.app-frame{background:#f5f7fb;border:1px solid #d9dee7;border-radius:28px;grid-template-columns:270px 1fr;width:100%;min-height:calc(100vh - 24px);display:grid;overflow:hidden;box-shadow:0 12px 40px #0f172a0f}.sidebar{background:#fff;border-right:1px solid #dfe4ec;flex-direction:column;gap:16px;padding:18px;display:flex}.sidebar-header{justify-content:space-between;align-items:center;display:flex}.sidebar-header h2{margin:0;font-size:18px;font-weight:700}.icon-button{background:#fff;border:1px solid #cfd6df;border-radius:12px;width:40px;height:40px;font-size:24px;line-height:1}.icon-button:hover{background:#f8fafc}.sidebar-note{color:#6b7280;font-size:14px}.folder-list{flex-direction:column;gap:12px;display:flex}.folder-card{background:#f3f5f8;border:1px solid #d5dbe4;border-radius:14px;padding:14px}.folder-card.active{background:#eceff4;border-color:#c8d0db}.folder-card-title{text-align:left;color:#1f2937;background:0 0;border:0;width:100%;padding:0;font-size:15px;font-weight:700}.folder-card-actions{gap:8px;margin-top:14px;display:flex}.main-panel{flex-direction:column;gap:18px;padding:22px 20px 20px;display:flex}.topbar{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.topbar-title h1{margin:0 0 4px;font-size:24px;line-height:1.1}.topbar-title p{color:#6b7280;margin:0;font-size:14px}.topbar-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;display:flex}.user-box{align-items:center;gap:10px;display:flex}.primary-button,.secondary-button,.mini-button,.card-actions a,.card-actions button,.modal-close,.btn-primary,.btn-secondary,.btn-danger{color:#1f2937;background:#fff;border:1px solid #cfd6df;border-radius:12px;padding:10px 14px;transition:all .15s}.primary-button:hover,.secondary-button:hover,.mini-button:hover,.card-actions a:hover,.card-actions button:hover,.btn-primary:hover,.btn-secondary:hover,.btn-danger:hover{background:#f8fafc}.primary-button:disabled,.secondary-button:disabled,.mini-button:disabled,.card-actions button:disabled{opacity:.45;cursor:not-allowed}.mini-button{padding:8px 10px;font-size:12px}.mini-button.danger,.card-actions .danger,.btn-danger{color:#dc2626;border-color:#f1c5c5}.mini-button.danger:hover,.card-actions .danger:hover,.btn-danger:hover{background:#fff4f4}.filters-row{grid-template-columns:1fr 150px;gap:12px;display:grid}.search-input,.filter-select,.form-field input,.form-field select{background:#fff;border:1px solid #cfd6df;border-radius:14px;outline:none;width:100%;padding:12px 14px}.search-input:focus,.filter-select:focus,.form-field input:focus,.form-field select:focus{border-color:#94a3b8}.drop-zone{text-align:center;background:#fbfcfe;border:2px dashed #d4dbe5;border-radius:22px;padding:34px 20px;transition:all .2s}.drop-zone.dragging{background:#f2f6fb;border-color:#94a3b8}.drop-zone-title{margin-bottom:6px;font-size:18px;font-weight:700}.drop-zone-subtitle{color:#6b7280;font-size:14px}.panel-card{background:#fff;border:1px solid #dbe1ea;border-radius:22px;overflow:hidden}.panel-card-header{border-bottom:1px solid #eef2f7;padding:14px 16px}.panel-card-header h3{margin:0;font-size:16px}.content-card{min-height:260px;padding:18px}.empty-state{text-align:center;color:#6b7280;background:#fbfcfe;border:1px dashed #dbe1ea;border-radius:18px;padding:54px 24px}.queue-panel{overflow:hidden}.queue-list{flex-direction:column;display:flex}.queue-row{border-top:1px solid #eef2f7;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px;padding:16px 18px;display:grid}.queue-row:first-child{border-top:0}.queue-main{min-width:0}.queue-topline{justify-content:space-between;align-items:center;gap:12px;display:flex}.queue-name{color:#1f2937;white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:700;overflow:hidden}.queue-meta{color:#6b7280;align-items:center;gap:8px;margin-top:6px;font-size:13px;display:flex}.queue-progress{background:#e7ebf0;border-radius:999px;width:100%;height:10px;margin-top:12px;overflow:hidden}.queue-progress-bar{background:#94a3b8;width:0;height:100%;transition:width .2s}.queue-message-inline{color:#64748b;margin-top:10px;font-size:13px}.queue-side{justify-content:flex-end;align-items:flex-start;display:flex}.queue-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.queue-badge{border:1px solid #0000;border-radius:999px;flex-shrink:0;padding:6px 10px;font-size:12px;font-weight:700;line-height:1}.queue-badge-pending{color:#6b7280;background:#f3f4f6;border-color:#e5e7eb}.queue-badge-uploading{color:#2563eb;background:#eff6ff;border-color:#bfdbfe}.queue-badge-conflict{color:#c2410c;background:#fff7ed;border-color:#fdba74}.queue-badge-done{color:#15803d;background:#f0fdf4;border-color:#86efac}.queue-badge-error{color:#dc2626;background:#fef2f2;border-color:#fecaca}.status-pending .queue-progress-bar{background:#cbd5e1}.status-uploading .queue-progress-bar{background:#3b82f6}.status-conflict .queue-progress-bar{background:#f59e0b}.status-done .queue-progress-bar{background:#22c55e}.status-error .queue-progress-bar{background:#ef4444}.queue-panel-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.queue-summary{color:#6b7280;font-size:13px}@media (width<=900px){.queue-row{grid-template-columns:1fr}.queue-topline{flex-direction:column;align-items:flex-start}.queue-side,.queue-actions{justify-content:flex-start}}.grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;display:grid}.media-card{background:#fff;border:1px solid #e3e7ee;border-radius:18px;overflow:hidden}.media-card-preview{background:#f8fafc;border-bottom:1px solid #e7ebf0;justify-content:center;align-items:center;height:180px;display:flex}.card-image{object-fit:cover;width:100%;height:100%}.preview-generic{justify-content:center;align-items:center;width:100%;height:100%;padding:14px;display:flex}.preview-generic audio{width:100%;max-width:200px}.file-badge{color:#475569;background:#e7ebf0;border-radius:999px;padding:10px 14px;font-size:13px;font-weight:700}.media-card-body{padding:14px}.file-name{white-space:nowrap;text-overflow:ellipsis;margin-bottom:8px;font-size:14px;font-weight:700;overflow:hidden}.file-meta{color:#6b7280;margin-bottom:12px;font-size:13px}.card-actions{flex-wrap:wrap;gap:8px;display:flex}.hidden-input{display:none}.error-box{color:#b91c1c;background:#fff5f5;border:1px solid #f5caca;border-radius:14px;padding:12px 14px}.modal-backdrop{z-index:1000;background:#0f172a6b;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.modal-card{background:#fff;border-radius:22px;width:100%;max-width:520px;overflow:hidden;box-shadow:0 24px 60px #0f172a33}.modal-header{border-bottom:1px solid #e5e7eb;justify-content:space-between;align-items:center;padding:18px 20px;display:flex}.modal-header h3{margin:0;font-size:20px}.modal-body{padding:20px}.modal-footer{border-top:1px solid #e5e7eb;justify-content:flex-end;gap:10px;padding:18px 20px;display:flex}.modal-text{color:#374151;margin:0;line-height:1.5}.form-field{flex-direction:column;gap:8px;display:flex}.form-field span{font-size:14px;font-weight:600}.auth-page{background:#eef1f5;justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.auth-card{background:#fff;border:1px solid #dde3eb;border-radius:24px;width:100%;max-width:420px;padding:24px;box-shadow:0 10px 30px #0f172a14}.auth-title{margin:0 0 8px;font-size:28px}.auth-subtitle{color:#6b7280;margin:0 0 20px}.auth-form{flex-direction:column;gap:16px;display:flex}.auth-submit{width:100%}.auth-submit-link{justify-content:center;align-items:center;text-decoration:none;display:inline-flex}@media (width<=980px){.app-frame{grid-template-columns:1fr}.sidebar{border-bottom:1px solid #dfe4ec;border-right:0}.topbar{flex-direction:column;align-items:flex-start}.topbar-actions{justify-content:flex-start}.filters-row,.queue-row{grid-template-columns:1fr}.queue-side{align-items:flex-start}.queue-actions{justify-content:flex-start}}.folder-tree{flex-direction:column;gap:3px;min-height:0;display:flex;overflow-y:auto}.folder-tree-node{width:100%}.folder-tree-row{border:1px solid #0000;border-radius:10px;align-items:center;gap:4px;min-height:40px;padding-top:5px;padding-bottom:5px;padding-right:6px;transition:background .15s,border-color .15s;display:flex}.folder-tree-row:hover{background:#f3f5f8}.folder-tree-row.active{background:#e8eef7;border-color:#c8d5e5}.folder-expand-button{color:#64748b;background:0 0;border:0;flex:0 0 22px;justify-content:center;align-items:center;width:22px;height:28px;padding:0;font-size:15px;display:inline-flex}.folder-expand-button:disabled{cursor:default;opacity:0}.folder-tree-title{color:#1f2937;text-align:left;background:0 0;border:0;flex:1;align-items:center;gap:7px;min-width:0;padding:4px 2px;display:flex}.folder-icon{flex-shrink:0;font-size:15px}.folder-tree-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:14px;font-weight:600;overflow:hidden}.folder-tree-actions{opacity:0;align-items:center;gap:3px;transition:opacity .15s;display:flex}.folder-tree-row:hover .folder-tree-actions,.folder-tree-row.active .folder-tree-actions{opacity:1}.folder-action-button{color:#64748b;background:0 0;border:0;border-radius:7px;justify-content:center;align-items:center;width:27px;height:27px;padding:0;display:inline-flex}.folder-action-button:hover{color:#1f2937;background:#fff}.folder-action-button.danger{color:#dc2626}.folder-action-button.danger:hover{background:#fff1f2}.folder-tree-children{width:100%}.pagination{border-top:1px solid #e5e7eb;justify-content:space-between;align-items:center;gap:16px;margin-top:20px;padding-top:16px;display:flex}.pagination-info{color:#64748b;font-size:14px}.pagination-controls{align-items:center;gap:8px;display:flex}.pagination-size{background:#fff;border:1px solid #d6dbe3;border-radius:8px;min-width:72px;height:36px;padding:0 10px}.pagination-button{color:#1f2937;background:#fff;border:1px solid #d6dbe3;border-radius:8px;width:36px;height:36px;padding:0;font-size:18px}.pagination-button:hover:not(:disabled){background:#f3f5f8;border-color:#b8c1ce}.pagination-button:disabled{opacity:.4;cursor:not-allowed}.pagination-page{text-align:center;color:#475569;min-width:130px;font-size:14px}@media (width<=760px){.pagination{flex-direction:column;align-items:stretch}.pagination-controls{flex-wrap:wrap;justify-content:center}}