/* ===================================================================
   ImageToolsFree — shared kit for the newer tools
   Guided steps, editor stage, controls, "what next" panel, finder.
   =================================================================== */

/* ---- guided steps bar ---- */
.guide {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
  margin: 0 0 1.3rem; counter-reset: g;
}
.guide li {
  display: flex; align-items: center; gap: .6rem; padding: .62rem .8rem; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--line); font-size: .86rem; font-weight: 600;
  color: var(--muted); transition: all .2s; min-width: 0;
}
.guide li b {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sand); color: var(--muted); font-size: .8rem; font-weight: 700; transition: all .2s;
}
.guide li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guide li.on { border-color: var(--green); background: var(--green-50); color: var(--green-700); box-shadow: var(--sh-sm); }
.guide li.on b { background: var(--green); color: var(--on-accent); }
.guide li.ok { color: var(--green-700); }
.guide li.ok b { background: var(--green-100); color: var(--green-700); font-size: 0; }
.guide li.ok b::after { content: '✓'; font-size: .85rem; }
@media (max-width: 560px) {
  .guide li { padding: .5rem; font-size: .76rem; gap: .4rem; flex-direction: column; text-align: center; }
  .guide li span { white-space: normal; }
}

/* ---- hint / tip lines ---- */
.hint {
  display: flex; gap: .55rem; align-items: flex-start; font-size: .86rem; color: var(--muted); line-height: 1.55;
  margin-top: .55rem;
}
.hint::before {
  content: 'i'; flex: none; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px;
  background: var(--green-50); border: 1px solid var(--green-100); color: var(--green);
  font: 700 .7rem/16px var(--display); text-align: center;
}
.tip-box {
  margin-top: 1rem; background: var(--green-50); border: 1px solid var(--green-100); border-radius: var(--r);
  padding: .85rem 1.05rem; font-size: .9rem; color: var(--green-700); line-height: 1.6;
}
.tip-box strong { color: var(--green-800); }
.sample-link {
  margin-top: .9rem; font-size: .86rem; color: var(--muted);
}
.sample-link button {
  background: none; border: none; padding: 0; font: inherit; font-weight: 600; color: var(--green-700);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.drop-note { font-size: .8rem; color: var(--muted); margin-top: .7rem; }

/* ---- work area (hidden until a file is loaded) ---- */
.work { display: none; margin-top: 1.4rem; }
.work.show { display: block; }
.stage {
  position: relative; border-radius: var(--r); border: 1px solid var(--line); overflow: hidden;
  display: flex; align-items: center; justify-content: center; min-height: 160px; padding: .6rem;
  background:
    linear-gradient(45deg, var(--checker-a) 25%, transparent 25%, transparent 75%, var(--checker-a) 75%) 0 0/20px 20px,
    linear-gradient(45deg, var(--checker-a) 25%, var(--checker-b) 25%, var(--checker-b) 75%, var(--checker-a) 75%) 10px 10px/20px 20px;
}
.stage canvas, .stage img { max-width: 100%; max-height: 520px; display: block; height: auto; }
.stage.plain { background: var(--sand); }
.stage-cap { font-size: .8rem; color: var(--muted); margin-top: .5rem; text-align: center; }

/* ---- controls ---- */
.ctrls { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.1rem 1.3rem; margin-top: 1.4rem; }
.ctrl > label, .ctrl > .lbl {
  display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem;
}
.ctrl > label output, .ctrl > .lbl output { font-size: .82rem; letter-spacing: 0; text-transform: none; color: var(--green-700); font-weight: 700; }
.ctrl.wide { grid-column: 1 / -1; }
.ctrl input[type=range] { width: 100%; }
.ctrl select, .ctrl textarea, .ctrl input[type=text], .ctrl input[type=number], .ctrl input[type=url] {
  width: 100%; padding: .65rem .85rem; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  font-family: inherit; font-size: .95rem; color: var(--ink); background: var(--surface-2);
}
.ctrl textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.ctrl select:focus, .ctrl textarea:focus, .ctrl input:focus { outline: none; border-color: var(--green); box-shadow: var(--ring); }
.ctrl .hint { margin-top: .4rem; font-size: .8rem; }
.seg { display: flex; flex-wrap: wrap; gap: .4rem; }
.seg button {
  padding: .48rem .9rem; border-radius: var(--pill); border: 1.5px solid var(--line-strong); background: var(--surface);
  font-family: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; color: var(--muted); transition: all .15s;
}
.seg button:hover { border-color: var(--green-200); color: var(--green-700); }
.seg button.active { border-color: var(--green); background: var(--green-50); color: var(--green-700); }
.colors { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.colors button {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line-strong); cursor: pointer; padding: 0;
  transition: transform .15s, border-color .15s;
}
.colors button.active, .colors button:hover { transform: scale(1.12); border-color: var(--green); }
.colors input[type=color] {
  width: 34px; height: 34px; border: 2px solid var(--line-strong); border-radius: 50%; padding: 0; cursor: pointer; background: none;
}
.check { display: flex; align-items: center; gap: .55rem; font-size: .92rem; color: var(--body); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--green); }

