/* ==========================================================================
   Photo Tools — assets/photo-tools.css
   Scoped under #ptWorkspace / .pt-*. Reuses site tokens from style.css.
   ========================================================================== */

.pt-workspace{
  max-width: 980px;
  margin: 8px auto 40px;
}

/* ---- dropzone ---- */
.pt-dropzone{
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg, 24px);
  padding: 46px 20px;
  text-align: center;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  transition: border-color .15s ease, background .15s ease;
}
.pt-dropzone.is-drag{ border-color: var(--accent); background: var(--surface-2); }
.pt-drop-icon{ width: 46px; height: 46px; stroke: var(--accent); fill: none; stroke-width: 1.6; margin-bottom: 10px; }
.pt-dropzone p{ margin: 0 0 12px; color: var(--ink-soft); }
.pt-drop-hint{ display:block; margin-top: 12px; font-size: .82rem; color: var(--ink-faint); max-width: 480px; margin-left:auto; margin-right:auto; }

/* ---- queue strip ---- */
.pt-queue{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.pt-queue-item{
  position: relative;
  width: 64px; height: 64px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  background: var(--surface-2);
  flex-shrink: 0;
}
.pt-queue-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.pt-queue-item.is-active{ border-color: var(--accent); }
.pt-queue-item .pt-q-remove{
  position:absolute; top:2px; right:2px; width:18px; height:18px;
  background: rgba(0,0,0,.55); color:#fff; border:none; border-radius:50%;
  font-size: 11px; line-height:18px; text-align:center; cursor:pointer; padding:0;
}
.pt-add-more{
  appearance:none; border:1px dashed var(--border); background: var(--surface);
  color: var(--accent); font-size:.82rem; font-weight:600; padding:7px 12px;
  border-radius: 10px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  margin-bottom: 18px;
}
.pt-add-more svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.4; }

/* ---- editor grid ---- */
.pt-grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 22px;
}
@media (max-width: 800px){
  .pt-grid{ grid-template-columns: 1fr; }
}

