/* ==== Design System v2 – Audio Tool Mode ==== */
:root{
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;

  --bg-start: #151823;
  --bg-end:   #1b1f2a;
  --panel:    #1a1e28;
  --panel-2:  #1e232e;
  --border:   #252b38;

  --text:     #e2e6ee;
  --muted:    #7a8296;

  --accent:   #4a8ad4;
  --play:     #2da44e;
  --stop:     #cf222e;

  --mono: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  background: linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 100%);
  color:var(--text);
  font: 15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
a{ color:var(--text); text-decoration:none; }
a:hover{ color:var(--muted); text-decoration:underline; }

/* === Nav === */
.nav{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center;
  padding: var(--space-sm) var(--space-md);
  min-height: 48px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.nav__brand a{ color:var(--text); }
.nav__logo{ height: 40px; width: auto; display:block; }
.nav__center{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
}
.nav__center-link{
  font-size: 1.00rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}
.nav__center-link:hover{ color: var(--text); text-decoration: underline; opacity: 0.9; }
.nav__links{ margin-left:auto; }
.nav__links a{ margin-left: var(--space-md); color: var(--muted); font-size: 0.9em; }
.nav__links a:hover{ color: var(--text); }

/* === Layout === */
.container{ max-width: 1000px; margin: 0 auto; padding: var(--space-lg) var(--space-md) var(--space-md); }
.section{ margin-bottom: var(--space-lg); }
.section:not(:first-child){ padding-top: var(--space-lg); border-top: 1px solid var(--border); }
.section-title{ font-size: 0.95em; font-weight: 600; color: var(--muted); margin: 0 0 var(--space-sm); letter-spacing: 0.02em; }
.section-title--large{ font-size: 1.05em; font-weight: 600; color: var(--text); margin: 0 0 var(--space-md); }
.section--comments{ margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--border); }

/* === Track block (card) === */
.track-block{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}
.track-header-row{ display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-sm); }
.track-header-row .track-title-wrap{ flex: 1; min-width: 0; }
.track-title{ font-size: 1.35rem; font-weight: 500; margin: 0 0 var(--space-xs); letter-spacing: 0.01em; }
.track-meta{ font-size: 0.85em; color: var(--muted); margin: 0; }
.track-actions-row{ display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-md); }
.track-actions-row .btn{ font-weight: 500; }
.track-actions-row--compact{ margin-bottom: var(--space-sm); }
.track-actions-row--compact:last-of-type{ margin-bottom: 0; }
.version-row{ display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; margin-top: var(--space-sm); margin-bottom: 0; }
.version-row__label{ margin: 0; font-size: 0.9em; color: var(--muted); }
.version-row__select{ width: auto; min-width: 80px; }
.version-row__downloads{ display: inline-flex; gap: var(--space-xs); }
.track-filename{ font-size: 0.85em; margin-top: var(--space-sm); margin-bottom: 0; }
.header-row{ display: flex; align-items: center; gap: var(--space-md); justify-content: space-between; margin-bottom: var(--space-sm); flex-wrap: wrap; }

/* === Button size variant === */
.btn--sm{ padding: 5px 10px; font-size: 0.85em; }

/* === Typography === */
.mono{ font-family: var(--mono); }
.muted{ color: var(--muted); }
.empty{ color: var(--muted); padding: var(--space-md) 0; }

/* === Spacing === */
.space{ height: var(--space-sm); }
.hr{ height: 1px; background: var(--border); border: 0; margin: var(--space-md) 0; }

