*{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}}