/* Green Screen Remover — single stylesheet, no framework */

:root{
  --bg:#0d1117;
  --panel:#161b22;
  --panel-2:#1c2330;
  --line:#2a3341;
  --line-soft:#222a36;
  --text:#e6edf3;
  --text-dim:#9aa7b6;
  --text-mute:#6e7c8c;
  --accent:#2f81f7;
  --accent-hi:#4a94ff;
  --ok:#3fb950;
  --warn:#d29922;
  --err:#f85149;
  --radius:10px;
  --radius-sm:7px;
  --maxw:1180px;
  --tap:44px;
}

*{box-sizing:border-box}

/* The `hidden` attribute is the switch this page uses to show and hide panels.
   A bare `hidden` only sets `display:none` at the lowest specificity, so any
   rule below that gives an element a display value (flex, grid, block) would
   silently win and leave the element on screen. This one rule makes `hidden`
   authoritative for every element, which is what the markup assumes. */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  overflow-x:hidden;
}
img,canvas,svg{max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code{
  font:0.9em/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:#000;
  border:1px solid var(--line);
  border-radius:4px;
  padding:1px 5px;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ---------- top bar ---------- */
.topbar{border-bottom:1px solid var(--line-soft);background:#0b0f14}
.topbar-in{display:flex;align-items:baseline;gap:12px;height:52px}
.brand{font-weight:650;font-size:16px;color:var(--text);letter-spacing:.2px}
.brand:hover{text-decoration:none;color:#fff}
.brand-note{font-size:12px;color:var(--text-mute)}

/* ---------- tool stage ---------- */
.stage{padding-top:22px}

.dropzone{
  border:2px dashed var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  padding:34px 20px;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s,background .15s;
}
.dropzone:hover,.dropzone:focus-visible{border-color:var(--accent);background:#121a25;outline:none}
.dropzone.is-over{border-color:var(--accent-hi);background:#152033}
.dz-icon{color:var(--accent);margin-bottom:8px}
.dz-title{margin:0 0 4px;font-size:17px;font-weight:600}
.dz-sub{margin:0 0 10px;color:var(--text-dim);font-size:14px}
.dz-types{margin:0;color:var(--text-mute);font-size:12px;letter-spacing:.3px}
.link{color:var(--accent);text-decoration:underline}

.urlrow{display:flex;gap:8px;margin-top:12px}
.urlrow input{
  flex:1;min-width:0;height:var(--tap);padding:0 12px;
  background:#0b0f14;border:1px solid var(--line);border-radius:var(--radius-sm);
  color:var(--text);font-size:14px;
}
.urlrow input:focus{outline:none;border-color:var(--accent)}

.err{
  margin:12px 0 0;padding:10px 12px;border-radius:var(--radius-sm);
  background:#2a1416;border:1px solid #5a2226;color:#ffb4ad;font-size:13px;
}

/* ---------- buttons ---------- */
.btn{
  height:var(--tap);padding:0 16px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--panel-2);color:var(--text);
  font-size:14px;font-weight:550;cursor:pointer;white-space:nowrap;
}
.btn:hover{background:#243044;border-color:#3a475a}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hi);border-color:var(--accent-hi)}
.btn-ghost{background:transparent}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- editor ---------- */
.editor{margin-top:16px}
.canvas-wrap{
  position:relative;background:
    linear-gradient(45deg,#1a1f28 25%,transparent 25%,transparent 75%,#1a1f28 75%),
    linear-gradient(45deg,#1a1f28 25%,#12161c 25%,#12161c 75%,#1a1f28 75%);
  background-size:18px 18px;background-position:0 0,9px 9px;
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;min-height:200px;display:flex;align-items:center;justify-content:center;
}
#canvas{display:block;max-width:100%;max-height:56vh;width:auto;height:auto}
.busy{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;
  background:rgba(8,11,15,.78);font-size:14px;color:var(--text-dim);backdrop-filter:blur(2px);
}
/* `display:flex` above would beat the browser's default [hidden] rule, leaving
   the overlay stuck over the canvas. Any element given a display value must
   declare this itself. */
.busy[hidden]{display:none}
.spin{
  width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:spin .7s linear infinite;flex:0 0 auto;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- clip bar ---------- */
.clipbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:10px;padding:10px 12px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
}
.cb-label{font-size:12px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.6px}
.clipbar input[type=range]{flex:1 1 120px;min-width:100px}
.cb-val{font-size:12px;color:var(--text-dim);font-variant-numeric:tabular-nums;min-width:42px}
.cb-sep{color:var(--text-mute)}
.cb-dur{font-size:12px;color:var(--text-mute);margin-left:auto}

/* ---------- AI group ---------- */
.groupbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:10px;padding:10px 12px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
}
.gb-check{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:550;cursor:pointer}
.gb-check input{width:18px;height:18px;accent-color:var(--accent)}
.gb-hint{font-size:12px;color:var(--text-mute)}

/* ---------- control panel ---------- */
.panel{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:12px;background:var(--line-soft);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
/* A grid item defaults to min-width:auto, so the widest child would set the
   column width and refuse to shrink. Both levels need the floor removed. */
.panel > .pgroup{min-width:0}
.pgroup{background:var(--panel);padding:14px;min-width:0}
.ptitle{
  margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.7px;
  text-transform:uppercase;color:var(--text-mute);
}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.row + .row{margin-top:10px}
.row-auto{margin-top:8px}
.mini{font-size:12px;color:var(--text-mute)}
.mini-note{font-size:12px;color:var(--warn);line-height:1.45}

input[type=color]{
  width:40px;height:32px;padding:2px;border:1px solid var(--line);
  border-radius:6px;background:#0b0f14;cursor:pointer;flex:0 0 auto;
}
.hex{font:12px/1 ui-monospace,Menlo,Consolas,monospace;color:var(--text-dim)}

.presets{display:flex;gap:6px;flex-wrap:wrap}
.presets-title{display:none}
.swatch{
  width:26px;height:26px;border-radius:6px;border:1px solid rgba(255,255,255,.18);
  cursor:pointer;padding:0;flex:0 0 auto;
}
.swatch:hover{border-color:#fff}
.swatch.is-on{outline:2px solid var(--accent);outline-offset:1px}

.slider{margin-bottom:14px}
.slider:last-child{margin-bottom:0}
.slider label{display:block;font-size:13px;font-weight:550;margin-bottom:5px}
.slider label em{display:block;font-style:normal;font-weight:400;font-size:11.5px;color:var(--text-mute);line-height:1.4;margin-top:2px}
.slider output{
  float:right;font:12px/1 ui-monospace,Menlo,Consolas,monospace;
  color:var(--text-dim);margin-top:-22px;
}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:#2b3542}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;margin-top:-6.5px;
  border-radius:50%;background:var(--accent);border:2px solid #0d1117;
}
input[type=range]::-moz-range-track{height:5px;border-radius:3px;background:#2b3542}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid #0d1117}

select{
  height:36px;padding:0 10px;border-radius:6px;flex:1 1 auto;min-width:0;
  background:#0b0f14;border:1px solid var(--line);color:var(--text);font-size:13.5px;
}
select:focus{outline:none;border-color:var(--accent)}

.bg-tabs{display:flex;gap:4px;margin-bottom:10px}
.bg-tab{
  flex:1;height:34px;border-radius:6px;border:1px solid var(--line);
  background:transparent;color:var(--text-dim);font-size:12.5px;cursor:pointer;
}
.bg-tab.is-on{background:var(--panel-2);border-color:var(--accent);color:var(--text)}
.bg-pane{margin-top:8px}
.bg-name{font-size:12px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* ---------- actions ---------- */
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

.progress{display:flex;align-items:center;gap:10px;margin-top:12px}
.bar{flex:1;height:8px;border-radius:4px;background:#1c2330;overflow:hidden}
.bar-fill{height:100%;width:0;background:var(--accent);transition:width .12s linear}
#progressText{font:12px/1 ui-monospace,Menlo,Consolas,monospace;color:var(--text-dim);min-width:38px}

.shotstrip{
  display:flex;align-items:center;gap:12px;margin-top:12px;padding:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
}
.ss-label{font-size:12px;color:var(--text-mute)}
#shot{max-height:86px;border:1px solid var(--line);border-radius:5px}

/* ---------- document sections ---------- */
.doc{margin-top:34px}
.doc h2{font-size:21px;margin:0 0 14px;letter-spacing:.1px}
.doc h3{font-size:15px;margin:22px 0 8px;color:#c9d5e2}
.steps{margin:0;padding-left:22px}
.steps li{margin-bottom:9px;color:#ccd6e0}
.steps li strong{color:#fff}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius-sm)}
table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:520px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{background:#121821;font-weight:650;font-size:12.5px;color:#c9d5e2}
tbody tr:last-child td{border-bottom:none}
td.formula{
  background:#0f141b;font:12px/1.7 ui-monospace,Menlo,Consolas,monospace;
  color:var(--text-dim);white-space:nowrap;border-left:1px solid var(--line-soft);
}

.limits{margin:0;padding-left:20px}
.limits li{margin-bottom:8px;color:#ccd6e0}
.note{font-size:12.5px;color:var(--text-mute);margin-top:10px;line-height:1.5}

details{
  border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  background:var(--panel);margin-bottom:8px;
}
summary{
  padding:13px 14px;cursor:pointer;font-weight:550;font-size:14.5px;
  list-style:none;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--text-mute);font-weight:400}
details[open] summary::after{content:"–"}
details p{margin:0;padding:0 14px 14px;color:#c3ced9;font-size:14px}

.foot{margin-top:34px;padding-bottom:40px;border-top:1px solid var(--line-soft)}
.foot p{margin:16px 0 0;font-size:12.5px;color:var(--text-mute)}

/* ============================================================
   MOBILE  — single column, tap-sized controls, no overflow
   ============================================================ */
@media (max-width:1000px){
  .panel{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:720px){
  .wrap{padding:0 14px}
  .doc h2{font-size:19px}
  .dropzone{padding:26px 14px}
  #canvas{max-height:42vh}

  .urlrow{flex-direction:column}
  .urlrow .btn{width:100%}

  /* the control grid must collapse to one column and each panel must be free
     to shrink to the viewport. `minmax(0,1fr)` is what actually does this:
     with a bare `1fr` the track is floored at the widest child's min-content,
     so a panel would silently measure wider than the screen it sits in. */
  .panel{grid-template-columns:minmax(0,1fr)}
  .pgroup{padding:13px;min-width:0}
  .pgroup > *{min-width:0}
  .row{min-width:0}
  .row > *{min-width:0}
  .presets{min-width:0}
  select{min-width:0;max-width:100%}
  .slider output{float:none;display:block;margin-top:2px}

  /* every tappable target meets the 44px minimum */
  .btn{width:100%;height:48px;font-size:15px}
  .urlrow .btn{height:48px}
  .bg-tab{height:44px;font-size:13px}
  select{height:44px;font-size:15px}
  input[type=color]{width:48px;height:44px}
  input[type=range]{height:34px}
  input[type=range]::-webkit-slider-thumb{width:22px;height:22px;margin-top:-8.5px}
  input[type=range]::-moz-range-thumb{width:22px;height:22px}
  .swatch{width:38px;height:38px}
  .actions{flex-direction:column}
  .actions .btn{width:100%}

  .clipbar{gap:8px}
  .clipbar input[type=range]{flex:1 1 100%}
  .cb-dur{margin-left:0;width:100%}

  .actions{position:sticky;bottom:0;background:var(--bg);padding:10px 0;z-index:5}

  table{font-size:12.5px;min-width:440px}
  th,td{padding:8px 10px}
  td.formula{white-space:normal}
}

@media (max-width:400px){
  .brand-note{display:none}
  .dz-title{font-size:16px}
}