@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;1,400&family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* --- Thème Clair (Défaut) --- */
  --bg:          #f7f5f0;
  --card:        #faf8f3;
  --card-inner:  #f0ebe0;
  --border:      #e0d9cc;
  --border-h:    #c4b89e;
  --ink:         #1e1a14;
  --ink-2:       #4a4030;
  --ink-3:       #8c8070;
  --ink-4:       #b8ac98;
  --green:       #085041;
  --green-bg:    #e1f5ee;
  --blue:        #0c447c;
  --blue-bg:     #e6f1fb;
  --white-editor: #ffffff;
}

/* --- Thème Sombre (Optimisé Studio) --- */
body.dark-mode {
  --bg:          #121210; /* Gris organique très profond */
  --card:        #1c1c1a; /* Cartes légèrement surélevées */
  --card-inner:  #262623;
  --border:      #32322f;
  --border-h:    #454541;
  --ink:         #e4e0d5; /* Texte couleur "os" (crème doux) pour éviter la fatigue */
  --ink-2:       #b5b0a5;
  --ink-3:       #8a857a;
  --ink-4:       #5a564f;
  --green:       #4ecdb4;
  --green-bg:    #1a332d;
  --blue:        #7fb6f5;
  --blue-bg:     #1e2d3d;
  --white-editor: #22221f;
}

@keyframes livepulse{ 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes fadeIn   { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin     { to{transform:rotate(360deg)} }

#loading { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; z-index: 999; transition: opacity .4s; }
#loading.hidden { opacity: 0; pointer-events: none; }
.loading-dots { display: flex; gap: 6px; }
.loading-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); animation: pulse 1.2s ease-in-out infinite; }
.loading-dot:nth-child(2) { animation-delay: .2s; }
.loading-dot:nth-child(3) { animation-delay: .4s; }

body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--ink); min-height: 100vh; -webkit-tap-highlight-color: transparent; transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s; }
.page { max-width: 700px; margin: 0 auto; padding: 52px 24px 80px; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.brand { font-family: 'Lora', serif; font-size: 26px; font-weight: 500; color: var(--ink); letter-spacing: -.3px; }

.header-right { display: flex; align-items: center; gap: 12px; }
.save-status { font-size: 11px; color: var(--ink-3); font-style: italic; opacity: 0; transition: opacity 0.3s; margin-right: 4px; }
.save-status.visible { opacity: 1; }

.actions-group { display: flex; align-items: center; gap: 8px; }

.edit-toggle, .theme-toggle { background: var(--card-inner); border: 1.5px solid var(--border); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-3); transition: all 0.2s; }
.edit-toggle:hover, .theme-toggle:hover { border-color: var(--border-h); color: var(--ink); }
.edit-toggle.active { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.live-badge { display: flex; align-items: center; opacity: 0; transition: opacity .4s; }
.live-badge.on { opacity: 1; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: livepulse 2s ease-in-out infinite; }

.add-song-btn { display: flex; align-items: center; gap: 7px; background: var(--ink); color: var(--bg); border: none; cursor: pointer; padding: 8px 16px; border-radius: 24px; font-size: 13px; font-weight: 500; transition: transform 0.1s; }
.add-song-btn:active { transform: scale(0.96); }

.songs { display: flex; flex-direction: column; gap: 10px; }
.song-card { background: var(--card); border: 0.5px solid var(--border); border-radius: 14px; overflow: hidden; transition: border-color .2s, background 0.3s; animation: fadeIn 0.22s ease; }

.drag-handle { cursor: grab; color: var(--ink-4); padding: 0 4px; display: flex; align-items: center; justify-content: center; }
.drag-handle:active { cursor: grabbing; }

.song-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; user-select: none; }
.track-num { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--ink-4); min-width: 22px; }
.song-title-input { font-family: 'Lora', serif; font-size: 16px; font-weight: 500; color: var(--ink); background: transparent; border: none; outline: none; flex: 1; min-width: 0; }

.song-meta { display: flex; align-items: center; gap: 4px; margin-right: 4px; }
.tag-icon { 
    width: 22px; 
    height: 22px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    background: rgba(224, 217, 204, 0.2); 
    color: var(--ink-3); 
    transition: background 0.3s;
}
body.dark-mode .tag-icon { background: rgba(224, 217, 204, 0.1); color: var(--ink-2); }
.tag-icon svg { width: 12px; height: 12px; }

