:root{
  --ccv-bg0:#050214;
  --ccv-bg1:#07051c;
  --ccv-ink:rgba(255,255,255,.92);
  --ccv-muted:rgba(255,255,255,.64);
  --ccv-line:rgba(255,255,255,.10);
  --ccv-line2:rgba(255,255,255,.16);
  --ccv-accent:#7D42FF;
  --ccv-warn:#FFD10A;
  --ccv-orange:#FFA230;
  --ccv-hot:#FF0033;
  --ccv-r-sm:12px;
  --ccv-r-md:14px;
  --ccv-r-lg:18px;
  --ccv-control-height:44px;
  --ccv-control-radius:var(--ccv-r-md);
  --ccv-control-text:rgba(255,255,255,.92);
  --ccv-control-font-size:15px;
  --ccv-control-font-weight:900;
  --ccv-control-letter-spacing:0;
  --ccv-control-line-height:1;
  --ccv-control-border-color:rgba(255,255,255,.10);
  --ccv-control-bg-gradient:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  --ccv-control-shadow:inset 0 -1px 0 rgba(0,0,0,.35);
  --ccv-control-focus-border:rgba(125,66,255,.55);
  --ccv-control-focus-ring:0 0 0 3px rgba(125,66,255,.18);
  --ccv-select-padding:6px 44px 6px 14px;
  --ccv-input-padding:10px 14px;
  --ccv-lock-active-bg:linear-gradient(180deg, rgba(125,66,255,.95), rgba(125,66,255,.72));
  --ccv-lock-active-border:rgba(125,66,255,.9);
  --ccv-lock-active-text:#fff;
  --ccv-select-locked-text:rgba(255,255,255,.56);
  --ccv-crop-locked-text:rgba(255,255,255,.58);
  --ccv-app-container-boot-opacity:.86;
}

html,body{ background:#050214; }

html.ccv-preboot .ui-app-shell .ui-body > :not(#ccv-loader){
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

body{
  color:var(--ccv-ink);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
  isolation:isolate;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(1200px 760px at 50% -180px, rgba(125,66,255,.22), transparent 62%),
    radial-gradient(900px 620px at 82% 12%, rgba(255,79,216,.10), transparent 66%),
    linear-gradient(180deg, #050214 0%, #07051c 55%, #050214 100%);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.028;
  background-image:radial-gradient(rgba(255,255,255,.85) .55px, transparent .6px);
  background-size:3px 3px;
}

.ccv-ui-root,
.ccv-ui-shell{
  position:relative;
  transform-origin:50% 14%;
  transition:transform .44s cubic-bezier(.2,.85,.2,1), filter .44s ease;
}

.ccv-ui-root{
  overflow:hidden;
}

.ccv-ui-root.ccv-shell-boot,
.ccv-ui-shell.ccv-shell-boot{
  transform:translateY(8px) scale(.972);
  filter:saturate(.9);
}

.ccv-ui-root.ccv-shell-ready,
.ccv-ui-shell.ccv-shell-ready{
  transform:translateY(0) scale(1);
  filter:none;
}

.ccv-app-container-fade{
  opacity:1;
  transition:opacity .42s ease;
}

html.ccv-booting .ccv-app-container-fade{
  opacity:var(--ccv-app-container-boot-opacity);
}

html.ccv-booting .ccv-ui-root:not(.ccv-ready) > :not(#ccv-loader){
  opacity:0 !important;
}

.ccv-ui-root .ccv-enter{
  opacity:0;
  transform:translateY(12px) scale(.985);
  transition:opacity .34s ease, transform .38s cubic-bezier(.2,.85,.2,1);
}

.ccv-ui-root.ccv-ready .ccv-enter{
  opacity:1;
  transform:none;
  transition-delay:calc(var(--ccv-i, 0) * 42ms);
}

.ccv-body-hidden{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

#ccv-loader{
  position:absolute;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  border-radius:0 0 22px 22px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(8,10,18,.84), rgba(5,6,12,.90));
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:1;
  transition:opacity .26s ease;
  pointer-events:auto;
}

#ccv-loader.is-off{
  opacity:0;
  pointer-events:none;
}

.ccv-loader-box{
  width:min(560px, 86%);
  padding:18px 18px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    rgba(9,11,20,.88);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 24px 56px rgba(0,0,0,.45);
}

.ccv-loader-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
  font-weight:800;
  color:rgba(255,255,255,.9);
  margin-bottom:12px;
}

