:root {
  font-family: "Segoe UI", Arial, sans-serif;
  color: #e2e8f0;
  background-color: #020617;
  line-height: 1.5;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 20% 20%, #0f172a, #020617 60%);
  color: inherit;
}
html.preload body {
  visibility: hidden;
}


.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 0.3rem;
  padding:0; /* 2rem 1rem 1rem;*/
}

.panel {
  width: min(980px, 100%);
  background-color: #0b1220;
  border: 1px solid #1e293b;
  border-radius: 0.5rem;
  padding-bottom: 0.5rem;
  box-shadow: 0 25px 70px rgba(2, 6, 23, 0.65);
  overflow: hidden;

}

.wave-header {
  margin-bottom: 1.5rem;
}

.pretitle {
  color: #38bdf8;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  margin: 0 0 0.5rem;
}

.wave-header h1,
.wave-header h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.85rem);
  color: #f8fafc;
}

.subtitle {
  margin: 0.5rem 0 0;
  color: #94a3b8;
}

.wave-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  overflow:hidden;
}

.row-1-left,
.row-1-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
  overflow: hidden;

}

.row-center {
flex: 1 1 auto; /* занимает всё оставшееся */
min-width: 0; /* разрешает сжиматься, чтобы работало overflow */
overflow: hidden;

}

.fileInfo-container {
  display: flex;
  justify-content:center;  /* по горизонтали */
  align-items: center;     /* по вертикали */
}

.fileInfo-container span {
  flex: 1 1 auto;          /* занимает всё доступное пространство */
  text-align: center;      /* текст в центре */
  padding-left: 0px;
}


.row-center-util {
flex: 1 1 auto; /* занимает всё оставшееся */
min-width: 0; /* разрешает сжиматься, чтобы работало overflow */
flex-wrap: wrap;
display: flex;
justify-content: center;
align-items: center; 
gap: 0.75rem;
overflow: hidden;
}


.row-center-edit {
flex: 1 1 auto; /* занимает всё оставшееся */
min-width: 0; /* разрешает сжиматься, чтобы работало overflow */
flex-wrap: wrap;
display: flex;
justify-content: flex-start;
align-items: center; 
gap: 0.75rem;
overflow: hidden;
}


.row-right-util {
flex: 1 1 auto; /* занимает всё оставшееся */
min-width: 0; /* разрешает сжиматься, чтобы работало overflow */
flex-wrap: wrap;
display: flex;
justify-content: right;
gap: 0.75rem;
overflow: hidden;

}


.row-32 {
  justify-content: space-between;
  margin-bottom: 1rem;
  align-items: flex-start;
}
.row-3 {
  margin-bottom: 1rem;
}

.row-3-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
  overflow: hidden;

}

.row-3-right {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 1rem;
  flex: 1 1 480px;
  flex-wrap: wrap;
  overflow: hidden;

}

.row-3-right .rate-container,
.row-3-right .scale-container {
  flex: 1 1 180px;
}

.row-2 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  padding-left: 61px;
  padding-right: 10px;
  overflow: hidden;

}

.row-1 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 10px;
  padding-right: 10px;
  flex-wrap:nowrap;
  overflow: hidden;

}

.row-4 {
  margin-top: 0rem;
  overflow: hidden;

}

.wave-panel.is-collapsed .row-2,
.wave-panel.is-collapsed .row-3,
.wave-panel.is-collapsed .row-4 {
  display: none;
}

.sample-panel.is-collapsed .row-2,
.sample-panel.is-collapsed .row-3,
.sample-panel.is-collapsed .row-4 {
  display: none;
}

.sample-panel.is-collapsed 
{
  height: 50px;
}

.mic-panel.is-collapsed .row-2,
.mic-panel.is-collapsed .row-3,
.mic-panel.is-collapsed .row-4 {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

button,
.file-button {
  border: none;
  border-radius: 0.85rem;
  padding: 0.85rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #f8fafc;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

button:not(:disabled):hover,
.file-button:hover {
/*  transform: translateY(-2px);*/
  box-shadow: 0 15px 30px rgba(37, 99, 235, 0.35);
}

.file-button {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.file-button.secondary {
  background: rgba(248, 250, 252, 0.08);
  color: #f8fafc;
  border: 1px solid rgba(248, 250, 252, 0.2);
}

.file-button input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.duration-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: #cbd5f5;
}

.duration-field input {
  border: 1px solid #1f2937;
  border-radius: 0.65rem;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  background-color: #111827;
  color: #e2e8f0;
}

.volume-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: #cbd5f5;
}

.volume-field input[type="range"] {
  width: 100%;
}

.rate-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: #cbd5f5;
}

.rate-field input[type="range"] {
  width: 100%;
}

.file-info {
  display: block;
  white-space: nowrap; /* запрещаем перенос строк */
  overflow: hidden; /* всё, что не помещается, скрываем */
  text-overflow: ellipsis;  
  margin: 0.5rem 0 0.5rem;
  color: #38bdf8;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;  
}

  .row-3 {
    flex-direction: column;
    align-items: stretch;
      overflow: hidden;
  }


  .row-3-right {
    justify-content: flex-start;
  overflow: hidden;

  }

  .row-33-right .rate-container,
  .row-33-right .scale-container {
    flex: 1 1 100%;
  }



#mic-device-panel-wrapper {
  width: 100%;
  max-width: 430px;
  min-width: 260px;
}

.mic-device-panel {
  display: flex;
  align-items: center; /* ���⨪��쭮� ��ࠢ������� �� 業��� */
  gap: 0.2rem;
  width: auto;
  flex-wrap: nowrap; /* �ᥣ�� ���� �� */

}

.mic-icon-wrapper {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px; /* 䨪�஢����� �ਭ� */
}

.mic-icon {
  width:32px;
  height: 32x;
  display: block;
  color: #e5e7eb; /* 梥� ������ ��� ���� ⥬� */
}

.mic-select {
  flex: 1 1 auto; /* �������� ��� ����㯭�� �ਭ� */
  min-width: 100px;
  max-width: 200px;
  border-radius: 0.5rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
  background-color: #020617; /* 䮭 ��� ���� ⥬� */
  border: 1px solid #1f2937; /* �࠭�� ��� ���� ⥬� */
  color: #e2e8f0;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.mic-select:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 0 1px #38bdf8;
}

.mic-select option {
  background-color: #020617;
  color: #e2e8f0;
}

#sampleSection{
    container-type: size;
}

@container (max-height: 250px) {
  #sampleInfo
  {
    display: none;
  }
}    

.headerpanel
{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 10px;
}

.headerpanel > button,
.headerpanel > label {
  flex: 1 1 0;
}

.headerpanel > #userInfo {
  margin-left: auto; /* pushes auth block to the right edge */
}

.headerpanel > #userInfo,
.headerpanel > #userlogoutBtn,
.headerpanel > #userloginBtn {
  flex: 0 0 auto; /* keep auth controls tight on the right */
}