/* Copyright (c) Tokyo Dawn Records. All rights reserved. */

:root { --ink:#1c2830; --muted:#667681; --line:#c8d1d5; --accent:#146b75; --soft:#eef4f3; --selected:#d7ebea; --surface:#fff; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#f3f5f5; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:14px; }
button,select,input { font:inherit; } button { border:1px solid #aab6bc; background:#fff; color:var(--ink); border-radius:4px; padding:7px 13px; cursor:pointer; } button:hover:not(:disabled) { background:var(--soft); border-color:var(--accent); } button:disabled { cursor:not-allowed; opacity:.48; } button.primary { background:var(--accent); border-color:var(--accent); color:#fff; } button.primary:hover:not(:disabled) { background:#0d5760; }
.app-shell { width:min(100% - 40px,1060px); margin:42px auto 60px; }.app-header { display:flex; justify-content:space-between; align-items:end; padding-bottom:22px; border-bottom:3px solid var(--accent); margin-bottom:30px; }.eyebrow { color:var(--accent); letter-spacing:.16em; font-size:11px; font-weight:700; margin:0 0 3px; } h1,h2,h3 { font-weight:650; margin:0; } h1 { font-size:29px; letter-spacing:-.04em; } h2 { font-size:20px; margin-bottom:16px; } h3 { font-size:16px; margin:28px 0 12px; }.subtitle { color:var(--muted); margin:0; }
.table-frame { overflow-x:auto; background:var(--surface); border:1px solid var(--line); }.data-table { border-collapse:collapse; width:100%; table-layout:fixed; }.data-table th,.data-table td { border-bottom:1px solid #dde3e5; height:35px; padding:7px 11px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.data-table th { text-align:left; background:#e7edee; font-size:12px; letter-spacing:.025em; color:#405059; }.data-table tr:last-child td { border-bottom:0; }.selectable-table tbody tr { cursor:pointer; }.selectable-table tbody tr:hover td { background:#f4fafa; }.selectable-table tbody tr.selected td { background:var(--selected); }.side-row td { background:#f3f7f7; font-weight:650; color:#234d52; }.side-row td:nth-child(3),.analysis-side td:nth-child(4) { text-align:center; }.project-file td:nth-child(3),.project-file td:nth-child(4),.project-file td:nth-child(5),.analysis-item td:nth-child(3),.analysis-item td:nth-child(4),.analysis-item td:nth-child(5) { text-align:right; }.analysis-marker td:nth-child(2),.analysis-leadout td:nth-child(2) { text-align:center; color:var(--muted); font-style:italic; }.analysis-marker td:nth-child(3),.analysis-marker td:nth-child(4),.analysis-marker td:nth-child(5),.analysis-leadout td:nth-child(3),.analysis-leadout td:nth-child(5) { text-align:right; }.measurements td:nth-child(2) { text-align:right; }.measurements td:nth-child(3) { text-align:center; color:var(--muted); }
.table-frame.drop-target { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset; }.table-frame.drop-after-last { box-shadow:inset 0 -3px 0 var(--accent); }
.selectable-table tbody tr[draggable="true"] { cursor:default; }.selectable-table tbody tr.dragging { opacity:.45; }.selectable-table tbody tr.drag-over td { box-shadow:inset 0 2px 0 var(--accent); }.selectable-table tbody tr.drag-over-after td { box-shadow:inset 0 -2px 0 var(--accent); }
#project-table th:nth-child(1){width:18%}#project-table th:nth-child(2){width:40%}#project-table th:nth-child(3){width:18%}#project-table th:nth-child(4){width:16%}#project-table th:nth-child(5){width:8%}#analysis-table th:nth-child(1){width:18%}#analysis-table th:nth-child(2){width:36%}#analysis-table th:nth-child(3){width:18%}#analysis-table th:nth-child(4){width:18%}#analysis-table th:nth-child(5){width:10%}
.toolbar,.screen-actions { display:flex; align-items:center; gap:8px; margin-top:13px; }.toolbar { justify-content:space-between; }.button-group { display:flex; gap:8px; }.align-right { justify-content:flex-end; }.screen-actions { margin-top:28px; }.settings { display:grid; grid-template-columns:1fr 1fr; gap:16px 40px; margin-top:28px; max-width:640px; }.settings label,.dialog-form label { display:flex; flex-direction:column; gap:6px; color:#42535c; font-weight:600; }.settings select,.dialog-form input { min-height:34px; border:1px solid #b6c2c7; border-radius:4px; background:#fff; padding:6px 8px; color:var(--ink); font-weight:400; }.progress-panel { margin:22px 0 0; padding:17px; border:1px solid #9ec5c5; background:#edf8f7; }.progress-panel p { margin:0 0 8px; }.progress-panel progress { width:calc(100% - 82px); height:18px; vertical-align:middle; margin-right:8px; accent-color:var(--accent); }
dialog { width:min(100% - 32px,450px); border:0; border-radius:8px; padding:0; box-shadow:0 18px 50px #18343855; } dialog::backdrop { background:#15282c88; }.dialog-form { display:grid; gap:15px; padding:24px; }.dialog-form h2 { margin-bottom:2px; }.dialog-form .check-label { flex-direction:row; align-items:center; font-weight:400; }.dialog-form .check-label input { min-height:0; padding:0; }.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:4px; }.form-error { min-height:17px; margin:0; color:#b82d2d; font-size:12px; }
@media (max-width:640px) { .app-shell{width:min(100% - 24px,1060px);margin-top:24px}.app-header{align-items:start;gap:10px;flex-direction:column}.settings{grid-template-columns:1fr;gap:14px}.toolbar{align-items:flex-end}.button-group{flex-wrap:wrap}.progress-panel progress{width:100%;margin-bottom:10px}.progress-panel button{float:right} }


/* Reference desktop prototype theme. */
:root {
  --ink: #eef2f3;
  --muted: #b8c1c4;
  --line: #78858a;
  --accent: #b4dce8;
  --soft: #3b4b51;
  --selected: #b3ddec;
  --surface: #26353a;
}

/* Keep the inactive screen hidden even when its section has a display rule. */
[hidden] {
  display: none !important;
}

body {
  min-width: 930px;
  background: #000;
  color: var(--ink);
  font-family: "DejaVu Sans", Arial, sans-serif;
  font-size: 13px;
  font-style: normal;
}

.app-shell {
  width: 800px;
  min-height: 830px;
  margin: 52px auto 0;
  padding: 37px 10px 20px;
  background: #34444b;
  border: 1px solid #8d989b;
  position: relative;
}

.app-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  display: block;
  margin: 0;
  padding: 6px 0;
  border: 0;
  background: #d9dcde;
  color: #1d2528;
  text-align: center;
  font-style: normal;
}

.app-header::before {
  content: "×";
  position: absolute;
  left: 7px;
  top: -2px;
  color: #4d5558;
  font-size: 28px;
  font-weight: 700;
}

.app-header .eyebrow,
.app-header .subtitle,
h2,
h3 {
  display: none;
}

.app-header h1 {
  display: block;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
}

.data-table {
  font-size: 13px;
}

.table-frame {
  overflow: auto;
  border: 0;
  background: var(--surface);
  scrollbar-color: #98a8ad #26353a;
}

#project-screen > .table-frame {
  height: 593px;
}

#analysis-screen > .table-frame:first-of-type {
  height: 450px;
  flex: 0 0 450px;
}

#analysis-screen > .parameters-frame {
  height: 260px;
  flex: 0 0 260px;
}

.data-table th,
.data-table td {
  height: 23px;
  padding: 3px 5px;
  border: 0;
  color: #f4f6f7;
  line-height: 17px;
  font-style: normal;
}

.data-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  border-right: 1px solid #4f5a5e;
  border-bottom: 1px solid #4d595d;
  background: #aeb5b8;
  color: #080b0c;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

.data-table th {
  position: sticky;
  overflow: visible;
}

.column-resizer {
  position: absolute;
  top: 0;
  right: -3px;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  z-index: 3;
}

.column-resizer:hover,
.column-resizer.resizing {
  background: #d7ebea;
}

body.is-resizing-column {
  cursor: col-resize;
  user-select: none;
}

.side-row td {
  background: transparent;
  color: #f4f6f7;
  font-weight: 400;
}

.selectable-table tbody tr:hover td {
  background: #3c4d53;
}

.selectable-table tbody tr.selected td {
  background: var(--selected);
  color: #001099;
}

.analysis-marker td:nth-child(2),
.analysis-leadout td:nth-child(2) {
  color: #f4f6f7;
}

/* Analysis row class names mirror track.type: file, mark, and leadout. */
.analysis-mark td:nth-child(2),
.analysis-leadout td:nth-child(2) {
  text-align: center;
}

.analysis-file td:nth-child(4),
.analysis-mark td:nth-child(4),
.analysis-leadout td:nth-child(4) {
  text-align: right;
}

.analysis-file td:nth-child(5),
.analysis-mark td:nth-child(5),
.analysis-leadout td:nth-child(5) {
  text-align: right;
}

#analysis-table tbody td:nth-child(3) {
  text-align: right;
}

