/* Capture Pro — Premium UI skin
   Notes: This file is designed to OVERRIDE existing bootstrap/style.css without changing JS behavior.
*/

:root{
  --cp-bg0:#070A12;
  --cp-bg1:#0B1020;
  --cp-card: rgba(255,255,255,.06);
  --cp-card2: rgba(255,255,255,.04);
  --cp-stroke: rgba(255,255,255,.14);
  --cp-stroke2: rgba(255,255,255,.20);
  --cp-text: rgba(255,255,255,.92);
  --cp-muted: rgba(255,255,255,.68);
  --cp-muted2: rgba(255,255,255,.52);
  --cp-c1:#22d3ee;
  --cp-c2:#8b5cf6;
  --cp-c3:#34d399;
  --cp-danger:#ef4444;
  --cp-shadow: 0 18px 60px rgba(0,0,0,.55);
  --cp-shadow2: 0 10px 32px rgba(0,0,0,.35);
  --cp-r: 18px;
  --cp-r2: 22px;
  --cp-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --cp-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

html, body{
  font-family: var(--cp-font) !important;
  color: var(--cp-text) !important;
  background:
    radial-gradient(1200px 700px at 10% 10%, rgba(34,211,238,.18), transparent 55%),
    radial-gradient(900px 600px at 90% 25%, rgba(139,92,246,.16), transparent 60%),
    radial-gradient(800px 600px at 50% 110%, rgba(52,211,153,.10), transparent 55%),
    linear-gradient(180deg, var(--cp-bg0), var(--cp-bg1)) !important;
}

/* Hide legacy top bars if present */
#pmk_sj_top, #pmk_sj_menu_an_niu, #top_logo{ display:none !important; }

/* Main layout */
#main{
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px 14px 60px;
}

/* Remove old left container visuals */
#main_left{ width:100%; }
.kuang{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important;
  border: 1px solid var(--cp-stroke) !important;
  border-radius: var(--cp-r2) !important;
  box-shadow: var(--cp-shadow) !important;
  overflow:hidden;
}

#main_content{
  padding: 18px 18px 14px !important;
}

/* Title area (best-effort) */
.nry_bt{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  background: linear-gradient(135deg, rgba(34,211,238,.10), rgba(139,92,246,.10)) !important;
}
.nry_bt img{
  width:44px !important; height:44px !important;
  border-radius: 14px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow: var(--cp-shadow2) !important;
}
.nry_bt h1{
  margin:0 !important;
  font-size: 18px !important;
  letter-spacing:.2px !important;
  font-weight: 750 !important;
}
.nry_bt small, .nry_bt p{ color: var(--cp-muted) !important; }

/* Form area */
#myform{
  padding: 16px 16px 18px !important;
}

/* Alerts */
.alert{
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.18) !important;
  color: var(--cp-text) !important;
}
.alert-warning{
  border-color: rgba(245,158,11,.35) !important;
  background: rgba(245,158,11,.10) !important;
}

/* Video / Canvas preview */
#video{
  width:100% !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.22) !important;
  box-shadow: var(--cp-shadow2) !important;
  margin-top: 10px !important;
}
#viewdiv{
  margin-top: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(0,0,0,.16) !important;
  overflow:hidden !important;
  box-shadow: var(--cp-shadow2) !important;
}
#canvas{
  width: 100% !important;
  height: auto !important;
  display:block !important;
}

/* Buttons: premium */
.btn{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--cp-text) !important;
  padding: 10px 12px !important;
  font-weight: 650 !important;
  letter-spacing:.1px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.25) !important;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease !important;
}
.btn:hover{
  background: rgba(255,255,255,.10) !important;
  border-color: var(--cp-stroke2) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.28) !important;
}
.btn:active{ transform: translateY(0) !important; }

.btn-lg{ padding: 12px 14px !important; border-radius: 16px !important; }
.btn-block{ width:100% !important; display:flex !important; justify-content:center !important; gap:10px !important; }
.btn img{ filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); }

.btn-success{
  border-color: rgba(34,211,238,.36) !important;
  background: linear-gradient(135deg, rgba(34,211,238,.18), rgba(139,92,246,.14)) !important;
}
.btn-danger{
  border-color: rgba(239,68,68,.36) !important;
  background: rgba(239,68,68,.12) !important;
}
.btn-secondary{
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
}
.btn-primary{
  border-color: rgba(139,92,246,.36) !important;
  background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(34,211,238,.12)) !important;
}

/* Button groups / labels */
.btn-group{
  width:100% !important;
  display:flex !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}
.btn-group .btn,
.btn-group label.btn{
  flex:1 1 180px !important;
  text-align:center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
}
.btn-group .btn.disabled, .btn-group label.disabled{
  opacity:.45 !important;
  filter: saturate(.8) !important;
}

/* Inputs */
.form-control, select, input[type="text"], input[type="number"]{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.18) !important;
  color: var(--cp-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.form-control:focus, select:focus, input:focus{
  outline: none !important;
  border-color: rgba(34,211,238,.45) !important;
  box-shadow: 0 0 0 3px rgba(34,211,238,.18) !important;
}
.input-group-text{
  border-radius: 14px 0 0 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--cp-muted) !important;
}

/* Small helper text */
.form-label, label{ color: var(--cp-muted) !important; font-weight: 650 !important; }
small, .text-muted{ color: var(--cp-muted2) !important; }

/* Spacing tweaks */
.mt-3{ margin-top: 14px !important; }
.mt-4{ margin-top: 16px !important; }
.mb-3{ margin-bottom: 12px !important; }

/* Responsive: ensure buttons stack nicely */
@media (max-width: 520px){
  #main{ padding: 16px 10px 44px; }
  .btn-group .btn, .btn-group label.btn{ flex:1 1 100% !important; }
  .nry_bt{ gap:10px !important; }
  .nry_bt img{ width:40px !important; height:40px !important; }
  .nry_bt h1{ font-size:16px !important; }
}

/* Top hero bar (added markup; safe) */
.cp_topbar{
  margin: 14px 0 10px;
  padding: 14px 14px;
  border-radius: var(--cp-r2);
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 240px at 20% 10%, rgba(34,211,238,.14), transparent 60%),
    radial-gradient(900px 240px at 80% 40%, rgba(139,92,246,.12), transparent 60%),
    rgba(0,0,0,.10);
  box-shadow: var(--cp-shadow2);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.cp_brand{ display:flex; align-items:center; gap:12px; }
.cp_mark{
  width:42px; height:42px; border-radius:14px;
  background:
    radial-gradient(16px 16px at 30% 30%, rgba(34,211,238,.95), transparent 62%),
    radial-gradient(20px 20px at 70% 70%, rgba(139,92,246,.92), transparent 65%),
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.cp_name{ font-size:16px; font-weight:800; letter-spacing:.2px; margin-top:1px; }
.cp_tag{ font-size:12px; color: var(--cp-muted); line-height:1.45; max-width: 760px; }
.cp_pills{ display:flex; gap:8px; flex-wrap:wrap; }
.cp_pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--cp-muted);
  font-size:12px;
}
.cp_pill i{ color: rgba(34,211,238,.9); }