/* styles.css - 3D buttons and clean card UI */
:root{
  --bg:#0f1724;
  --card:#0b1220;
  --accent:#1f8ef1;
  --accent-2:#56ccf2;
  --muted:#98a0ad;
  --danger:#ff5c5c;
  --glass: rgba(255,255,255,0.03);
}

*{box-sizing:border-box;font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial}
body{
  margin:0;
  min-height:100vh;
  background:linear-gradient(180deg,#071028 0%, #071d2b 100%);
  color:#e6eef8;
  padding:28px;
}
.container{max-width:1100px;margin:0 auto}
header h1{margin:0;font-size:28px;letter-spacing:0.2px}
.subtitle{margin:4px 0 18px;color:var(--muted)}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:14px;
  padding:16px;
  margin-bottom:16px;
  box-shadow: 0 6px 18px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
}
.controls .card{display:inline-block;width:100%}

label{display:block;margin:8px 0;font-size:13px;color:var(--muted)}
input[type="text"], input[type="url"], input[type="search"], input { 
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid rgba(255,255,255,0.04);
  background:transparent;color:inherit;
}

/* Camera card */
.cam-card{display:flex;flex-direction:column}
.meta{font-size:13px;color:var(--muted);margin:8px 0}
.buttons{display:flex;gap:8px;flex-wrap:wrap}

/* 3D Buttons */
.btn{
  border:0; padding:10px 14px; border-radius:10px; cursor:pointer;
  font-weight:600; letter-spacing:0.2px; transition:transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 6px 0 rgba(0,0,0,0.35), 0 10px 20px rgba(2,6,23,0.6);
  transform: translateY(0);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  color:var(--muted);
}
.btn:active{transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,0.5);}

.btn.primary{
  background: linear-gradient(180deg,var(--accent), var(--accent-2));
  color:white; text-shadow:0 1px 0 rgba(0,0,0,0.3);
}
.btn.start{background: linear-gradient(180deg,#2ecc71,#27ae60); color:#04220a}
.btn.stop{background: linear-gradient(180deg,#f6c358,#f39c12); color:#1f1406}
.btn.restart{background: linear-gradient(180deg,#7bd3ff,#1f8ef1); color:#022033}
.btn.status{background: linear-gradient(180deg,#dfe7ff,#9fb8ff); color:#021638}
.btn.danger, .btn.delete{background: linear-gradient(180deg,var(--danger), #d13b3b); color:white}

.footer, footer{margin-top:12px;color:var(--muted);font-size:13px}
.actions{margin-top:10px;display:flex;gap:8px;justify-content:flex-end}