*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#f5f5f5;color:#222;font-size:14px;line-height:1.5}
.wrap{max-width:960px;margin:0 auto;padding:12px 16px}
h1{font-size:20px;font-weight:700;margin-bottom:12px;color:#111}

/* Analytics Dashboard */
.analytics{background:#fff;border:1px solid #ddd;border-radius:6px;padding:14px 16px;margin-bottom:12px}
.stats-row{display:flex;gap:10px;flex-wrap:wrap}
.stat-card{flex:1;min-width:80px;text-align:center;padding:10px 8px;border-radius:5px;background:#fafafa;border:1px solid #eee}
.stat-num{font-size:24px;font-weight:800;line-height:1.1;color:#222}
.stat-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:#888;margin-top:2px}
.stat-card.stat-pending{border-left:3px solid #f39c12}
.stat-card.stat-pending .stat-num{color:#f39c12}
.stat-card.stat-progress{border-left:3px solid #3498db}
.stat-card.stat-progress .stat-num{color:#3498db}
.stat-card.stat-done{border-left:3px solid #27ae60}
.stat-card.stat-done .stat-num{color:#27ae60}

/* Progress bar */
.stats-bar-wrap{margin:12px 0 10px}
.stats-bar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:#eee}
.stats-bar-seg{height:100%;transition:width .4s ease}
.bar-pending{background:#f39c12}
.bar-progress{background:#3498db}
.bar-done{background:#27ae60}

/* Assignee breakdown */
.stats-assignee{margin-top:2px}
.stat-card.stat-assignee{text-align:left;padding:8px 12px;display:flex;align-items:center;justify-content:space-between}
.stat-card.stat-assignee .stat-label{font-size:13px;font-weight:700;color:#333;text-transform:none;letter-spacing:0}
.stat-detail{font-size:12px;color:#666}
.stat-detail span{font-weight:700;color:#333}

/* Status Tabs */
.tabs{display:flex;gap:0;margin-bottom:8px;border-bottom:2px solid #eee}
.tab-btn{padding:8px 20px;border:none;background:none;cursor:pointer;font-size:13px;font-weight:600;color:#888;position:relative;transition:color .15s}
.tab-btn:hover{color:#222}
.tab-btn.active{color:#222}
.tab-btn.active::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:#222;border-radius:1px}
.tab-btn[data-status="pending"].active{color:#f39c12}
.tab-btn[data-status="pending"].active::after{background:#f39c12}
.tab-btn[data-status="in_progress"].active{color:#3498db}
.tab-btn[data-status="in_progress"].active::after{background:#3498db}
.tab-btn[data-status="done"].active{color:#27ae60}
.tab-btn[data-status="done"].active::after{background:#27ae60}

/* Assignee Filters */
.filters{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.filters button{padding:4px 12px;border:1px solid #ddd;background:#fff;border-radius:3px;cursor:pointer;font-size:12px;color:#666;transition:all .15s}
.filters button.active,.filters button:hover{background:#222;color:#fff;border-color:#222}

/* Form */
.add-form{background:#fff;border:1px solid #ddd;border-radius:4px;padding:12px;margin-bottom:16px;display:none}
.add-form.open{display:block}
.add-form .row{display:flex;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.add-form label{font-size:12px;font-weight:600;display:block;margin-bottom:2px;color:#555}
.add-form input[type="text"],.add-form select,.add-form textarea{width:100%;padding:6px 8px;border:1px solid #ccc;border-radius:3px;font-size:13px;font-family:inherit}
.add-form textarea{resize:vertical;min-height:60px}
.add-form .col{flex:1;min-width:140px}
.add-form .col-full{flex-basis:100%}
.btn{padding:6px 16px;border:none;border-radius:3px;cursor:pointer;font-size:13px;font-weight:600;transition:background .15s}
.btn-primary{background:#222;color:#fff}.btn-primary:hover{background:#444}
.btn-sm{padding:3px 10px;font-size:12px}
.btn-danger{background:#c0392b;color:#fff}.btn-danger:hover{background:#e74c3c}
.btn-success{background:#27ae60;color:#fff}.btn-success:hover{background:#2ecc71}
.btn-outline{background:#fff;border:1px solid #ccc;color:#333}.btn-outline:hover{background:#f0f0f0}
.btn-toggle{padding:5px 14px;background:#fff;border:1px solid #ccc;border-radius:3px;cursor:pointer;font-size:13px;font-weight:600}

/* Table */
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #ddd;border-radius:4px;overflow:hidden}
thead{background:#fafafa}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid #eee;font-size:13px}
th{font-weight:600;color:#555;font-size:12px;text-transform:uppercase;letter-spacing:.3px}
tr:hover{background:#f9f9f9}
tr.editing{background:#fffde7}

/* Status badges */
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;cursor:pointer;user-select:none}
.badge-pending{background:#f39c12;color:#fff}
.badge-in_progress{background:#3498db;color:#fff}
.badge-done{background:#27ae60;color:#fff}

/* Assignee */
.tag{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;font-weight:600}
.tag-sovon{background:#e8daef;color:#6c3483}
.tag-dhiman{background:#d5f5e3;color:#1e8449}

/* Actions */
.actions{display:flex;gap:4px}

/* Lyrics preview */
.lyrics-cell{max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.lyrics-cell.expanded{white-space:pre-wrap;max-width:none}

/* Edit form in row */
.edit-input{padding:4px 6px;border:1px solid #ccc;border-radius:3px;font-size:12px;font-family:inherit;width:100%}
.edit-textarea{padding:4px 6px;border:1px solid #ccc;border-radius:3px;font-size:12px;font-family:inherit;width:100%;min-height:40px;resize:vertical}

/* Download link */
a.dl{color:#2980b9;text-decoration:none;font-size:12px}
a.dl:hover{text-decoration:underline}

/* Empty state */
.empty{text-align:center;padding:40px;color:#999;font-size:14px}

/* Toast */
.toast{position:fixed;bottom:20px;right:20px;background:#222;color:#fff;padding:10px 20px;border-radius:4px;font-size:13px;opacity:0;transition:opacity .3s;pointer-events:none;z-index:999}
.toast.show{opacity:1}

/* Save button spinner */
.btn-saving{position:relative;pointer-events:none;opacity:.7}
.btn-saving::after{content:'';position:absolute;right:8px;top:50%;width:14px;height:14px;margin-top:-7px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-saving .btn-text{opacity:0}
.btn-saving .btn-spinner-text{display:inline}
.btn-spinner-text{display:none}

/* Upload progress bar */
.upload-progress{height:3px;background:#eee;border-radius:2px;margin-top:6px;overflow:hidden;display:none}
.upload-progress.active{display:block}
.upload-progress-bar{height:100%;background:#222;border-radius:2px;width:0%;transition:width .2s}

/* Lyrics popup modal */
.lyrics-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;display:none;align-items:center;justify-content:center}
.lyrics-overlay.open{display:flex}
.lyrics-modal{background:#fff;border-radius:6px;padding:0;max-width:520px;width:90%;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 8px 30px rgba(0,0,0,.2);animation:modalIn .2s ease}
@keyframes modalIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.lyrics-modal-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #eee}
.lyrics-modal-header h3{font-size:15px;font-weight:700;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.lyrics-modal-actions{display:flex;gap:6px;margin-left:10px;flex-shrink:0}
.lyrics-modal-actions button{background:none;border:1px solid #ddd;border-radius:4px;padding:4px 10px;cursor:pointer;font-size:12px;color:#555;display:flex;align-items:center;gap:4px;transition:background .15s}
.lyrics-modal-actions button:hover{background:#f0f0f0}
.lyrics-modal-actions button.copied{background:#27ae60;color:#fff;border-color:#27ae60}
.lyrics-modal-body{padding:16px;overflow-y:auto;white-space:pre-wrap;font-size:13px;line-height:1.7;color:#333}

/* Copy icon SVG inline */
.copy-icon{width:14px;height:14px}

/* Lyrics cell with icon */
.lyrics-cell{position:relative}
.lyrics-copy-btn{display:none;position:absolute;right:4px;top:50%;transform:translateY(-50%);background:#fff;border:1px solid #ddd;border-radius:3px;padding:2px 4px;cursor:pointer;font-size:10px;line-height:1}
tr:hover .lyrics-copy-btn{display:inline-flex}

/* Status dropdown */
.status-select-wrap{position:relative;display:inline-flex;align-items:center;gap:6px}
.status-select{appearance:none;-webkit-appearance:none;padding:3px 22px 3px 10px;border-radius:12px;font-size:11px;font-weight:600;border:2px solid transparent;cursor:pointer;outline:none;transition:opacity .2s}
.status-select option{font-weight:normal;font-size:13px;color:#222;background:#fff}
.status-select-pending{background:#f39c12;color:#fff}
.status-select-in_progress{background:#3498db;color:#fff}
.status-select-done{background:#27ae60;color:#fff}
.status-select-wrap .arrow{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:9px;color:#fff;pointer-events:none}

/* Status spinner — circular ring next to dropdown */
.status-spinner{display:none;width:16px;height:16px;border:2px solid #ddd;border-top-color:#222;border-radius:50%;animation:spin .5s linear infinite;flex-shrink:0}
.status-select-wrap.loading .status-spinner{display:block}
.status-select-wrap.loading .status-select{opacity:.5;pointer-events:none}
.status-select-wrap.loading .arrow{display:none}

/* Responsive */
@media(max-width:600px){
  .add-form .row{flex-direction:column}
  table{font-size:12px}
  th,td{padding:6px}
  .lyrics-cell{max-width:100px}
}