/* ============================================================
   CHROMA — background removal studio
   Palette: ink #0B0E14, panel #12161F, line #232937,
            chroma green #00E6A0, chroma green dim #0B8F63,
            paper #C9CDD3, paper dim #7B8494, warn #FF6B5E
   Type: display "Space Grotesk", body "Inter", mono "JetBrains Mono"
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --ink:#0B0E14;
  --panel:#12161F;
  --panel-raised:#161B26;
  --line:#232937;
  --chroma:#00E6A0;
  --chroma-dim:#0B8F63;
  --chroma-soft:rgba(0,230,160,0.12);
  --paper:#C9CDD3;
  --paper-dim:#7B8494;
  --warn:#FF6B5E;
  --radius:10px;
  --mono: 'JetBrains Mono', monospace;
  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  height:100%;
}

::selection{ background:var(--chroma-soft); color:var(--chroma); }

/* checkerboard motif — the visual signature of "transparent" */
.checker{
  background-image:
    linear-gradient(45deg, #1A2130 25%, transparent 25%),
    linear-gradient(-45deg, #1A2130 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1A2130 75%),
    linear-gradient(-45deg, transparent 75%, #1A2130 75%);
  background-size: 28px 28px;
  background-position: 0 0, 0 14px, 14px -14px, -14px 0px;
  background-color: #0E121B;
}

/* ---------- shell ---------- */
.shell{
  display:flex;
  flex-direction:column;
  height:100vh;
  overflow:hidden;
}

header.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 22px;
  border-bottom:1px solid var(--line);
  background:var(--panel);
  flex-shrink:0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--display);
  font-weight:700;
  font-size:18px;
  letter-spacing:0.2px;
  color:var(--paper);
}

.brand .dot{
  width:11px; height:11px; border-radius:3px;
  background:var(--chroma);
  box-shadow:0 0 14px var(--chroma);
}

.brand small{
  font-family:var(--mono);
  font-weight:400;
  font-size:11px;
  color:var(--paper-dim);
  letter-spacing:0.5px;
  margin-left:4px;
}

.topbar-actions{ display:flex; gap:10px; }

/* ---------- buttons ---------- */
button{
  font-family:var(--body);
  cursor:pointer;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--panel-raised);
  color:var(--paper);
  padding:9px 14px;
  font-size:13.5px;
  font-weight:500;
  transition:border-color .15s ease, color .15s ease, background .15s ease, transform .05s ease;
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
}
button:hover{ border-color:#33405a; color:#fff; }
button:active{ transform:translateY(1px); }
button:disabled{ opacity:.4; cursor:not-allowed; }

button.primary{
  background:var(--chroma);
  border-color:var(--chroma);
  color:#04140D;
  font-weight:600;
}
button.primary:hover{ background:#1CFFB2; border-color:#1CFFB2; color:#04140D; }

button.ghost{
  background:transparent;
}

button.tool{
  width:100%;
  justify-content:flex-start;
  background:var(--panel-raised);
}
button.tool.active{
  border-color:var(--chroma);
  color:var(--chroma);
  background:var(--chroma-soft);
}

button.icon-only{
  padding:9px 10px;
}

/* ---------- layout ---------- */
.workspace{
  flex:1;
  display:flex;
  min-height:0;
}

/* left rail: source + steps */
.rail{
  width:250px;
  flex-shrink:0;
  border-right:1px solid var(--line);
  background:var(--panel);
  padding:18px;
  overflow-y:auto;
}

.rail h2, .panel h2{
  font-family:var(--mono);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:1.4px;
  color:var(--paper-dim);
  margin:0 0 12px 0;
}

.dropzone{
  border:1.5px dashed #2C3548;
  border-radius:var(--radius);
  padding:26px 14px;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.dropzone:hover, .dropzone.drag{
  border-color:var(--chroma);
  background:var(--chroma-soft);
}
.dropzone svg{ opacity:.55; margin-bottom:8px; }
.dropzone p{
  margin:0;
  font-size:12.5px;
  color:var(--paper-dim);
  line-height:1.5;
}
.dropzone p b{ color:var(--paper); }

.file-meta{
  margin-top:14px;
  font-family:var(--mono);
  font-size:11px;
  color:var(--paper-dim);
  line-height:1.8;
}
.file-meta span{ color:var(--paper); }

.divider{
  height:1px;
  background:var(--line);
  margin:18px 0;
}

/* center: canvas stage */
.stage{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  position:relative;
  overflow:auto;
}

.canvas-frame{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 0 0 1px var(--line), 0 30px 60px -20px rgba(0,0,0,.6);
  max-width:100%;
  max-height:100%;
}

#viewCanvas{
  display:block;
  max-width:78vw;
  max-height:74vh;
  cursor:crosshair;
}

.empty-state{
  text-align:center;
  color:var(--paper-dim);
}
.empty-state .glyph{
  font-family:var(--display);
  font-size:13px;
  letter-spacing:3px;
  color:var(--chroma-dim);
  text-transform:uppercase;
  margin-bottom:8px;
}
.empty-state h3{
  font-family:var(--display);
  color:var(--paper);
  font-weight:600;
  font-size:20px;
  margin:0 0 6px 0;
}
.empty-state p{ font-size:13px; margin:0; }

.brush-cursor{
  position:absolute;
  border:1.5px solid var(--chroma);
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 1px rgba(0,0,0,.4);
  display:none;
}

/* right panel: tools */
.panel{
  width:270px;
  flex-shrink:0;
  border-left:1px solid var(--line);
  background:var(--panel);
  padding:18px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.tool-group{ margin-bottom:8px; }
.tool-group .stack{ display:flex; flex-direction:column; gap:8px; }

.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.field{ margin:10px 0; }
.field label{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:var(--paper-dim);
  margin-bottom:6px;
  font-family:var(--mono);
}
.field label b{ color:var(--paper); font-weight:500; }

input[type="range"]{
  -webkit-appearance:none;
  width:100%;
  height:4px;
  border-radius:2px;
  background:var(--line);
  outline:none;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--chroma);
  cursor:pointer;
  box-shadow:0 0 8px rgba(0,230,160,.5);
}

.swatches{ display:flex; gap:8px; flex-wrap:wrap; }
.swatch{
  width:26px; height:26px;
  border-radius:7px;
  border:1.5px solid var(--line);
  cursor:pointer;
}
.swatch.active{ border-color:var(--chroma); box-shadow:0 0 0 2px var(--chroma-soft); }

input[type="color"]{
  -webkit-appearance:none;
  width:34px; height:34px;
  border:1.5px solid var(--line);
  border-radius:8px;
  background:none;
  cursor:pointer;
  padding:0;
}

.bg-mode-toggle{
  display:flex;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
}
.bg-mode-toggle button{
  flex:1;
  border:none;
  border-radius:0;
  justify-content:center;
}
.bg-mode-toggle button.active{
  background:var(--chroma-soft);
  color:var(--chroma);
}

.status-bar{
  border-top:1px solid var(--line);
  padding:12px 22px;
  font-family:var(--mono);
  font-size:11px;
  color:var(--paper-dim);
  display:flex;
  justify-content:space-between;
  flex-shrink:0;
  background:var(--panel);
}
.status-bar .pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.status-bar .pill::before{
  content:'';
  width:6px; height:6px;
  border-radius:50%;
  background:var(--paper-dim);
}
.status-bar .pill.on::before{ background:var(--chroma); box-shadow:0 0 6px var(--chroma); }

.toast{
  position:fixed;
  bottom:60px;
  left:50%;
  transform:translateX(-50%);
  background:var(--panel-raised);
  border:1px solid var(--line);
  color:var(--paper);
  padding:10px 18px;
  border-radius:8px;
  font-size:13px;
  font-family:var(--mono);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:50;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-6px); }
.toast.warn{ border-color:var(--warn); color:var(--warn); }
.toast.ok{ border-color:var(--chroma-dim); color:var(--chroma); }

.hidden{ display:none !important; }

@media (max-width: 880px){
  .rail{ display:none; }
  .panel{ width:220px; }
  #viewCanvas{ max-width:60vw; }
}