/* ============================================================
   DollarWise PRO TOOL KIT — professional tool workspace UI
   Used by every tool on dollarwise.xyz/tools/*
   Brand: deep green #0b6e4f + gold #c9a227
   ============================================================ */

.tool-shell{
  --tp-bg:#ffffff;
  --tp-card:#f7f9f8;
  --tp-text:#1a1a1a;
  --tp-muted:#5b6470;
  --tp-border:#e2e8e5;
  --tp-accent:#0b6e4f;
  --tp-accent-dark:#074f39;
  --tp-accent-soft:#e9f4ee;
  --tp-gold:#c9a227;
  --tp-gold-soft:#faf3dd;
  --tp-danger:#b42318;
  --tp-radius:14px;
  --tp-shadow:0 6px 24px rgba(11,110,79,.10);
  background:var(--tp-bg);
  color:var(--tp-text);
  border:1px solid var(--tp-border);
  border-radius:var(--tp-radius);
  box-shadow:var(--tp-shadow);
  margin:1.8rem 0 2.2rem;
  overflow:hidden;
  font-size:16px;
  line-height:1.55;
}
.tool-shell[data-theme="dark"]{
  --tp-bg:#101614;
  --tp-card:#182019;
  --tp-text:#e8efea;
  --tp-muted:#9fb0a4;
  --tp-border:#2a352c;
  --tp-accent:#2ea37c;
  --tp-accent-dark:#7fd6ae;
  --tp-accent-soft:#16281e;
  --tp-gold:#d9b64a;
  --tp-gold-soft:#241f10;
  --tp-shadow:0 6px 24px rgba(0,0,0,.35);
}
.tool-shell *{box-sizing:border-box}

