.transparent-tool-main{
  min-width:0;
}

.transparent-tool-main [hidden]{
  display:none!important;
}

.transparent-workspace{
  margin-top:24px;
  overflow:hidden;
}

.transparent-section-head{
  padding:16px 18px;
  border-bottom:1px solid var(--line);
}

.transparent-workspace .transparent-section-head h2{
  margin:0;
  padding:0;
  border:0;
  font-size:1.08rem;
}

.transparent-section-head p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:.9rem;
}

.transparent-tool-grid{
  display:grid;
  grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr);
  gap:0;
}

.transparent-file-section{
  grid-column:1 / -1;
  min-width:0;
  padding:18px;
  border-bottom:1px solid var(--line);
}

.transparent-controls{
  min-width:0;
  padding:18px;
  border-right:1px solid var(--line);
}

.transparent-control-section + .transparent-control-section{
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid var(--line);
}

.transparent-control-section h3,
.transparent-preview-panel h3{
  margin:0 0 12px;
  font-size:1rem;
}

.transparent-drop-zone{
  display:grid;
  place-items:center;
  min-height:155px;
  padding:24px 16px;
  text-align:center;
  border:1px dashed var(--line-strong);
  border-radius:var(--radius-m);
  background:#faf6f0;
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease;
}

.transparent-drop-zone:hover,
.transparent-drop-zone.is-dragover{
  border-color:var(--accent);
  background:var(--accent-soft);
}

.transparent-drop-zone:focus-within{
  outline:3px solid rgba(163,88,79,.28);
  outline-offset:3px;
}

.transparent-drop-zone svg{
  width:46px;
  height:46px;
  margin-bottom:10px;
  color:var(--accent);
}

.transparent-drop-zone strong{
  display:block;
}

.transparent-drop-zone > span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:.88rem;
}

.transparent-drop-zone .button{
  margin-top:14px;
}

.transparent-visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.transparent-help,
.transparent-preview-note,
.transparent-download-note{
  margin:9px 0 0;
  color:var(--muted);
  font-size:.84rem;
}

.transparent-file-info,
.transparent-result-info{
  display:grid;
  gap:0;
  margin:14px 0 0;
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  background:var(--surface);
  overflow:hidden;
}

.transparent-file-info > div,
.transparent-result-info > div{
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:12px;
  padding:9px 12px;
  border-top:1px solid var(--line);
}

.transparent-file-info > div:first-child,
.transparent-result-info > div:first-child{
  border-top:0;
}

.transparent-file-info dt,
.transparent-result-info dt{
  color:var(--muted);
  font-size:.82rem;
}

.transparent-file-info dd,
.transparent-result-info dd{
  min-width:0;
  margin:0;
  font-size:.88rem;
  font-weight:700;
  overflow-wrap:anywhere;
}

.transparent-color-row{
  display:grid;
  grid-template-columns:minmax(140px,.8fr) minmax(150px,1.2fr);
  gap:12px;
  align-items:end;
}

.transparent-color-picker{
  display:grid;
  grid-template-columns:auto 46px;
  grid-template-rows:auto 46px;
  gap:5px 10px;
  align-items:center;
  min-height:74px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  background:#fff;
  cursor:pointer;
}

.transparent-color-picker-label{
  grid-column:1 / -1;
  font-weight:700;
  font-size:.88rem;
}

.transparent-color-picker input[type="color"]{
  width:100%;
  min-width:70px;
  height:46px;
  padding:3px;
  border:1px solid var(--line-strong);
  border-radius:8px;
  background:#fff;
  cursor:pointer;
}

.transparent-color-swatch{
  width:46px;
  height:46px;
  border:1px solid var(--line-strong);
  border-radius:8px;
  background:#fff;
}

.transparent-hex-field label{
  display:block;
  margin-bottom:5px;
  font-size:.84rem;
  font-weight:700;
}

.transparent-hex-field input{
  width:100%;
  min-height:46px;
  padding:9px 11px;
  color:var(--text);
  border:1px solid var(--line-strong);
  border-radius:8px;
  background:#fff;
  text-transform:uppercase;
}

.transparent-inline-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.transparent-range-field + .transparent-range-field{
  margin-top:18px;
}

.transparent-range-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:7px;
}

.transparent-range-head label{
  font-weight:700;
  font-size:.9rem;
}

.transparent-range-head output{
  min-width:3em;
  padding:2px 8px;
  text-align:center;
  color:var(--accent);
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface-soft);
  font-weight:700;
  font-size:.86rem;
}

.transparent-range-field input[type="range"]{
  width:100%;
  min-height:32px;
  accent-color:var(--accent);
}

.transparent-range-field p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:.82rem;
}

.transparent-preview-panel{
  min-width:0;
  padding:18px;
}

.transparent-preview-head{
  margin-bottom:12px;
}

.transparent-preview-head h3{
  margin:0;
}