.pt-preview-col{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 24px);
  box-shadow: var(--shadow-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.pt-preview-box{
  width: 100%;
  min-height: 240px;
  max-height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(45deg, var(--surface-2) 25%, transparent 25%) -8px 0/16px 16px,
    linear-gradient(-45deg, var(--surface-2) 25%, transparent 25%) -8px 0/16px 16px,
    linear-gradient(45deg, transparent 75%, var(--surface-2) 75%) 0 0/16px 16px,
    linear-gradient(-45deg, transparent 75%, var(--surface-2) 75%) 0 0/16px 16px,
    var(--bg);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.pt-preview-box canvas{ max-width: 100%; max-height: 420px; display:block; }
.pt-preview-stats{
  font-size: .84rem;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.5;
}
.pt-preview-stats strong{ color: var(--ink); }
.pt-preview-stats .pt-stat-good{ color: var(--success); font-weight:700; }
.pt-preview-stats .pt-stat-bad{ color: var(--accent-2); font-weight:700; }

.pt-controls-col{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 24px);
  box-shadow: var(--shadow-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pt-field{ display:flex; flex-direction:column; gap:6px; flex:1; min-width:0; }
.pt-field label{ font-size: .78rem; font-weight:600; color: var(--ink-soft); }
.pt-field input[type="number"],
.pt-field input[type="text"],
.pt-field select{
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink);
  border-radius: 10px;
  padding: 9px 10px;
  font-size: .9rem;
  font-family: var(--font-body);
  width: 100%;
}
.pt-field-row{ display:flex; gap:10px; align-items:flex-end; }
.pt-lock-field{ flex: 0 0 auto; align-items:center; }
.pt-lock-btn{
  appearance:none; border:1px solid var(--border); background: var(--surface-2);
  color: var(--ink-faint); width:36px; height:36px; border-radius:10px;
  display:inline-grid; place-items:center; cursor:pointer;
}
.pt-lock-btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.2; }
.pt-lock-btn.is-locked{ color: var(--accent); border-color: var(--accent); }
.pt-unit-field{ flex: 0 0 92px; }

.pt-scale-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pt-chip{
  appearance:none; border:1px solid var(--border); background: var(--surface-2);
  color: var(--ink-soft); font-size:.78rem; font-weight:600;
  padding:7px 11px; border-radius: 20px; cursor:pointer; transition: all .15s ease;
}
.pt-chip:hover{ border-color: var(--accent); color: var(--accent); }
.pt-chip.is-active{ background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pt-dpi-input{ width: 70px; border:1px solid var(--border); background:var(--surface-2); color:var(--ink);
  border-radius:10px; padding:7px 8px; font-size:.85rem; }
.pt-hint{ font-size: .75rem; color: var(--ink-faint); line-height:1.4; }

.pt-bg-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pt-bg-chip{
  appearance:none; border:1px solid var(--border); background: var(--surface-2);
  color: var(--ink-soft); font-size:.78rem; font-weight:600;
  padding:7px 12px; border-radius: 20px; cursor:pointer; transition: all .15s ease;
  display:inline-flex; align-items:center; gap:5px;
}
.pt-bg-chip svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.2; }
.pt-bg-chip:hover{ border-color: var(--accent); color: var(--accent); }
.pt-bg-chip.is-active{ background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pt-bg-swatch{
  width:30px; height:30px; border-radius:50%; border:2px solid var(--border);
  cursor:pointer; padding:0; box-shadow: var(--shadow-sm); flex:0 0 auto;
}
.pt-bg-swatch:hover{ transform: scale(1.08); }
.pt-bg-swatch.is-active{ border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.pt-bg-custom{
  width:30px; height:30px; border-radius:50%; overflow:hidden; border:2px dashed var(--border);
  cursor:pointer; display:inline-block; position:relative; flex:0 0 auto;
}
.pt-bg-custom input[type="color"]{
  position:absolute; inset:-4px; width:calc(100% + 8px); height:calc(100% + 8px);
  border:none; padding:0; cursor:pointer;
}
.pt-bg-custom.is-active{ border-color: var(--accent); border-style: solid; box-shadow: 0 0 0 2px var(--accent); }

.pt-checkbox-label{
  display:flex; align-items:center; gap:9px; cursor:pointer; font-size:.85rem;
  font-weight:600; color: var(--ink-soft);
}
.pt-checkbox-label input[type="checkbox"]{ width:17px; height:17px; accent-color: var(--accent); cursor:pointer; }

.pt-tabbar{ display:flex; gap:6px; background: var(--surface-2); padding:4px; border-radius: 12px; }
.pt-tabbtn{
  flex:1; appearance:none; border:none; background:transparent; color: var(--ink-soft);
  font-size:.82rem; font-weight:600; padding:8px 6px; border-radius:9px; cursor:pointer;
}
.pt-tabbtn.is-active{ background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }

input[type="range"]{ width:100%; accent-color: var(--accent); }

.pt-actions{ display:flex; gap:10px; margin-top: 4px; }
.pt-actions .btn{ flex:1; }
.pt-download-all{ width:100%; }

.btn{
  appearance:none; border-radius: 12px; padding: 11px 16px; font-size:.9rem; font-weight:700;
  cursor:pointer; border:1px solid transparent; font-family: var(--font-body);
}
.btn-primary{ background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover{ filter: brightness(1.05); }
.btn-secondary{ background: var(--accent-3); color: #fff; }
.btn-ghost{ background: var(--surface-2); color: var(--ink-soft); border-color: var(--border); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.pt-toast{
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 12px;
  font-size: .85rem; opacity: 0; pointer-events: none; transition: all .2s ease; z-index: 999;
  box-shadow: var(--shadow-lg);
}
.pt-toast.show{ opacity: 1; transform: translate(-50%, 0); }