/* ---- file list (batch tools) ---- */
.flist { display: flex; flex-direction: column; gap: .45rem; margin-top: 1.2rem; max-height: 380px; overflow-y: auto; }
.fitem {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: .8rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .5rem .8rem; font-size: .86rem;
}
.fitem img, .fitem .ph { width: 44px; height: 44px; object-fit: cover; border-radius: 7px; background: var(--sand); display: block; }
.fitem .nm { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fitem .meta { display: block; font-size: .76rem; color: var(--muted); font-weight: 400; }
.fitem .st { font-size: .78rem; font-weight: 700; white-space: nowrap; color: var(--muted); }
.fitem.done .st { color: var(--green); }
.fitem.err .st { color: var(--danger); }
.fitem .acts { display: flex; gap: .25rem; }
.icon-btn {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface);
  display: grid; place-items: center; cursor: pointer; color: var(--muted); font-size: .9rem; line-height: 1;
}
.icon-btn:hover { border-color: var(--green-200); color: var(--green-700); }
.icon-btn:disabled { opacity: .35; cursor: default; }

/* ---- progress ---- */
.progress { height: 8px; background: var(--sand); border-radius: var(--pill); overflow: hidden; margin-top: 1rem; display: none; }
.progress.show { display: block; }
.progress i { display: block; height: 100%; width: 0; background: var(--green); transition: width .25s; border-radius: inherit; }
.busy { display: none; align-items: center; gap: .7rem; margin-top: 1rem; color: var(--green-700); font-weight: 600; font-size: .92rem; }
.busy.show { display: flex; }
.busy .spinner { width: 22px; height: 22px; border-width: 3px; margin: 0; }

/* ---- what next panel ---- */
.done-panel {
  display: none; margin-top: 1.4rem; border: 1px solid var(--green-200); background: linear-gradient(160deg, var(--green-50), var(--surface));
  border-radius: var(--r-lg); padding: 1.2rem 1.3rem;
}
.done-panel.show { display: block; animation: kitIn .35s ease; }
@keyframes kitIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.done-panel h3 { display: flex; align-items: center; gap: .55rem; font-size: 1.05rem; color: var(--green-800); }
.done-panel h3::before {
  content: '✓'; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: var(--on-accent);
  display: grid; place-items: center; font-size: .85rem;
}
.done-panel p { margin-top: .4rem; font-size: .9rem; color: var(--body); }
.next-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.next-links a {
  display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; font-size: .85rem; font-weight: 600;
  padding: .45rem .85rem; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink);
}
.next-links a svg { width: 16px; height: 16px; color: var(--green); }
.next-links a:hover { border-color: var(--green); color: var(--green-700); }

/* ---- data table (metadata) ---- */
.kv { width: 100%; border-collapse: collapse; font-size: .88rem; }
.kv th, .kv td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.kv th { width: 40%; color: var(--muted); font-weight: 600; }
.kv td { color: var(--ink); word-break: break-word; }
.kv tr.risk th, .kv tr.risk td { background: var(--clay-50); }
.kv tr.risk th { color: var(--warn-ink); }

