/* ============================================================================
   MatrixInn — Free tools UI (works on top of app.css tokens)
   ========================================================================== */
.tool-wrap{display:grid;grid-template-columns:1fr;gap:22px;max-width:920px;margin-inline:auto}
.tool-panel{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3vw,36px);position:relative;overflow:hidden}
.tool-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--lime));opacity:.7}

/* Tool switcher */
.tool-switcher{display:flex;gap:8px;flex-wrap:wrap;max-width:920px;margin-inline:auto;margin-bottom:28px}
.tool-switcher a{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;padding:8px 16px;border-radius:999px;border:1px solid var(--line-2);color:var(--paper-dim);background:rgba(255,255,255,.03);transition:all .2s}
.tool-switcher a:hover{border-color:var(--lime);color:var(--lime);background:rgba(201,242,78,.06)}
.tool-switcher a.active{border-color:var(--lime);color:var(--ink);background:var(--lime)}
.tool-switcher a svg{flex-shrink:0}

/* Dropzone */
.dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1.5px dashed var(--line-2);border-radius:var(--r-lg);padding:clamp(34px,6vw,56px) 24px;
  text-align:center;transition:border-color .25s,background .25s;cursor:pointer;background:rgba(255,255,255,.015);
  min-height:220px}
.dropzone.drag{border-color:var(--lime);background:rgba(201,242,78,.06)}
.dropzone .dz-ic{width:60px;height:60px;border-radius:16px;display:grid;place-items:center;margin-bottom:16px;
  background:rgba(201,242,78,.08);border:1px solid var(--line);color:var(--lime);flex-shrink:0}
.dropzone h3{font-family:var(--serif);font-size:1.35rem;color:#fff;margin-bottom:8px}
.dropzone p{color:var(--muted);font-size:14.5px;max-width:34ch}
.dropzone .dz-btn{display:inline-block;margin-top:16px;font-family:var(--sans);font-weight:600;font-size:14.5px;
  color:var(--ink);background:var(--lime);padding:11px 24px;border-radius:999px;pointer-events:none}
.dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}

/* Controls */
.tool-controls{display:none;gap:20px;grid-template-columns:1fr 1fr;align-items:end}
.tool-controls.show{display:grid}
@media(max-width:640px){.tool-controls{grid-template-columns:1fr}}
.ctl{display:flex;flex-direction:column;gap:8px}
.ctl label{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-dim)}
.ctl .row{display:flex;gap:10px;align-items:center}
.ctl input[type=number],.ctl select{width:100%;padding:12px 14px;border:1px solid var(--line-2);border-radius:11px;background:var(--ink);color:var(--paper);font:inherit;font-size:15px}
.ctl input:focus,.ctl select:focus{outline:none;border-color:var(--lime)}
.ctl input[type=range]{width:100%;accent-color:var(--lime)}
.ctl .lockbtn{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--paper-dim);cursor:pointer;user-select:none}
.ctl .lockbtn input{accent-color:var(--lime)}
.rangeval{font-family:var(--mono);color:var(--lime);font-size:13px}
.span-2{grid-column:1/-1}

/* Result / preview */
.tool-result{display:none;margin-top:24px}
.tool-result.show{display:block}
.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.preview-grid{grid-template-columns:1fr}}
.preview-box{background:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:14px;text-align:center}
.preview-box .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.preview-box img{max-width:100%;max-height:280px;border-radius:8px;margin-inline:auto;
  background-image:linear-gradient(45deg,#1a2030 25%,transparent 25%),linear-gradient(-45deg,#1a2030 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1a2030 75%),linear-gradient(-45deg,transparent 75%,#1a2030 75%);
  background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}
.preview-box .sz{margin-top:10px;font-family:var(--mono);font-size:12.5px;color:var(--paper-dim)}
.preview-box .sz b{color:#fff}
.delta{display:inline-block;margin-top:6px;font-family:var(--mono);font-size:12px;padding:3px 10px;border-radius:999px;background:rgba(201,242,78,.1);color:var(--lime);border:1px solid var(--line)}
.delta.up{background:rgba(255,120,90,.1);color:#ff8a65}
.tool-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.tool-note{font-size:13px;color:var(--muted);margin-top:14px;display:flex;align-items:center;gap:8px}
.tool-note svg{color:var(--lime);flex-shrink:0}

/* Tools hub cards reuse .post-card from app.css */
.tool-badge{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);background:var(--lime);padding:4px 9px;border-radius:999px;z-index:3}
.tool-soon{opacity:.6;pointer-events:none}