.ccv-loader-title{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.ccv-loader-msg{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ccv-loader-pct{
  color:rgba(255,255,255,.74);
  font-weight:900;
  font-variant-numeric:tabular-nums;
}

.ccv-spin{
  width:12px;
  height:12px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.22);
  border-top-color:var(--ccv-accent);
  animation:ccvSpin .8s linear infinite;
  flex:0 0 auto;
}

@keyframes ccvSpin{ to{ transform:rotate(360deg); } }

.ccv-bar{
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}

#ccv-loader-fill{
  display:block;
  width:0%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #7D42FF, #9B64FF);
  transition:width .2s ease;
}

#svg-container{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
}

#svg-container._polyfill{ height:0; padding-top:100%; }

#svg-container #bg-img{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:translate(-50%,-50%) scale(1);
  opacity:.95;
  filter:saturate(.98) contrast(1.02);
  pointer-events:none;
  z-index:0;
}

#svg-container #vig-canvas,
#svg-container #ccv-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

#svg-container #vig-canvas{ z-index:1; }
#svg-container #ccv-svg{ z-index:2; }

#ccv-legend-overlay{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(9,10,18,.68);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:12px;
  font-weight:800;
  line-height:1.1;
}

.ccv-legend-row{
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.9);
}

.ccv-dot{
  width:9px;
  height:9px;
  border-radius:999px;
  display:inline-block;
  flex:0 0 auto;
}

.ccv-block{ width:100%; }
.ccv-row{ display:flex; gap:10px; align-items:center; }
.ccv-select-wrap{ position:relative; width:100%; }

.ccv-label{
  display:block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.22px;
  color:rgba(255,255,255,.70);
  margin:0 0 8px 2px;
}

#camera-wrapper .ccv-label,
#resolution-wrapper .ccv-label{
  display:none !important;
}

/* Canonical control skin (single source of truth) */
.ccv-ui-root .ccv-skin-control{
  height:var(--ccv-control-height) !important;
  border-radius:var(--ccv-control-radius) !important;
  border:1px solid var(--ccv-control-border-color) !important;
  background:var(--ccv-control-bg-gradient) !important;
  box-shadow:var(--ccv-control-shadow) !important;
  color:var(--ccv-control-text) !important;
  font-family:inherit !important;
  font-size:var(--ccv-control-font-size) !important;
  font-weight:var(--ccv-control-font-weight) !important;
  letter-spacing:var(--ccv-control-letter-spacing) !important;
  line-height:var(--ccv-control-line-height) !important;
}

.ccv-ui-root select.ccv-skin-select{
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;
  color-scheme:dark !important;
  width:100% !important;
  padding:var(--ccv-select-padding) !important;
  background-image:
    var(--ccv-control-bg-gradient),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(255,255,255,0.78)' d='M7 10l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:0 0, calc(100% - 14px) 50% !important;
  background-size:auto, 18px 18px !important;
  outline:none !important;
}

.ccv-ui-root select.ccv-skin-select:hover{
  border-color:rgba(255,255,255,.16) !important;
}

.ccv-ui-root select.ccv-skin-select:focus{
  border-color:var(--ccv-control-focus-border) !important;
  box-shadow:
    var(--ccv-control-focus-ring),
    var(--ccv-control-shadow) !important;
}

.ccv-ui-root select.ccv-skin-select option,
.ccv-ui-root select.ccv-skin-select optgroup{
  background-color:#1a1c27 !important;
  color:var(--ccv-control-text) !important;
}

.ccv-ui-root button.ccv-skin-button{
  width:100% !important;
  padding:0 16px !important;
}

.ccv-lock{
  width:var(--ccv-control-height);
  height:var(--ccv-control-height);
  border-radius:var(--ccv-control-radius);
  border:1px solid rgba(255,255,255,.12);
  background:var(--ccv-control-bg-gradient);
  box-shadow:var(--ccv-control-shadow);
  color:rgba(255,255,255,.90);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}

.ccv-lock.ccv-lock-active{
  background:var(--ccv-lock-active-bg) !important;
  border-color:var(--ccv-lock-active-border) !important;
  color:var(--ccv-lock-active-text) !important;
}

#controls-lens-circle-container.is-locked #lens-select{
  color:var(--ccv-select-locked-text) !important;
}