#analysis-table tbody td:nth-child(5) {
  text-align: center;
}

#analysis-table .analysis-mark td:nth-child(2),
#analysis-table .analysis-leadout td:nth-child(2) {
  font-style: italic;
}

#analysis-table tbody tr,
#measurements-table tbody tr {
  cursor: pointer;
}

#analysis-table tbody tr.selected td,
#measurements-table tbody tr.selected td {
  background: var(--selected);
  color: #001099;
}

button {
  min-width: 150px;
  height: 27px;
  padding: 2px 12px;
  border: 1px solid #98a8ad;
  border-radius: 6px;
  background: transparent;
  color: #f4f6f7;
  font-style: normal;
}

button.primary {
  background: transparent;
  border-color: #98a8ad;
  color: #f4f6f7;
}

button:hover:not(:disabled),
button.primary:hover:not(:disabled) {
  background: #44575e;
  border-color: #d2e2e7;
}

.toolbar {
  margin-top: 10px;
}

.button-group {
  gap: 10px;
}

.toolbar .button-group:last-child button,
.align-right button {
  min-width: 60px;
}

.align-right {
  gap: 10px;
  margin-top: 10px;
}

.align-right button {
  min-width: 150px;
}

.settings {
  width: 630px;
  max-width: none;
  grid-template-columns: 1fr 1fr;
  gap: 10px 55px;
  margin: 29px 5px 0;
}