/* === Forms === */
label{ display: block; margin: var(--space-xs) 0 4px; color: var(--muted); font-size: 0.9em; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
select, textarea{
  width: 100%;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  outline: none;
  font-size: 0.95em;
}
textarea{ min-height: 100px; resize: vertical; }
input:focus, select:focus, textarea:focus{ border-color: var(--muted); }
.inline-form{ display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }

/* === Buttons === */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 14px;
  font-size: 0.9em; font-weight: 500;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
}
.btn:hover{ background: var(--panel-2); border-color: var(--muted); }
.btn--primary{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn--primary:hover{ filter: brightness(1.08); }
.btn--ghost{ background: transparent; border-color: var(--border); color: var(--text); }
.btn--ghost:hover{ background: var(--panel-2); }
.btn-danger{ background: var(--stop); border-color: var(--stop); color: #fff; }
.btn-danger:hover{ filter: brightness(1.08); }

.btn--play{
  background: var(--play) !important;
  border-color: var(--play) !important;
  color: #fff !important;
}
.btn--play:hover{ filter: brightness(1.08); }
.btn--stop{
  background: var(--stop) !important;
  border-color: var(--stop) !important;
  color: #fff !important;
}
.btn--stop:hover{ filter: brightness(1.08); }

/* === Flash === */
.flash{ margin-bottom: var(--space-md); }
.flash__item{
  background: var(--panel-2);
  border: 1px solid var(--border);
  padding: var(--space-sm) var(--space-md);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.9em;
}

/* === Lists & tables === */
.list{ display: grid; gap: var(--space-xs); }
.list__item{
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.list__item:hover{ background: var(--panel-2); }
.list__title{ font-weight: 500; }
.list__meta{ color: var(--muted); font-size: 0.9em; }

.table{ width: 100%; border-collapse: collapse; }
.table th, .table td{ text-align: left; padding: var(--space-sm); border-bottom: 1px solid var(--border); }
.table th{ font-weight: 500; color: var(--muted); font-size: 0.85em; }

/* === Grid === */
.grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.grid-2--single .project-section:first-child{ grid-column: 1 / -1; }
.grid-4{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
@media (max-width: 900px){
  .grid-2{ grid-template-columns: 1fr; }
  .grid-4{ grid-template-columns: 1fr; }
}

/* === Tags === */
.taglist{ list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.tag{
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.85em;
  display: flex; align-items: center; gap: 6px;
}
.tag__del{ background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 0; }
.tag__del:hover{ color: var(--text); }

/* === Row actions === */
.row-actions{ display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }

/* === Backfill progress bar === */
.backfill-progress-track{
  width: 100%;
  height: 8px;
  background: var(--panel-2);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.backfill-progress-fill{
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, #5b9de0 100%);
  border-radius: 3px;
  transition: width 0.35s ease-out;
}

/* === Waveform (centerpiece) === */
.wave{
  border: 1px solid var(--border);
  border-radius: 6px;
  min-height: 200px;
  background: var(--panel);
  position: relative;
  margin-bottom: 0;
}
.wave canvas{
  width: 100%;
  height: 200px;
  display: block;
  border-radius: 6px;
}
.wave__toolbar{
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  margin-top: var(--space-md);
  flex-wrap: wrap;
}
.wave__transport{
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 4px 10px;
  background: var(--panel-2);
  border-radius: 6px;
  border: 1px solid var(--border);
}
.wave__transport .btn{ padding: 6px 12px; font-size: 0.85em; border-radius: 4px; }
.wave__time{ font-size: 0.9em; min-width: 6ch; }
.wave__skip{ display: flex; gap: var(--space-xs); align-items: center; }
.wave__skip .btn{ padding: 4px 8px; font-size: 0.8em; border-radius: 4px; }
.wave__toolbar-sep{
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 var(--space-xs);
}
.wave__toolbar .waveform-meta{ margin-left: auto; }
.wave__toolbar .btn{ border-radius: 4px; }
.waveform-meta{
  font-size: 0.8em;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.waveform-meta .wf-value{ color: var(--text); font-variant-numeric: tabular-nums; }

.scrub-head{
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--text);
  opacity: 0.8;
}
.comment-dot{
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.3);
  z-index: 2;
  pointer-events: auto;
}
.comment-dot:hover{ filter: brightness(1.2); transform: translate(-50%, -50%) scale(1.15); }

/* === Comments section === */
.comment-add{ display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-sm); }
.comment-add__input{ flex: 1; min-width: 200px; }
.comments-hint{ font-size: 0.85em; margin: 0 0 var(--space-md); }
.comments{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.comments .row-actions{ margin-left: auto; display: flex; gap: var(--space-xs); align-items: center; }
.comments li{
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--accent);
  background: var(--panel);
  border-radius: 0 6px 6px 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-sm);
  border-bottom: none;
  box-shadow: 0 1px 0 var(--border);
}
.comments li:hover{ background: var(--panel-2); }
.comments .time-wrap{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.comments .time{
  font-family: var(--mono);
  font-size: 0.8em;
  color: var(--text);
  cursor: pointer;
  background: var(--panel-2);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.comments .time:hover{ background: var(--border); color: var(--text); }
.comments .body{ flex: 1; min-width: 0; font-size: 0.95em; }
.comments .row-actions .btn{ padding: 4px 10px; font-size: 0.85em; }

.comment-time-input{
  width: 80px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.85em;
}
.comment-text-input{
  flex: 1;
  min-width: 120px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.9em;
}
.color-dot{
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.time-wrap{ display: inline-flex; align-items: center; gap: 6px; }

/* === Modals === */
#commentsModal, #projectEditModal{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,.5);
}
#commentsModal .modal-card,
#projectEditModal .modal-card{
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  max-width: 900px;
  margin: 5vh auto;
  padding: var(--space-md);
  border-radius: 6px;
  max-height: 90vh;
  overflow: auto;
}
#commentsModal .modal-head,
#projectEditModal .modal-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}
#commentsModal .modal-title,
#projectEditModal .modal-title{ margin: 0; font-size: 1rem; font-weight: 500; }
#commentsContainer{ margin-top: var(--space-sm); font-size: 0.9em; }
#commentsContainer .track-block{ margin: var(--space-md) 0; padding-bottom: var(--space-md); border-bottom: 1px solid var(--border); }
#commentsContainer .track-title{ font-weight: 500; margin-bottom: var(--space-xs); font-size: 1.4em; }
#commentsContainer .section-label{ margin: var(--space-xs) 0; color: var(--muted); font-size: 0.9em; }
#commentsContainer ul{ margin: var(--space-xs) 0 var(--space-sm) var(--space-md); padding: 0; }

/* === Dialogs (share etc.) === */
.dialog-overlay{
  position: fixed;
  left: 50%;
  top: 15%;
  transform: translateX(-50%);
  z-index: 99;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--space-md);
  max-width: 480px;
  width: calc(100% - var(--space-md));
}
.dialog-overlay h2{ margin: 0 0 var(--space-sm); font-size: 1.1rem; font-weight: 500; }
.dialog-overlay--card{
  top: 50%;
  transform: translate(-50%, -50%);
  padding: var(--space-lg);
  max-width: 420px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
.dialog-overlay__title{ margin: 0 0 var(--space-xs); font-size: 1.1rem; font-weight: 600; }
.dialog-overlay__desc{ margin: 0 0 var(--space-md); font-size: 0.9em; }
.dialog-overlay__actions{ display: flex; gap: var(--space-sm); margin-top: var(--space-md); flex-wrap: wrap; }
.dialog-overlay__result{ margin-top: var(--space-sm); word-break: break-all; font-size: 0.9em; }

/* === Project page sections === */
.project-header{ margin-bottom: var(--space-lg); }
.project-header .track-header-row{ justify-content: flex-start; }
.project-header .track-header-row .track-title-wrap{ flex: 0 1 auto; }
.project-section{ margin-bottom: var(--space-lg); }
.project-section:not(:first-child){ padding-top: var(--space-lg); border-top: 1px solid var(--border); }

/* Legacy: dialogs that still use .card */
.card{ background: transparent; border: none; padding: 0; box-shadow: none; border-radius: 0; }
.card--center{ max-width: 520px; margin: 0 auto; }

/* === Mobile === */
@media (max-width: 700px){
  .nav{
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: var(--space-xs) var(--space-sm);
  }
  .nav__brand{
    display: flex;
    justify-content: center;
  }
  .nav__center{
    position: static;
    left: auto;
    transform: none;
    order: 2;
    text-align: center;
    margin-top: 2px;
  }
  .nav__links{
    margin-left: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
    font-size: 0.85em;
    order: 3;
  }
  .nav__links a{
    margin-left: 0;
  }
  .track-block{ padding: var(--space-sm); }
  .track-header-row{ flex-direction: column; align-items: flex-start; }
  .track-actions-row, .version-row{ gap: var(--space-xs); }
  .header-row{ flex-direction: column; align-items: flex-start; }
  .container{ padding: 0 var(--space-sm); }
  .wave{ min-height: 160px; }
  .wave canvas{ height: 160px; }
  .wave__toolbar{ flex-wrap: wrap; }
  .wave__transport{ flex-wrap: wrap; }
  .wave__toolbar-sep{ display: none; }
  .table th, .table td{ padding: var(--space-sm); }
  .comment-add{ flex-direction: column; align-items: stretch; }
  .comment-add__input{ min-width: 0; }
}