/* ============================================================
   Global styling for the Real-Time Edge Detection demo
   – Bootstrap only provides baselines, everything visual
     below is self-contained to avoid clashes.
   ============================================================
*/
body{
  background:linear-gradient(135deg,#1a1a2e,#16213e);
  color:#fff;
  font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;
  min-height:100vh;
}

.main-container{
  max-width:1200px;
  margin:0 auto;
  padding:20px;
}

/* ---------------- Header ---------------- */
.header{
  text-align:center;
  margin-bottom:30px;
}
.header h1{
  background:linear-gradient(45deg,#ff6b6b,#4ecdc4);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-size:2.5rem;
  font-weight:700;
  margin-bottom:10px;
}

/* ---------------- Video / Canvas -------- */
.video-container{
  position:relative;
  width:100%;
  max-width:640px;
  margin:0 auto 20px;
  border-radius:15px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}
#video,#canvasOutput{
  width:100%;
  height:auto;
  display:block;
}

/* ---------------- Controls -------------- */
.controls{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:20px 0;
}
.filter-btn{
  background:rgba(255,255,255,.1);
  border:2px solid rgba(255,255,255,.2);
  color:#fff;
  padding:10px 20px;
  border-radius:25px;
  transition:.3s;
  backdrop-filter:blur(10px);
}
.filter-btn:hover{
  background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.4);
  transform:translateY(-2px);
}
.filter-btn.active{
  background:linear-gradient(45deg,#ff6b6b,#4ecdc4);
  border-color:transparent;
}

/* ---------------- Status banner --------- */
.status{
  margin:20px 0;
  text-align:center;
  padding:15px;
  border-radius:10px;
  backdrop-filter:blur(10px);
}
.status.loading{background:rgba(255,193,7,.2);border:1px solid rgba(255,193,7,.5);}
.status.ready  {background:rgba(40,167,69,.2); border:1px solid rgba(40,167,69,.5);}
.status.error  {background:rgba(220,53,69,.2);  border:1px solid rgba(220,53,69,.5);}

/* ---------------- Metrics --------------- */
.metrics{
  display:flex;
  justify-content:center;
  gap:30px;
  margin:20px 0;
  flex-wrap:wrap;
}
.metric{
  background:rgba(255,255,255,.1);
  padding:15px;
  border-radius:10px;
  min-width:120px;
  text-align:center;
  backdrop-filter:blur(10px);
}
.metric-value{font-size:1.5rem;font-weight:700;color:#4ecdc4;}
.metric-label{font-size:.9rem;opacity:.8;margin-top:5px;}