.settings label {
  display: grid;
  grid-template-columns: 205px 1fr;
  align-items: center;
  gap: 0;
  color: #f4f6f7;
  font-weight: 400;
}

.settings select {
  width: 150px;
  min-height: 23px;
  height: 23px;
  padding: 0 5px;
  border-color: #98a8ad;
  border-radius: 4px;
  background: #2d3d43;
  color: #f4f6f7;
  font-style: normal;
}

.settings label:nth-child(2) { grid-column: 2; grid-row: 1; }
.settings label:nth-child(3) { grid-column: 1; grid-row: 2; }
.settings label:nth-child(4) { grid-column: 2; grid-row: 2; }

.screen-actions {
  justify-content: space-around;
  margin: 29px 58px 0;
}

#analysis-screen .screen-actions {
  justify-content: space-between;
  margin: auto 155px 0;
  padding-top: 20px;
}

#analysis-screen {
  min-height: 773px;
  display: flex;
  flex-direction: column;
}

#analysis-screen .align-right {
  margin-bottom: 20px;
}

.measurements td:nth-child(3) {
  color: #f4f6f7;
}

#measurements-table th:nth-child(1) { width: 40%; }
#measurements-table th:nth-child(2) { width: 20%; }
#measurements-table th:nth-child(3) { width: 40%; }

.progress-panel {
  background: #2d3d43;
  border-color: #98a8ad;
}

.network-disclaimer {
  margin: 14px 0 0;
  color: #d7ebea;
  font-size: 12px;
  font-style: normal;
  text-align: center;
}

#progress-panel .network-disclaimer {
  margin: 0 0 8px;
}


/* Keep modal forms readable against the dark desktop prototype theme. */
dialog {
  background: #34444b;
  color: #f4f6f7;
  border: 1px solid #98a8ad;
}

dialog::backdrop {
  background: rgb(0 0 0 / 72%);
}

.dialog-form {
  background: #34444b;
  color: #f4f6f7;
}

.dialog-form h2 {
  display: block;
  margin: 0 0 4px;
  color: #f4f6f7;
  font-size: 18px;
  font-style: normal;
}

.dialog-form label {
  color: #f4f6f7;
  font-weight: 400;
}

.dialog-form input[type="number"],
.dialog-form input[type="text"] {
  min-height: 27px;
  border: 1px solid #98a8ad;
  border-radius: 4px;
  background: #2d3d43;
  color: #f4f6f7;
  caret-color: #f4f6f7;
}

.dialog-form input:focus {
  outline: 1px solid #b4dce8;
  outline-offset: 1px;
}

.dialog-form .check-label {
  color: #f4f6f7;
}

.dialog-form .check-label input {
  accent-color: #b4dce8;
}

.dialog-form .form-error {
  color: #ffb4b4;
}

.dialog-actions {
  border-top: 1px solid #526268;
  padding-top: 12px;
}

.finished-dialog {
  min-width: 330px;
  padding: 24px;
  background: #34444b;
  color: #f4f6f7;
}

.finished-dialog h2 {
  display: block;
  margin: 0 0 14px;
  color: #f4f6f7;
  font-size: 18px;
  font-style: normal;
}

.finished-dialog ul {
  max-height: 230px;
  margin: 0;
  padding: 10px;
  overflow: auto;
  border: 1px solid #526268;
  background: #2d3d43;
  list-style: none;
}

.finished-dialog li {
  margin: 3px 0;
  color: #f4f6f7;
}