:root{
  --bg:#14161c; --panel:#1c1f28; --panel2:#20232e; --border:#2c3040;
  --text:#e8e9ee; --muted:#8b90a3; --accent:#4f8cff; --good:#33cc99; --warn:#ffb020; --bad:#ff5f6d;
}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}

header{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--border);flex-wrap:wrap;position:sticky;top:0;z-index:20;}
header h1{font-size:15px;margin:0;color:var(--muted);font-weight:600;white-space:nowrap;}
#titleInput{background:transparent;border:1px solid transparent;color:var(--text);font-size:16px;font-weight:600;padding:4px 6px;border-radius:6px;min-width:160px;}
#titleInput:hover,#titleInput:focus{border-color:var(--border);outline:none;background:var(--panel2);}
.spacer{flex:1;}
.btn{background:var(--panel2);border:1px solid var(--border);color:var(--text);padding:6px 12px;border-radius:6px;font-size:13px;}
a.btn{display:inline-flex;align-items:center;text-decoration:none;box-sizing:border-box;}
.btn:disabled{opacity:.4;cursor:default;}
.btn:disabled:hover{border-color:var(--border);}
.btn:hover{border-color:var(--accent);}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn.small{padding:3px 8px;font-size:12px;}
.btn.toggle.on{background:var(--good);border-color:var(--good);color:#062;}
#fileLoadInput,#audioFileInput,#importLrcInput{display:none;}

#layout{display:flex;gap:14px;padding:14px;align-items:flex-start;}
#leftPanel{width:340px;flex:none;position:sticky;top:62px;display:flex;flex-direction:column;gap:12px;}
#rightPanel{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;}

.card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:14px;}
.card h2{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px;}

/* Audio player */
.transport{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
#playBtn{font-size:16px;width:38px;height:38px;border-radius:50%;background:var(--accent);border:none;color:#fff;}
#seekBar{flex:1;accent-color:var(--accent);}
.timeRow{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted);margin-bottom:10px;}
#curTime{color:var(--text);font-weight:600;font-size:16px;}
.speedRow{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);}
#speedRange{flex:1;accent-color:var(--good);}
#audioName{font-size:12px;color:var(--muted);margin-top:8px;word-break:break-all;}

/* Sync mode box */
.syncBox{display:flex;flex-direction:column;gap:8px;}
.syncStatus{font-size:12px;color:var(--muted);line-height:1.5;}
.pointerInfo{font-size:13px;padding:8px;background:var(--panel2);border-radius:6px;border:1px dashed var(--border);}
.navRow{display:flex;gap:6px;}

/* Metadata editor */
.metaRow{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.metaRow label{font-size:12px;color:var(--muted);width:56px;flex:none;}
.metaRow input[type="text"],.metaRow input[type="number"]{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--border);color:var(--text);padding:6px 8px;border-radius:6px;font-size:13px;}
.metaRow input:focus{outline:none;border-color:var(--accent);}
.metaArtControls{display:flex;align-items:center;gap:8px;flex:1;flex-wrap:wrap;}
#metaArtPreview{width:40px;height:40px;object-fit:cover;border-radius:6px;border:1px solid var(--border);}
.explicitRow{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);margin:6px 0 2px;cursor:pointer;}
.explicitRow input{accent-color:var(--warn);}

/* Rhyme */
#rhymeWord{font-weight:700;color:var(--accent);}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.chip{background:var(--panel2);border:1px solid var(--border);border-radius:14px;padding:3px 10px;font-size:12px;}
.chip:hover{border-color:var(--accent);}

/* Sections */
.sectionCard{border-radius:10px;border:1px solid var(--border);overflow:hidden;background:var(--panel);}
.sectionHead{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;user-select:none;}
.sectionHead .swatch{width:10px;height:10px;border-radius:50%;flex:none;}
.sectionHead .name{font-weight:700;flex:1;background:transparent;border:none;color:var(--text);font-size:14px;padding:2px 4px;border-radius:4px;}
.sectionHead .name:focus{background:var(--panel2);outline:1px solid var(--border);}
.sectionMeta{font-size:11px;color:var(--muted);white-space:nowrap;}
.sectionBadge{font-size:11px;padding:3px 8px;border-radius:5px;border:1px solid var(--border);background:var(--panel2);color:var(--muted);cursor:pointer;}
.sectionBody{padding:6px 12px 12px;}
.sectionBody.collapsed{display:none;}