/* ---- code output ---- */
.code-out {
  width: 100%; min-height: 140px; font: .8rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: .8rem; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface-2);
  color: var(--ink); resize: vertical; word-break: break-all;
}

/* ---- tool finder (home + all tools) ---- */
.finder { max-width: 640px; margin: 0 auto 1.4rem; position: relative; }
.finder input {
  width: 100%; padding: 1rem 1.2rem 1rem 3rem; border-radius: var(--pill); border: 1.5px solid var(--line-strong);
  font-family: inherit; font-size: 1.02rem; background: var(--surface-2); color: var(--ink); box-shadow: var(--sh);
}
.finder input:focus { outline: none; border-color: var(--green); box-shadow: var(--ring), var(--sh); }
.finder svg { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); }
.task-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; max-width: 820px; margin: 0 auto 2.4rem; }
.task-chips a {
  text-decoration: none; font-size: .86rem; font-weight: 500; color: var(--body); background: var(--surface);
  border: 1px solid var(--line-strong); padding: .45rem .9rem; border-radius: var(--pill); transition: all .15s;
}
.task-chips a:hover { border-color: var(--green); color: var(--green-700); background: var(--green-50); }
.cat-block { margin-top: 2.4rem; }
.cat-block:first-of-type { margin-top: 0; }
.cat-head { display: flex; align-items: baseline; gap: .8rem; margin-bottom: 1rem; flex-wrap: wrap; }
.cat-head h3 { font-family: var(--display); font-weight: 600; font-size: 1.45rem; color: var(--ink); }
.cat-head p { color: var(--muted); font-size: .92rem; }
.tools-grid.compact { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .9rem; }
.tools-grid.compact .tool-card { padding: 1.2rem 1.2rem 1.1rem; gap: .5rem; }
.tools-grid.compact .tool-card p { font-size: .87rem; }
.tools-grid.compact .tool-ic { width: 42px; height: 42px; border-radius: 12px; }
.tools-grid.compact .tool-ic svg { width: 22px; height: 22px; }
.tool-card .tag.new { color: var(--green-700); background: var(--green-50); }
.finder-empty { display: none; text-align: center; color: var(--muted); padding: 1.5rem 0; }
.sidebar .tool-links .all a { color: var(--green-700); font-weight: 600; }

/* ---- v2: finder + category tabs ---- */
.finder input { border: 1px solid var(--line-strong); padding: 1.05rem 1.3rem 1.05rem 3.1rem; font-size: 1.04rem; box-shadow: var(--sh-md); background: var(--surface); }
.finder kbd { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font: 600 .72rem var(--ui); color: var(--faint); border: 1px solid var(--line-strong); border-radius: 6px; padding: .15rem .45rem; background: var(--sand); }
@media (max-width: 600px) { .finder kbd { display: none; } }
.task-chips { margin-top: 1.1rem; }
.task-chips a { background: var(--surface); border-color: var(--line); color: var(--body); font-size: .84rem; }
.task-chips a:hover { border-color: var(--accent-200); color: var(--accent-700); background: var(--accent-50); }
.cat-tabs { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; margin: 0 auto 2rem; }
.cat-tabs button {
  font: inherit; font-size: .86rem; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--line);
  padding: .45rem .95rem; border-radius: var(--pill); cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; gap: .4rem;
}
.cat-tabs button i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--accent)); }
.cat-tabs button:hover { color: var(--ink); border-color: var(--line-strong); }
.cat-tabs button.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.cat-head { align-items: center; }
.cat-head .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.cat-head h3 { font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; }
.guide li { border-radius: var(--r); }
.guide li.on { border-color: var(--accent); }
.done-panel { border-color: var(--accent-200); background: linear-gradient(160deg, var(--accent-50), var(--surface)); }
.done-panel h3 { color: var(--ink); font-family: var(--display); }