/* recorder.css - updated shiny gradient buttons */
.srt-container{
  max-width:1100px;
  margin:20px auto;
  padding:18px;
  border-radius:14px;
  background: linear-gradient(135deg,#f7f8ff 0%,#eef9ff 100%);
  box-shadow: 0 10px 30px rgba(33,150,243,0.08);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
.srt-title{
  margin:0 0 12px 0;
  font-size:1.4rem;
  color: #0b3d91;
  text-align:center;
}
.srt-controls{ margin-bottom:14px; }
.srt-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:8px; justify-content:center; }

/* Base shiny button style */
.srt-btn{
  padding:10px 16px;
  border-radius:10px;
  border: none;
  cursor: pointer;
  font-weight:600;
  color:#fff;
  background-size: 300% 300%;
  background-position: 0% 50%;
  animation: gradientScroll 3s linear infinite;
  box-shadow: 0 6px 18px rgba(11,61,145,0.2);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.srt-btn:disabled{ opacity:0.5; cursor:not-allowed; transform:none; }

/* Different gradient schemes for each type */
.srt-start{ background-image: linear-gradient(270deg,#00c853,#64dd17,#00c853); }
.srt-stop{ background-image: linear-gradient(270deg,#d50000,#ff1744,#d50000); }
#srt-pause{ background-image: linear-gradient(270deg,#ff8a00,#ff5252,#ff8a00); }
#srt-resume{ background-image: linear-gradient(270deg,#2962ff,#00b0ff,#2962ff); }
#srt-download{ background-image: linear-gradient(270deg,#8e24aa,#e040fb,#8e24aa); }
#srt-reset{ background-image: linear-gradient(270deg,#009688,#1de9b6,#009688); }
#srt-start-camera{ background-image: linear-gradient(270deg,#fbc02d,#ffeb3b,#fbc02d); color:#fff; }
#srt-start-audio{ background-image: linear-gradient(270deg,#ab47bc,#ba68c8,#ab47bc); }

/* Smaller buttons in recordings */
.srt-small-btn{
  display:inline-block;
  margin-left:8px;
  padding:6px 10px;
  border-radius:8px;
  border:none;
  color:#fff;
  background-image: linear-gradient(270deg,#536dfe,#8e24aa,#536dfe);
  background-size:300% 300%;
  animation: gradientScroll 3s linear infinite;
  text-shadow:0 1px 2px rgba(0,0,0,0.3);
  font-size:0.9rem;
  cursor:pointer;
}

.srt-delete{
  background-image: linear-gradient(270deg,#b00020,#ff3d00,#b00020);
}

/* Gradient scrolling animation */
@keyframes gradientScroll {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.options label{ font-size:0.9rem; color:#1b2b4a; margin-right:12px; }

.srt-preview-area{ display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
#srt-preview{ width:100%; max-width:700px; height:auto; border-radius:10px; background:#000; box-shadow: 0 8px 24px rgba(9,30,66,0.08); }

.srt-recordings{ background: linear-gradient(180deg,#ffffff,#f2f8ff); border-radius:10px; padding:12px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); }
.srt-recording{ border-bottom:1px dashed rgba(11,61,145,0.06); padding:10px 0; }
.srt-recording-info{ margin-top:8px; font-size:0.9rem; color:#153; }

.srt-note{ font-size:0.85rem; color:#42526e; text-align:center; margin-top:10px; }

@media (max-width:720px){
  .srt-row{ gap:8px; }
  .srt-btn{ padding:9px 12px; font-size:0.95rem; }
  #srt-preview{ max-width:100%; }
}