.lineRow{display:flex;align-items:center;gap:8px;padding:5px 4px;border-radius:6px;position:relative;}
.lineRow.isPointer{background:rgba(79,140,255,0.12);box-shadow:inset 3px 0 0 var(--accent);}
.lineRow.isActive{background:rgba(51,204,153,0.16);box-shadow:inset 3px 0 0 var(--good);}
.lineRow.isActive .lineText{color:#fff;font-weight:600;}
.sectionHead.isActive{background:rgba(51,204,153,0.12);}
.lineRow .arrow{width:14px;color:var(--accent);font-size:12px;flex:none;text-align:center;}
.badge{font-variant-numeric:tabular-nums;font-size:11px;padding:4px 7px;border-radius:5px;border:1px solid var(--border);background:var(--panel2);color:var(--muted);min-width:66px;text-align:center;flex:none;}
.badge.stamped{color:var(--good);border-color:var(--good);}
.clearBtn{background:none;border:none;color:var(--bad);font-size:12px;flex:none;opacity:.7;}
.clearBtn:hover{opacity:1;}
.lineText{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--border);color:var(--text);padding:6px 8px;border-radius:6px;font-size:13px;}
.lineText:focus{outline:none;border-color:var(--accent);}
.syll{font-size:10px;color:var(--muted);flex:none;width:34px;text-align:center;}
.rowBtn{background:none;border:none;color:var(--muted);font-size:14px;flex:none;padding:2px 4px;}
.rowBtn:hover{color:var(--text);}
.rhymePanel{margin:4px 4px 8px 78px;padding:8px;background:var(--panel2);border:1px solid var(--border);border-radius:6px;font-size:12px;}
.addLineBtn{margin-top:4px;background:none;border:1px dashed var(--border);color:var(--muted);padding:5px 10px;border-radius:6px;font-size:12px;width:100%;text-align:left;}
.addLineBtn:hover{border-color:var(--accent);color:var(--accent);}

#addSectionRow{display:flex;gap:8px;}
#saveStatus{font-size:11px;color:var(--muted);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px;}

@media (max-width: 800px){
  #layout{flex-direction:column;}
  #leftPanel{width:100%;position:static;}
}

/* Dashboard */
.dashMain{max-width:1100px;margin:0 auto;padding:24px;}
.intro{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:16px 40px 16px 18px;margin-bottom:22px;font-size:13px;color:var(--muted);line-height:1.6;position:relative;}
.intro strong{color:var(--text);}
.intro .dismiss{position:absolute;top:10px;right:10px;background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer;padding:4px 8px;border-radius:6px;}
.intro .dismiss:hover{background:var(--panel2);color:var(--text);}

.projectGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.projectTile{
  background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px;
  cursor:pointer;position:relative;transition:border-color .15s ease, transform .15s ease;
  min-height:110px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;color:inherit;
}
.projectTile:hover{border-color:var(--accent);transform:translateY(-2px);}
.projectTile .name{font-weight:700;font-size:15px;margin:0 0 6px;padding-right:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.projectTile .meta{font-size:12px;color:var(--muted);}
.projectTile .stat{font-size:11px;color:var(--muted);margin-top:8px;}
.tileMenuBtn{
  position:absolute;top:8px;right:6px;background:none;border:none;color:var(--muted);
  font-size:16px;padding:4px 8px;border-radius:6px;cursor:pointer;line-height:1;
}
.tileMenuBtn:hover{background:var(--panel2);color:var(--text);}
.tileMenu{
  position:absolute;top:34px;right:8px;background:var(--panel2);border:1px solid var(--border);
  border-radius:8px;overflow:hidden;z-index:10;min-width:120px;box-shadow:0 8px 24px rgba(0,0,0,0.4);
}
.tileMenu button{
  display:block;width:100%;text-align:left;background:none;border:none;color:var(--text);
  padding:8px 12px;font-size:13px;cursor:pointer;
}
.tileMenu button:hover{background:var(--border);}
.tileMenu button.danger{color:var(--bad);}

.newTile{
  border:1px dashed var(--border);border-radius:12px;padding:16px;min-height:110px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);
  font-size:14px;font-weight:600;transition:border-color .15s ease,color .15s ease;background:none;
}
.newTile:hover{border-color:var(--accent);color:var(--accent);}
.emptyState{color:var(--muted);font-size:14px;padding:40px 0;text-align:center;}

.dialogOverlay{
  position:fixed;inset:0;background:rgba(10,11,15,0.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:100;
}
.dialogBox{
  background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:20px;width:320px;box-shadow:0 20px 60px rgba(0,0,0,0.45);
}
.dialogTitle{font-size:14px;font-weight:600;color:var(--text);margin-bottom:12px;}
.dialogInput{
  width:100%;background:var(--panel2);border:1px solid var(--border);color:var(--text);
  font-size:14px;padding:8px 10px;border-radius:8px;outline:none;
}
.dialogInput:focus{border-color:var(--accent);}
.dialogButtons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;}