/* Dimensions follow the retained 390 × 844 teal editor composition. */
.app[data-screen="edit"],
.app[data-screen="effects"] {
  background: #001e25;
}
.editor-screen {
  padding: 56px 5px 21px;
  background:
    radial-gradient(ellipse 27% 30% at 19% 14%, #00a5b984 0%, #00a5b915 60%, transparent 100%),
    radial-gradient(ellipse 45% 17% at 67% 0%, #007f8f6b 0%, transparent 90%),
    radial-gradient(ellipse 27% 41% at 11% 61%, #008b9d47 0%, transparent 90%),
    radial-gradient(ellipse 37% 21% at 78% 74%, #04778c30 0%, transparent 100%),
    linear-gradient(155deg, #00313a 0%, #00282e 45%, #001316 100%);
  overflow: hidden;
}
.editor-header {
  height: 74px;
  padding: 5px 8px 5px;
}
.editor-header > .icon-button {
  width: 46px;
  height: 48px;
}
.editor-header > .icon-button:first-child .icon {
  width: 26px;
  height: 26px;
  stroke-width: 1.6;
}
.collapse-button .icon { width: 29px; height: 29px; }
.project-badge {
  position: relative;
  z-index: 0;
  width: 161px;
  height: 63px;
  padding: 6px 4px 4px;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  background: transparent;
}
.project-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(155deg, #03bad0 0%, #029fb7 48%, #007f96 100%);
  clip-path: path("M24 1 C8 1 0 13 0 24 C0 33 4 39 11 42 C9 54 19 62 34 62 L66 62 Q73 65 79 61 Q84 65 90 62 L127 62 C143 62 152 53 150 42 C158 37 161 31 161 23 C161 9 150 0 135 0 L109 0 Q99 -2 90 2 Q83 -2 77 2 L24 1 Z");
  box-shadow: inset 0 1px 1px #c6ffffb3;
}
.project-badge strong {
  font-size: 26px;
  font-weight: 720;
  line-height: 1.22;
  letter-spacing: -.75px;
}
.project-badge span {font-size: 14px; line-height: 1.3; margin-top: 0;}
.wave-panel {
  height: 293px;
  padding: 24px 13px 15px;
  border-radius: 36px;
  border: 1px solid #67dbe6b8;
  border-right-color: #0698a981;
  border-bottom-color: #11a8b37a;
  background:
    radial-gradient(ellipse at 5% 0%, #05a4b345 0%, transparent 60%),
    radial-gradient(ellipse at 94% 100%, #0296a23b 0%, transparent 62%),
    linear-gradient(145deg,#06657791,#03424b75);
  box-shadow: inset 0 1px 2px #dcffff61, inset -1px -1px 5px #05d9e22b;
}
.wave-panel-top {font-size: 16px; margin: 0 7px; line-height: 1.2; font-weight: 400;}
.wave-panel-top span:last-child {font-size: 15px;}
.wave-annotation {
  top: 59px;
  min-width: 132px;
  padding: 6px 10px 7px;
  font-size: 13px;
  line-height: 1.22;
  letter-spacing: -.15px;
  border-radius: 17px;
  background: linear-gradient(145deg,#fff,#fafffe);
  box-shadow: 0 6px 14px #00131738;
}
.wave-annotation::after {height: 27px; background: #ebfffb; width: 1.5px;}
.annotation-dot {width: 11px; height: 11px; bottom: -32px; background: #ddfffa;}
.range-labels {top: 111px; left: 17px; right: 14px; font-size: 13px; color: #e5ffff;}
.wave-area {
  left: 12px;
  right: 12px;
  top: 129px;
  height: 118px;
  gap: 2px;
  padding: 0 3px;
  background: repeating-linear-gradient(133deg,transparent 0px,transparent 4px,#07c2d0a1 4px,#07c2d0a1 5.3px,transparent 5.3px,transparent 8.2px);
}
.selection-window {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1.5px solid #d5fff9;
  border-right: 1.5px solid #d5fff9;
  background: #82f9ed38;
  pointer-events: none;
  z-index: 0;
}
.audio-section {border: 0; padding: 0;}
.audio-section.selected {background: transparent; border: 0;}
.audio-section .wave-bar {
  border-radius: 21px;
  background: linear-gradient(130deg, #00262c 0%, #001619 60%, #00181b 100%);
  box-shadow: inset 1px 1px 2px #0000002b;
}
.audio-section.selected .wave-bar {
  background: linear-gradient(104deg,#affff6 0%,#8ffbf0 18%,#76ebdf 80%,#a2fff0 100%);
  box-shadow: inset 1px 1px 3px #efffffa6,0 0 8px #4efde52b;
}
.audio-section.fx-target {background: #c4ffee59; box-shadow: 0 0 0 2px #effffc;}
.wave-time {font-size: 17px; font-weight: 400; bottom: 21px; color: #a6f6ed;}
.timeline-zone {height: 76px; padding: 23px 22px 0;}
.pin-mark {top: 1px; left: 31px; color: #25bbcd; width: 13px; height: 19px;}
.pin-mark:nth-child(2) {left: 50px;}
.pin-mark .icon {width: 13px; height: 19px; filter: drop-shadow(0 0 2px #58d9df25);}
.timeline {height: 14px; background: #001d24; gap: 6px; padding: 0 11px;}
.timeline i {height: 8px; background: linear-gradient(140deg,#04c5d4,#00728b); box-shadow: inset 0 1px 1px #22e0e34a;}
.timeline i:nth-child(3), .timeline i:nth-child(4) {background: linear-gradient(140deg,#04c5d4,#00728b);}
.timeline i.mini-selected {background: linear-gradient(135deg,#befff7,#8cf8e7);}
.timeline-times {font-size: 13px; margin-top: 9px;}
.playhead {height: 36px; top: -11px; width: 4px; box-shadow: 0 0 7px #dffff92e;}
.tool-panel {
  height: 297px;
  margin: 0 6px;
  border-radius: 29px;
  border-color: #62e1ec9e;
  border-right-color: #00a0b576;
  border-bottom-color: #0c758487;
  background:
    radial-gradient(ellipse at 12% 0%, #006273aa 0%, transparent 53%),
    radial-gradient(ellipse at 88% 44%, #004b583f 0%, transparent 65%),
    linear-gradient(155deg,#002e379c,#001217ba);
  box-shadow: inset 0 1px 2px #b4ffff80,inset -1px -1px 3px #08c3cf41,0 8px 0 #04728147;
}
.audio-edit-page {padding: 17px 17px 9px;}
.panel-title {font-size: 28px; font-weight: 680; letter-spacing: -.85px; line-height: 1.15;}
.panel-subtitle {font-size: 14px; letter-spacing: -.35px; margin-top: 5px; color: #a0cddb;}
.voice-control {margin-top: 15px; gap: 5px; font-size: 13px; color: #aacbd8;}
.mic-button {
  width: 90px;
  height: 90px;
  border-color: #009cadb3;
  background: radial-gradient(ellipse at 40% 5%,#036d7b5e,transparent 75%),linear-gradient(145deg,#03576a8f,#0032389c);
  box-shadow: inset 0 0 11px #09a8b823,0 4px 10px #00151716;
}
.mic-button .icon {width: 39px; height: 39px; stroke-width: 1.8; color: #d2fffa; filter: drop-shadow(0 0 5px #87fff44d);}
.parameter-row {bottom: 8px; left: 8px; right: 8px; gap: 5px; grid-template-columns: 1.6fr 1.58fr 1fr;}
.parameter {
  height: 77px;
  padding: 12px 16px;
  border-radius: 17px;
  border-color: #258e8ea3;
  background: radial-gradient(ellipse at 30% 0%,#02938135,transparent 65%),linear-gradient(130deg,#07685bc7,#00403fc2);
  box-shadow: inset 0 1px 2px #8ffff058,0 2px 8px #0000000a;
}
.parameter strong {font-size: 26px; font-weight: 620; line-height: 1.05;}
.parameter small {font-size: 13px; margin-top: 5px; color: #a9cad5;}
.parameter.ambience {background: radial-gradient(ellipse at 5% 0%,#577c9273,transparent 90%),linear-gradient(150deg,#234a5ec2,#152c3ac9); border-color: #6593ad9e;}
.parameter.play {background: radial-gradient(ellipse at 5% 0%,#20d0d037,transparent 85%),linear-gradient(135deg,#075368aa,#00232a); border-color: #2897a3; box-shadow: inset 0 1px 3px #83faff71,inset 0 -1px 5px #15c1c53a;}
.parameter.play .icon {width: 30px; height: 30px; color: #effffb; filter: drop-shadow(0 0 4px #b3fff442); stroke-linejoin: round; stroke-width: 2.4;}
.pagination {height: 27px; padding-top: 0;}
.pagination button {height: 27px; width: 14px; transition: width 180ms ease;}
.pagination button::after {width: 4px; height: 4px; border-radius: 999px; background: #ffffff60; box-shadow: none;}
.pagination button.active {width: 28px;}
.pagination button.active::after {width: 18px; background: #fff; box-shadow: none;}
.pagination button:disabled {opacity: 1;}
.effects-page {padding: 17px 17px;}
.effects-top .panel-title {font-size: 24px; letter-spacing: -.7px;}
.effect-search {height: 34px; gap: 6px; flex: 1;}
.effect-search input {font-size: 13px;}
.effects-page .panel-subtitle {font-size: 13px; margin-top: 7px;}
.genre-chips {gap: 6px; margin-top: 11px;}
.genre-chips button {font-size: 11px; padding: 8px 8px;}
.effect-cards {height: 175px;}
.effect-name {font-size: 17px;}
.wave-panel.collapsed {height: 155px;}
.wave-panel.collapsed .wave-area {top: 60px; height: 71px;}
.wave-panel.collapsed + .timeline-zone + .tool-panel {margin-top: 40px;}
.added-fx {bottom: 6px; max-width: 160px;}
@media (max-width: 580px) {
  .preview-stage {background: radial-gradient(ellipse at 40% 10%,#065a65,#00181d 70%);}
  .device-wrap {display: block;}
  .device {top: 0;}
}