.transparent-preview-stage{
  position:relative;
  display:grid;
  place-items:center;
  min-height:360px;
  padding:12px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  background-color:#f7f7f7;
  background-image:
    linear-gradient(45deg,#dedede 25%,transparent 25%),
    linear-gradient(-45deg,#dedede 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#dedede 75%),
    linear-gradient(-45deg,transparent 75%,#dedede 75%);
  background-size:22px 22px;
  background-position:0 0,0 11px,11px -11px,-11px 0;
}

.transparent-preview-empty{
  max-width:270px;
  padding:24px;
  text-align:center;
  color:var(--muted);
  background:rgba(255,253,250,.88);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
}

.transparent-preview-empty svg{
  width:52px;
  height:52px;
  margin:0 auto 10px;
  color:var(--line-strong);
}

.transparent-preview-empty strong,
.transparent-preview-empty span{
  display:block;
}

.transparent-preview-empty strong{
  color:var(--text);
  font-size:.92rem;
}

.transparent-preview-empty span{
  margin-top:4px;
  font-size:.82rem;
}

.transparent-preview-stage canvas{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:620px;
  cursor:crosshair;
  touch-action:manipulation;
  image-rendering:auto;
}

.transparent-progress{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) 3.5em;
  gap:10px;
  align-items:center;
  padding:14px 18px;
  border-top:1px solid var(--line);
  background:#fcfaf7;
}

.transparent-progress label{
  font-weight:700;
  font-size:.9rem;
}

.transparent-progress progress{
  width:100%;
  height:14px;
  accent-color:var(--accent);
}

.transparent-progress span{
  text-align:right;
  color:var(--muted);
  font-size:.84rem;
}

.transparent-tool-actions{
  justify-content:flex-end;
}

.transparent-message{
  margin:0 18px 18px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  background:#fff;
  font-size:.9rem;
}

.transparent-message.is-info{
  border-color:#b8c8d4;
  background:#f6fafc;
}

.transparent-message.is-success{
  color:#315b48;
  border-color:#a9c9b8;
  background:var(--ok-soft);
}

.transparent-message.is-warning{
  color:#725a25;
  border-color:#d9c589;
  background:#fffaf0;
}

.transparent-message.is-error{
  color:#7c3f3f;
  border-color:#d4aaaa;
  background:#fff7f7;
}

.transparent-result{
  margin-top:18px;
  padding:20px;
}

.transparent-result-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.transparent-result-label{
  margin:0 0 3px;
  color:var(--muted);
  font-size:.82rem;
}

.transparent-result h2{
  margin:0;
  font-size:1.25rem;
}

.transparent-result-status{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:4px 10px;
  color:#315b48;
  border:1px solid #a9c9b8;
  border-radius:999px;
  background:var(--ok-soft);
  font-size:.8rem;
  font-weight:700;
}

.transparent-result-info{
  margin-top:16px;
}

.transparent-result-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}

.transparent-result-actions .button-subtle.is-active{
  color:var(--accent);
  border-color:var(--accent);
  background:var(--accent-soft);
}

.transparent-download-button{
  min-height:48px;
}

.transparent-result-support{
  margin-top:16px;
}

.transparent-notes,
.transparent-faq{
  margin-top:18px;
  padding:20px;
}

.transparent-notes h2,
.transparent-faq h2{
  margin:0 0 12px;
  font-size:1.15rem;
}

.transparent-notes ul{
  margin:0;
  padding-left:1.35em;
}

.transparent-notes li + li{
  margin-top:6px;
}

.transparent-faq details{
  border-top:1px solid var(--line);
}

.transparent-faq details:first-of-type{
  border-top:0;
}

.transparent-faq summary{
  padding:13px 2px;
  cursor:pointer;
  font-weight:700;
}

.transparent-faq details p{
  margin:-2px 0 14px;
  padding:0 2px;
  color:var(--muted);
}

button:disabled,
a.button[aria-disabled="true"]{
  cursor:not-allowed;
  opacity:.5;
}

@media (min-width:961px){
  .transparent-file-section .transparent-file-info{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .transparent-file-section .transparent-file-info > div{
    grid-template-columns:1fr;
    gap:2px;
    border-top:0;
    border-left:1px solid var(--line);
  }

  .transparent-file-section .transparent-file-info > div:first-child{
    border-left:0;
  }
}

@media (max-width:960px){
  .transparent-tool-grid{
    grid-template-columns:1fr;
  }

  .transparent-controls{
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .transparent-drop-zone{
    min-height:210px;
  }

  .transparent-preview-stage{
    min-height:320px;
  }
}

@media (max-width:620px){
  .transparent-section-head,
  .transparent-file-section,
  .transparent-controls,
  .transparent-preview-panel{
    padding:15px;
  }

  .transparent-color-row{
    grid-template-columns:1fr;
  }

  .transparent-preview-stage{
    min-height:250px;
    padding:8px;
  }

  .transparent-progress{
    grid-template-columns:1fr auto;
  }

  .transparent-progress label{
    grid-column:1 / -1;
  }

  .transparent-tool-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .transparent-tool-actions .button,
  .transparent-tool-actions .button-subtle,
  .transparent-result-actions .button,
  .transparent-result-actions .button-subtle{
    width:100%;
    min-height:46px;
  }

  .transparent-result-head{
    flex-direction:column;
  }

  .transparent-file-info > div,
  .transparent-result-info > div{
    grid-template-columns:1fr;
    gap:1px;
  }
}

@media (max-width:360px){
  .transparent-drop-zone{
    min-height:190px;
    padding:20px 10px;
  }

}