/* ---------- Hero ---------- */
.tool-hero{
  background:linear-gradient(135deg,#0b6e4f 0%,#085c42 60%,#074f39 100%);
  color:#fff;
  padding:1.8rem 1.8rem 1.5rem;
  display:flex; gap:1.1rem; align-items:flex-start;
  border-bottom:4px solid var(--tp-gold);
}
.tool-shell[data-theme="dark"] .tool-hero{background:linear-gradient(135deg,#123c2d,#0c2a1f)}
.tool-icon{
  flex:0 0 auto; width:56px; height:56px; border-radius:14px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
}
.tool-icon svg{width:30px; height:30px; fill:#fff}
.tool-hero h2{margin:0 0 .25rem; font-size:1.45rem; line-height:1.3; color:#fff; letter-spacing:-.01em}
.tool-hero p{margin:0; color:#d9e9e1; font-size:.95rem; max-width:640px}
.tool-hero-top{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; width:100%}
.theme-toggle{
  flex:0 0 auto; background:rgba(255,255,255,.14); color:#fff;
  border:1px solid rgba(255,255,255,.3); border-radius:20px;
  padding:.35rem .85rem; font-size:.8rem; font-weight:700; cursor:pointer;
}
.theme-toggle:hover{background:rgba(255,255,255,.25)}

/* ---------- Trust badges ---------- */
.tool-badges{
  display:flex; flex-wrap:wrap; gap:.5rem;
  padding:1rem 1.8rem; background:var(--tp-card);
  border-bottom:1px solid var(--tp-border);
}
.tool-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:700; color:var(--tp-accent-dark);
  background:var(--tp-accent-soft); border:1px solid var(--tp-border);
  border-radius:20px; padding:.3rem .8rem;
}
.tool-badge svg{width:14px; height:14px; fill:var(--tp-accent)}

/* ---------- Workspace body ---------- */
.tool-body{padding:1.6rem 1.8rem 1.8rem}
.tool-step{margin:0 0 1.5rem}
.tool-step:last-child{margin-bottom:0}
.tool-step-title{
  display:flex; align-items:center; gap:.6rem;
  font-size:.85rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:var(--tp-muted); margin:0 0 .8rem;
}
.tool-step-num{
  width:24px; height:24px; border-radius:50%;
  background:var(--tp-accent); color:#fff;
  font-size:.75rem; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ---------- Dropzone ---------- */
.dropzone{
  border:2px dashed var(--tp-border); border-radius:var(--tp-radius);
  background:var(--tp-card); padding:2.4rem 1.5rem; text-align:center;
  cursor:pointer; transition:border-color .15s, background .15s, transform .15s;
}
.dropzone:hover{border-color:var(--tp-accent)}
.dropzone.dragover{
  border-color:var(--tp-accent); background:var(--tp-accent-soft);
  transform:scale(1.01);
}
.dropzone svg{width:44px; height:44px; fill:var(--tp-accent); margin-bottom:.6rem}
.dropzone strong{display:block; font-size:1.05rem; margin-bottom:.25rem}
.dropzone span{color:var(--tp-muted); font-size:.88rem}
.dropzone input[type=file]{display:none}

/* ---------- File list ---------- */
.file-list{list-style:none; margin:.9rem 0 0; padding:0; display:flex; flex-direction:column; gap:.5rem}
.file-row{
  display:flex; align-items:center; gap:.8rem;
  background:var(--tp-bg); border:1px solid var(--tp-border);
  border-radius:10px; padding:.6rem .8rem; font-size:.9rem;
}
.file-row .file-ic{
  flex:0 0 auto; width:36px; height:36px; border-radius:8px;
  background:var(--tp-accent-soft); display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.7rem; color:var(--tp-accent-dark);
}
.file-row .file-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600}
.file-row .file-size{color:var(--tp-muted); font-size:.8rem; white-space:nowrap}
.file-row .file-status{
  font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  padding:.2rem .6rem; border-radius:12px; background:var(--tp-card);
  border:1px solid var(--tp-border); color:var(--tp-muted); white-space:nowrap;
}
.file-row .file-status.done{background:#e6f6ec; color:#157347; border-color:#bfe6cd}
.file-row .file-status.working{background:var(--tp-gold-soft); color:#8a6d1a; border-color:#ecdfb4}
.file-row .file-remove{
  background:none; border:0; color:var(--tp-muted); font-size:1.1rem;
  cursor:pointer; padding:.2rem .4rem; border-radius:6px; line-height:1;
}
.file-row .file-remove:hover{color:var(--tp-danger); background:var(--tp-card)}

/* ---------- Settings panel ---------- */
.settings-panel{
  background:var(--tp-card); border:1px solid var(--tp-border);
  border-radius:var(--tp-radius); padding:1.2rem 1.3rem;
}
.settings-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem 1.6rem;
}
.setting label{display:block; font-weight:700; font-size:.88rem; margin-bottom:.45rem}
.setting label .val{color:var(--tp-accent-dark); font-weight:800}
.setting input[type=range]{width:100%; accent-color:var(--tp-accent); height:28px}
.setting select,.setting input[type=text],.setting input[type=number]{
  width:100%; padding:.55rem .7rem; font-size:.95rem; font-family:inherit;
  border:1px solid var(--tp-border); border-radius:8px;
  background:var(--tp-bg); color:var(--tp-text);
}
.setting select:focus,.setting input:focus{outline:2px solid var(--tp-accent); outline-offset:1px}
.setting .hint{font-size:.78rem; color:var(--tp-muted); margin-top:.3rem}
.preset-row{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem}
.preset-chip{
  border:1px solid var(--tp-border); background:var(--tp-bg); color:var(--tp-text);
  border-radius:20px; padding:.4rem 1rem; font-size:.85rem; font-weight:700; cursor:pointer;
}
.preset-chip:hover{border-color:var(--tp-accent); color:var(--tp-accent-dark)}
.preset-chip.active{background:var(--tp-accent); border-color:var(--tp-accent); color:#fff}
.toggle-row{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.5rem 0}
.toggle-row .t-label{font-weight:600; font-size:.9rem}
.toggle{position:relative; width:46px; height:26px; flex:0 0 auto; cursor:pointer}
.toggle input{opacity:0; width:0; height:0}
.toggle .track{
  position:absolute; inset:0; background:var(--tp-border); border-radius:20px; transition:.2s;
}
.toggle .track::before{
  content:""; position:absolute; width:20px; height:20px; border-radius:50%;
  background:#fff; top:3px; left:3px; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.toggle input:checked + .track{background:var(--tp-accent)}
.toggle input:checked + .track::before{transform:translateX(20px)}

/* ---------- Actions ---------- */
.tool-actions{display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; margin-top:1.2rem}
.btn-pro{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--tp-accent); color:#fff !important; border:0;
  padding:.8rem 1.8rem; border-radius:10px; font-weight:800; font-size:1rem;
  cursor:pointer; transition:transform .12s, box-shadow .12s, background .12s;
}
.btn-pro:hover:not(:disabled){background:var(--tp-accent-dark); box-shadow:var(--tp-shadow); transform:translateY(-1px)}
.btn-pro:disabled{opacity:.45; cursor:not-allowed}
.btn-pro svg{width:18px; height:18px; fill:#fff}
.btn-pro-outline{
  display:inline-flex; align-items:center; gap:.5rem;
  background:transparent; color:var(--tp-accent-dark) !important;
  border:2px solid var(--tp-accent); padding:.7rem 1.4rem; border-radius:10px;
  font-weight:700; font-size:.95rem; cursor:pointer;
}
.btn-pro-outline:hover:not(:disabled){background:var(--tp-accent-soft)}
.btn-pro-outline:disabled{opacity:.45; cursor:not-allowed}

/* ---------- Progress ---------- */
.progress-wrap{margin-top:1rem; display:none}
.progress-wrap.show{display:block}
.progress-bar{
  height:10px; border-radius:6px; background:var(--tp-border); overflow:hidden;
}
.progress-bar i{
  display:block; height:100%; width:0; border-radius:6px;
  background:linear-gradient(90deg,var(--tp-accent),var(--tp-gold));
  transition:width .25s ease;
}
.progress-text{font-size:.85rem; color:var(--tp-muted); margin-top:.4rem}

/* ---------- Results ---------- */
.results{display:none; margin-top:1.2rem}
.results.show{display:block}
.result-head{font-weight:800; font-size:1rem; margin:0 0 .8rem; color:var(--tp-accent-dark)}
.result-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.9rem}
.result-card{
  background:var(--tp-bg); border:1px solid var(--tp-border);
  border-radius:10px; padding:1rem; display:flex; flex-direction:column; gap:.5rem;
}
.result-card .r-preview{
  width:100%; border-radius:8px; border:1px solid var(--tp-border);
  max-height:160px; object-fit:contain; background:var(--tp-card);
}
.result-card .r-name{font-weight:700; font-size:.88rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.result-card .r-stats{font-size:.8rem; color:var(--tp-muted)}
.result-card .r-stats b{color:#157347}
.result-card .btn-pro{padding:.55rem 1rem; font-size:.88rem; justify-content:center; text-decoration:none}
.result-summary{
  background:var(--tp-accent-soft); border:1px solid var(--tp-border);
  border-radius:10px; padding:.9rem 1.1rem; margin-bottom:1rem;
  font-size:.92rem; color:var(--tp-accent-dark); font-weight:600;
}

/* ---------- Output textarea / text tools ---------- */
.tool-output{
  width:100%; min-height:140px; padding:.8rem; font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.9rem; border:1px solid var(--tp-border); border-radius:10px;
  background:var(--tp-bg); color:var(--tp-text); resize:vertical;
}
.tool-input{
  width:100%; padding:.7rem .9rem; font-size:1rem; font-family:inherit;
  border:1px solid var(--tp-border); border-radius:10px;
  background:var(--tp-bg); color:var(--tp-text);
}
.tool-input:focus,.tool-output:focus{outline:2px solid var(--tp-accent); outline-offset:1px}

/* ---------- Toasts ---------- */
.tp-toast{
  position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%) translateY(20px);
  background:#1a1a1a; color:#fff; padding:.8rem 1.4rem; border-radius:10px;
  font-size:.9rem; font-weight:600; opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s; z-index:9999; max-width:90vw; text-align:center;
}
.tp-toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.tp-toast.err{background:#b42318}
.tp-toast.ok{background:#157347}

/* ---------- Free banner ---------- */
.free-banner{
  margin-top:1.6rem; background:linear-gradient(135deg,var(--tp-gold-soft),#fff);
  border:2px dashed var(--tp-gold); border-radius:var(--tp-radius);
  padding:1.1rem 1.4rem; text-align:center; font-size:.92rem;
}
.tool-shell[data-theme="dark"] .free-banner{background:linear-gradient(135deg,#241f10,#101614)}
.free-banner strong{color:var(--tp-accent-dark); font-size:1rem}
.free-banner p{margin:.3rem 0 0; color:var(--tp-muted)}

/* ---------- Responsive ---------- */
@media(max-width:640px){
  .tool-body{padding:1.1rem 1rem 1.3rem}
  .tool-hero{padding:1.3rem 1rem 1.1rem}
  .tool-hero h2{font-size:1.2rem}
  .tool-badges{padding:.8rem 1rem}
  .tool-actions .btn-pro{width:100%; justify-content:center}
  .settings-grid{grid-template-columns:1fr}
}