.ccv-custom-inline{ display:none; gap:10px; width:100%; }
.ccv-custom-inline.is-on{ display:flex; }

.ccv-input{
  width:100%;
  height:var(--ccv-control-height);
  padding:var(--ccv-input-padding);
  border-radius:var(--ccv-control-radius);
  border:1px solid var(--ccv-control-border-color);
  background:var(--ccv-control-bg-gradient);
  box-shadow:var(--ccv-control-shadow);
  color:var(--ccv-control-text);
  font-weight:800;
  outline:none;
}

.ccv-input:focus{
  border-color:var(--ccv-control-focus-border);
  box-shadow:
    var(--ccv-control-focus-ring),
    var(--ccv-control-shadow);
}

.ccv-cancel{
  width:var(--ccv-control-height);
  height:var(--ccv-control-height);
  border-radius:var(--ccv-control-radius);
  border:1px solid var(--ccv-control-border-color);
  background:var(--ccv-control-bg-gradient);
  box-shadow:var(--ccv-control-shadow);
  color:rgba(255,255,255,.88);
  cursor:pointer;
}

.ccv-focal-head{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  margin-bottom:10px;
}

.ccv-check{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:800;
  color:rgba(255,255,255,.76);
  user-select:none;
}

.ccv-check input{
  width:18px;
  height:18px;
  accent-color:var(--ccv-accent);
}

.ccv-focal-row{
  display:flex;
  align-items:center;
  gap:12px;
}

.ccv-slider{ width:100%; accent-color:var(--ccv-accent); }

.ccv-mm{
  display:flex;
  align-items:center;
  min-width:92px;
  width:92px;
}

#focal-input{
  width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  text-align:right;
  padding:10px 12px !important;
}

.ccv-help{
  margin-top:10px;
  font-size:12px;
  line-height:1.35;
  color:rgba(255,255,255,.66);
  font-weight:700;
}

.telemetry-table{
  width:100%;
  display:flex;
  flex-direction:column;
}

.telemetry-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:13px 4px;
  border-top:1px solid rgba(255,255,255,.08);
}

.telemetry-row:first-child{ border-top:0; }

.telemetry-row .k{
  font-size:13px;
  font-weight:800;
  color:rgba(255,255,255,.9);
}

.telemetry-row .k.ccv-k-with-help{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.telemetry-row .v{
  font-size:13px;
  font-weight:800;
  color:rgba(255,255,255,.72);
  text-align:right;
}

.telemetry-row .v strong{
  color:rgba(255,255,255,.94);
  font-weight:900;
}

.ccv-value-dot{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

#ccv-crop-info-btn{
  width:20px;
  height:20px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  color:rgba(255,255,255,.88);
  font-size:12px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

#ccv-crop-info-btn:focus{
  outline:none;
  border-color:var(--ccv-control-focus-border);
  box-shadow:var(--ccv-control-focus-ring);
}

#fov-crop{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

#fov-crop .ccv-fov-crop-title{
  font-size:11px;
  font-weight:800;
  letter-spacing:.2px;
  color:rgba(255,255,255,.72);
  white-space:nowrap;
}

#fov-crop-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px !important;
  min-width:170px;
  max-width:250px;
  padding:0 14px !important;
  border-radius:10px !important;
  border:1px solid var(--ccv-control-border-color) !important;
  background:var(--ccv-control-bg-gradient) !important;
  box-shadow:var(--ccv-control-shadow) !important;
  color:var(--ccv-control-text) !important;
  font-size:13px !important;
  font-weight:900 !important;
  line-height:1 !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
}

#fov-crop-label:focus{
  outline:none;
  border-color:var(--ccv-control-focus-border) !important;
  box-shadow:
    var(--ccv-control-focus-ring),
    var(--ccv-control-shadow) !important;
}

#fov-crop-label.is-locked{
  color:var(--ccv-crop-locked-text) !important;
}

#fov-crop-lock{
  width:34px !important;
  height:34px !important;
  border-radius:10px !important;
  font-size:14px;
}

#cf-crop-value{
  min-width:54px;
  text-align:right;
  font-size:14px;
  font-weight:900;
}

@media (max-width:767px){
  #fov-crop .ccv-fov-crop-title{ display:none; }
  #fov-crop-label{
    min-width:140px;
    max-width:180px;
  }
}

#cf-crop-dropdown{
  position:fixed;
  min-width:220px;
  background:rgba(10,12,16,.97);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  padding:8px;
  z-index:99999;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