.expand-btn { background: none; border: none; cursor: pointer; color: var(--ink-4); padding: 4px; transition: transform 0.3s; display: flex; align-items: center; justify-content: center; }
.expand-btn.open { transform: rotate(180deg); color: var(--ink); }
.expand-btn svg { width: 18px; height: 18px; }

.song-body { border-top: 0.5px solid var(--border); padding: 16px; display: none; flex-direction: column; gap: 12px; }
.song-body.open { display: flex; }

.editor-container { background: var(--card-inner); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; border: 0.5px solid var(--border); }
.editor-toolbar { display: flex; gap: 4px; padding: 6px; background: rgba(0,0,0,0.03); border-bottom: 0.5px solid var(--border); }
body.dark-mode .editor-toolbar { background: rgba(255,255,255,0.02); }
.tool-btn { background: none; border: none; cursor: pointer; width: 30px; height: 30px; border-radius: 4px; color: var(--ink-3); display: flex; align-items: center; justify-content: center; font-weight: bold; font-family: 'Lora', serif; }
.tool-btn:hover { background: var(--white-editor); color: var(--ink); }

.notes-area { font-family: 'Lora', serif; font-size: 14px; line-height: 1.7; color: var(--ink-2); outline: none; width: 100%; min-height: 100px; padding: 14px; background: var(--white-editor); }
.notes-area ul, .notes-area ol { padding-left: 25px; margin: 12px 0; }
.notes-area li { margin-bottom: 6px; }

.audios { display: flex; flex-direction: column; gap: 8px; }
.audio-row { background: var(--card-inner); border-radius: 10px; padding: 12px; border: 0.5px solid transparent; display: flex; flex-direction: column; gap: 8px; transition: border-color 0.2s, background 0.3s; }

.readonly-mode .audio-row { cursor: default; }
body:not(.readonly-mode) .audio-row { cursor: grab; }
body:not(.readonly-mode) .audio-row:active { cursor: grabbing; }

.audio-top { display: flex; align-items: center; gap: 8px; }
.audio-name { font-size: 12px; color: var(--ink-2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'DM Mono', monospace; }
.del-audio { background: none; border: none; cursor: pointer; color: var(--ink-4); font-size: 18px; }

.waveform { display: flex; align-items: center; gap: 2px; height: 24px; cursor: pointer; width: 100%; }
.wbar { flex: 1; height: 60%; border-radius: 1px; background: var(--border-h); transition: background 0.1s; }
.wbar.p { background: var(--ink); }

.audio-controls { display: flex; align-items: center; gap: 12px; }
.ctrl-btn { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--bg); flex-shrink: 0; }
.ctrl-btn svg { width: 14px; height: 14px; }
.ctrl-btn.skip-back, .ctrl-btn.skip-fwd { background: var(--border); color: var(--ink-2); width: 30px; height: 30px; }
.audio-time { font-size: 11px; color: var(--ink-3); font-family: 'DM Mono', monospace; margin-left: auto; }

.add-audio-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: transparent; border: 1px dashed var(--ink-4); border-radius: 8px; padding: 10px; font-size: 12px; color: var(--ink-3); cursor: pointer; width: 100%; transition: all 0.2s; }
.add-audio-btn:hover { border-color: var(--ink-2); color: var(--ink-2); background: rgba(0,0,0,0.02); }

.upload-progress { height: 4px; background: var(--border); border-radius: 2px; display: none; margin: 8px 0; }
.upload-progress.active { display: block; }
.upload-bar { height: 100%; background: var(--green); width: 0%; transition: width 0.3s; }

.del-song { background: none; border: none; cursor: pointer; font-size: 11px; color: var(--ink-4); align-self: flex-end; margin-top: 4px; }

.notif { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--ink); color: var(--bg); padding: 10px 24px; border-radius: 30px; transition: transform 0.4s; z-index: 1000; font-size: 13px; }
.notif.show { transform: translateX(-50%) translateY(0); }

.sortable-ghost { opacity: 0.2; background: var(--border); }

/* --- Read Only Mode toggles --- */
.readonly-mode #btn-add-main,
.readonly-mode .drag-handle,
.readonly-mode .editor-toolbar,
.readonly-mode .del-audio,
.readonly-mode .add-audio-btn,
.readonly-mode .del-song { display: none !important; }
.readonly-mode .song-title-input { pointer-events: none; }

@media (max-width: 500px) { .page { padding: 24px 16px; } .save-status { display: none; } }