:root {
  --bg: #23202C;
  --card: #292532;
  --accent: #8B4361;
  --text: #F2ECE7;
  --soft: #E2B9C8;
  --max-width: 980px;
}
body {
  font-family: "Kay Pho Du", serif, Arial, sans-serif;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}
header {
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 20px; max-width: var(--max-width); margin:0 auto;
}

.header-content {
  display: flex;
  gap: 12px;
  align-items: center;
}

.user-area {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo {
  font-size: 36px; font-weight: 800;
  width: 44px; height: 44px;
  background: var(--accent); color: #fff;
  border-radius: 100px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 16px #210a1b6c;
}
.title {
  font-size: 30px; font-weight: bold; letter-spacing: 4px;
  color: var(--soft);
  text-shadow: 0 1px 6px #14101440;
}
.app, .card, .modal-content, .popup-box {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 3px 26px #18151c4c;
  border-radius: 15px;
  border: 1.5px solid #2d263570;
  max-width: var(--max-width);
  margin: 28px auto;
  padding: 22px;
}

.app {
  max-width: 980px;
  margin: 20px auto;
}

.frequency-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.frequency-info {
  font-size: 13px;
  color: rgba(242,236,231,0.8);
}

.broadcast-frequency {
  font-size: 28px;
  font-weight: 700;
  color: #9E496D;
}

.listeners-info {
  margin-top: 6px;
  font-size: 13px;
  color: rgba(242,236,231,0.8);
}

.control-buttons {
  display: flex;
  gap: 8px;
}

.btn-icon {
  width: 30px;
  height: 30px;
  vertical-align: middle;
  user-select: none;
  pointer-events: none;
  object-fit: contain;
}

.audio-controls-section {
  margin-top: 12px;
}

.monitor-toggle {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.monitor-toggle label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.local-monitoring {
  margin-top: 12px;
}

.local-monitoring-hint {
  margin-top: 4px;
  font-size: 11px;
  color: rgba(242,236,231,0.6);
}

.mini-viz-container {
  margin-top: 10px;
}

.mini-viz-canvas {
  width: 100%;
  height: 36px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
}

.soundboard-section {
  margin-top: 12px;
}

.soundboard-header {
  display: flex;
  gap: 8px;
  align-items: center;
}

.soundboard-hint {
  font-size: 13px;
  color: rgba(242,236,231,0.7);
}

.soundboard-monitor {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.soundboard-monitor label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.file-picker {
  display: none;
}

.soundpads-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.status-message {
  margin-top: 10px;
  color: rgba(242,236,231,0.9);
}

.timeline-editor {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 3px 26px #18151c4c;
  border-radius: 15px;
  border: 1.5px solid #2d263570;
  max-width: 100%;
  margin: 28px 0;
  padding: 22px;
}
.btn, .popup-actions .btn, .tool-btn {
  background: var(--accent);
  color: #fff;
  border-radius: 7px;
  border: none;
  font-family: inherit;
  font-weight: 700; padding: 9px 17px; font-size: 16px;
  box-shadow: 0 1px 9px #23152340;
  transition: box-shadow 0.14s, background 0.11s, color 0.08s, transform .09s;
  cursor: pointer;
}
.btn:hover, .tool-btn:hover:not(:disabled) {
  background: #a55a7b;
  color: #fff;
  transform: scale(1.03);
  box-shadow: 0 3px 12px #7b3b6060;
}
.btn.primary, .confirm-btn {
  background: #a55a7b;
  color: #fff;
  font-weight: 800;
}
.btn:disabled, .btn:disabled:hover {
  background: #625068;
  color: #ab8fa7;
}

.btn.active-loop {
  background: #F9D85E;
  color: #2E2631;
  box-shadow: 0 0 20px #F9D85E80, 0 3px 12px #7b3b6060;
  animation: loopGlow 2s ease-in-out infinite;
}

@keyframes loopGlow {
  0% { box-shadow: 0 0 20px #F9D85E80, 0 3px 12px #7b3b6060; }
  50% { box-shadow: 0 0 30px #F9D85E, 0 3px 16px #7b3b6060; }
  100% { box-shadow: 0 0 20px #F9D85E80, 0 3px 12px #7b3b6060; }
}

/* Timeline loop button active state */
#loopToggle.active-loop {
  background: #F9D85E;
  color: #2E2631;
  box-shadow: 0 0 20px #F9D85E80, 0 3px 12px #7b3b6060;
  animation: loopGlow 2s ease-in-out infinite;
}

/* Timeline icons - make them bigger */
.tool-btn img,
#loopToggle img,
#snapToggle img,
#infoBtn img {
  width: 30px !important;
  height: 30px !important;
}
.bibki-badge {
  background: #4e2e41;
  border: none;
  color: var(--soft);
  font-weight:700; min-width:72px; text-align:center;
  box-shadow: 0 1px 6px #210a1b25;
}
input, select, .card input, .modal-content input, .timeline-editor input {
  background: #201c24;
  color: var(--soft);
  border: 1px solid #4e2e41;
  border-radius: 8px;
  padding: 8px 10px; font-size:15px; margin-top:6px; margin-bottom:4px;
}
input:focus, select:focus { border-color: var(--accent); outline: none;}
input[type="range"], .soundpads input[type="range"] {
  accent-color: var(--accent);
  background: #18151c;
  border-radius: 7px;
  width: 80px;
}
.status, .timeline-msg, .broadcast-label, .soundboard-hint, .pads-toggles label {
  color: var(--soft);
}
.mic-mini-viz, #timelineCanvas, .timeline-canvas {
  background: #18151c; border-radius: 8px;
}
#broadcastFrequency { color: var(--accent); }
.timeline-tab { margin-top:16px; }
.timeline-editor { 
  margin-top:20px;
  position: relative;
  z-index: 1;
}
.timeline-canvas { margin-top:16px; }
.hidden { display:none !important; }
@media (max-width:900px) {
  .app, .card, .timeline-editor { padding:10px;}
  .title { font-size:21px;}
}
button:focus, input:focus { outline: 2px dashed #8B4361; outline-offset:3px; }

/* Для даже большего уюта — добавь слабую фон-текстуру через SVG или фон Image, если хочешь */
/* --- Modal core --- */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 3400;
  transform: translate(-50%, -50%) scale(0.96);
  min-width: 340px;
  max-width: 96vw;
  max-height: 88vh;
  background: var(--card);
  border-radius: 18px;
  box-shadow: 0 8px 48px #18151c94, 0 1px 16px #000;
  padding: 24px 30px;
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.23s cubic-bezier(.51,.14,.41,1.11), 
              transform 0.35s cubic-bezier(.71,.21,.61,1.19);
}

.modal.visible {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1.01);
  animation: modalFloatSlow 9s ease-in-out infinite;
}

@keyframes modalFloatSlow {
  0%   { transform: translate(-50%, -50%) scale(1.008) translate(0px, 0px);}
  17%  { transform: translate(-50%, -50%) scale(1.009) translate(-2px, 3px);}
  36%  { transform: translate(-50%, -50%) scale(1.008) translate(4px, -3px);}
  47%  { transform: translate(-50%, -50%) scale(1.009) translate(-3px, 2px);}
  67%  { transform: translate(-50%, -50%) scale(1.008) translate(2px, -2px);}
  83%  { transform: translate(-50%, -50%) scale(1.007) translate(-3px, -3px);}
  100% { transform: translate(-50%, -50%) scale(1.008) translate(0px, 0px);}
}
.pad-card {
  position: relative;
  width: calc(25% - 8px);
  min-width: 240px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 38px 10px 54px 10px; /* ВЕРХУ больше, чтобы громкость поместилась */
  box-shadow: 0 0 12px #2410322c;
  cursor: pointer;
  transition: box-shadow 0.18s, transform 0.13s;
  overflow: hidden;
}

/* --- Громкость сверху --- */
.pad-card {
  position: relative;
  width: calc(25% - 8px);
  min-width: 240px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 32px 10px 54px 10px; /* верх уменьшаем чтобы выдвигающаяся громкость не заслоняла */
  box-shadow: 0 0 12px #2410322c;
  cursor: pointer;
  transition: box-shadow 0.18s, transform 0.13s;
  overflow: hidden;
  user-select: none;        /* ТЕКСТ нельзя копировать */
  -webkit-user-select: none; /* Safari */
}
.pad-title {
  margin-bottom:8px;
  font-weight:700;
  font-size:1rem;
  user-select: none;
  -webkit-user-select: none;
}

/* --- Громкость сверху -- уменьшить коллизию: popup выдвигается из более узкого прямоугольника над основной частью */
.pad-card .vol-popup {
  position: absolute;
  left: 16px; right: 16px; top: 2px;
  height: 28px;
  opacity: 0;
  display: flex; justify-content:center; align-items:center;
  transition: top .32s cubic-bezier(.3,.7,.6,1.13), opacity .25s;
  pointer-events: none;
  z-index: 3;
}
.pad-card:hover .vol-popup {
  top: 11px;
  opacity: 1;
  pointer-events: all;
}

/* --- Контролы нижние --- */
.pad-controls {
  position: absolute;
  bottom: 13px; left: 0; width: 100%;
  display: flex; justify-content: flex-end;
  gap: 8px;
  height: 36px;
  pointer-events: none;
}

.pad-controls .btn-small {
  pointer-events: auto; 
}

.pad-title {margin-bottom:8px; font-weight:700; font-size:1rem; user-select:none;}

.btn-small {
  padding:8px 13px;
  font-size:17px; border-radius:8px;
  background: #292532;
  color: #d4b2d4;
  border: none;
  font-weight: 700;
  box-shadow: 0 0 5px #2d263570;
  transition: background .15s, color .13s, box-shadow .11s;
}
.btn-small:hover, .btn-small:focus {
  background: #493255;
  color: #fff;
  box-shadow: 0 0 8px #8b436185;
}
.pad-delete {
  background: #292532;
  color: #ac8ea3;
}
.pad-delete:hover {
  background: #d23b3b;
  color: #fff;
}
.pad-card.delete-hover {
  animation: padShake 0.33s linear infinite;
}
@keyframes padShake {
  0%   { transform: translate(0,0);}
  32%  { transform: translate(-2px,2px);}
  54%  { transform: translate(3px,-1px);}
  79%  { transform: translate(-3px,2px);}
  100% { transform: translate(0,0);}
}
.stream-info-panel {
  position: absolute;
  left: 16px;
  top: 93px;
  width: 275px;
  background: #23202C;
  border-radius: 18px;
  box-shadow: 0 4px 22px #18151c3c, 0 1px 10px #29152655;
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stream-img-label {
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; margin-bottom:8px;
}
.stream-img-preview {
  width: 245px; height: 245px; object-fit:cover; border-radius:16px; background:#191425;
  box-shadow:0 2px 11px #29152632;
}
.upload-hint { color:#c6aec6; font-size:13px; margin-top:6px;}
.stream-name-input {width: 94%; margin-top:12px; margin-bottom:6px; font-size:18px;}
#streamInfoMsg { color:#f9d85e; font-size:14px; min-height:18px; margin-top:4px;}