#cf-crop-dropdown .row{
  padding:9px 10px;
  border-radius:9px;
  cursor:pointer;
  font-size:12px;
  font-weight:800;
  color:rgba(255,255,255,.85);
}

#cf-crop-dropdown .row:hover{ background:rgba(255,255,255,.06); }

#cf-crop-dropdown .lock{
  margin-top:8px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  gap:10px;
  align-items:center;
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:800;
}

#controls-download-svg #download-svg{
  width:100%;
  height:var(--ccv-control-height);
  border-radius:var(--ccv-control-radius);
  border:1px solid var(--ccv-control-border-color);
  background:var(--ccv-control-bg-gradient);
  color:var(--ccv-control-text);
  font-family:inherit;
  font-size:var(--ccv-control-font-size);
  font-weight:var(--ccv-control-font-weight);
  letter-spacing:var(--ccv-control-letter-spacing);
  line-height:var(--ccv-control-line-height);
  box-shadow:var(--ccv-control-shadow);
  cursor:pointer;
}

#controls-download-svg #download-svg:focus{
  outline:none;
  border-color:var(--ccv-control-focus-border);
  box-shadow:var(--ccv-control-focus-ring), var(--ccv-control-shadow);
}

.t-ok{ color:var(--ccv-accent) !important; }
.t-warn{ color:var(--ccv-warn) !important; }
.t-orange{ color:var(--ccv-orange) !important; }
.t-hot{ color:var(--ccv-hot) !important; }

body.ccv-modal-open{
  overflow:hidden;
}

#ccv-crop-help-overlay{
  position:fixed;
  inset:0;
  z-index:100000;
  display:grid;
  place-items:center;
  padding:22px;
  background:rgba(6,8,14,.36);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

#ccv-crop-help-overlay[hidden]{
  display:none !important;
}

#ccv-crop-help-modal{
  position:relative;
  width:min(720px, 100%);
  max-height:min(82vh, 760px);
  overflow:auto;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  padding:21px 24px 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01)),
    rgba(9,11,18,.95);
  box-shadow:0 26px 72px rgba(0,0,0,.58);
  color:rgba(255,255,255,.9);
}

#ccv-crop-help-close{
  position:absolute;
  top:10px;
  right:10px;
  width:32px;
  height:32px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  color:rgba(255,255,255,.88);
  font-size:15px;
  line-height:1;
  cursor:pointer;
}

#ccv-crop-help-modal h3{
  margin:0 42px 14px 0;
  padding-left:10px;
  border-left:2px solid rgba(125,66,255,.5);
  font-size:19px;
  line-height:1.28;
  color:rgba(255,255,255,.95);
  font-weight:800;
}

#ccv-crop-help-modal .ccv-help-section + .ccv-help-section{
  margin-top:14px;
}

#ccv-crop-help-modal .ccv-help-line{
  margin:0;
  font-size:14px;
  line-height:1.58;
  color:rgba(255,255,255,.86);
}

#ccv-crop-help-modal .ccv-help-key{
  color:rgba(255,255,255,.96);
  font-weight:850;
}

#ccv-crop-help-modal strong{
  color:rgba(255,255,255,.9);
  font-weight:850;
}

#ccv-crop-help-modal .ccv-help-formula{
  margin:8px 0 0;
}

#ccv-crop-help-modal .ccv-help-formula code{
  display:inline-block;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  padding:4px 10px;
  background:rgba(255,255,255,.035);
  color:rgba(255,255,255,.86);
  font-size:13px;
}

#ccv-crop-help-modal .ccv-help-compact{
  margin:8px 0 0;
  font-size:13px;
  line-height:1.52;
  color:rgba(255,255,255,.78);
}

#ccv-crop-help-modal .ccv-help-note{
  margin:8px 0 0;
  font-size:12px;
  line-height:1.5;
  color:rgba(255,255,255,.68);
}

#ccv-crop-help-modal .ccv-help-sep{
  margin:0 .38em;
  color:rgba(125,66,255,.74);
  opacity:.8;
}

#ccv-fatal-box{
  position:fixed;
  left:12px;
  bottom:12px;
  z-index:999999;
  max-width:620px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,80,80,.55);
  background:rgba(20,8,12,.96);
  color:#ffd7d7;
  font:600 12px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  box-shadow:0 10px 28px rgba(0,0,0,.45);
}