/* Quick Tools Hub — shared panel design system.
   Every tool renders inside .qth; class names below are the exact hooks
   the PHP markup and JS already use, so only visuals change here. */

.qth{
  /* One colour per tool: only the hue changes (see the data-tool rules below). */
  --h:172; --l:31%; --ld:58%;
  --qc:hsl(var(--h) 72% var(--l)); --qc-deep:hsl(var(--h) 76% calc(var(--l) - 9%)); --qc-amber:hsl(calc(var(--h) + 38) 78% 40%);
  --qc-bg:hsl(var(--h) 38% 97%); --qc-surface:#ffffff; --qc-border:hsl(var(--h) 24% 87%); --qc-border-strong:hsl(var(--h) 22% 79%);
  --qc-text:hsl(var(--h) 34% 10%); --qc-muted:hsl(var(--h) 14% 36%);
  --qc-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --qc-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  position:relative;
  max-width:720px; margin:1.75em 0; padding:1.6rem 1.5rem 1.4rem;
  background:var(--qc-bg); color:var(--qc-text);
  border:1px solid var(--qc-border); border-radius:16px; overflow:hidden;
  font-family:var(--qc-font); line-height:1.5; box-sizing:border-box;
  box-shadow:0 1px 2px hsl(var(--h) 40% 12% / .06),0 12px 28px -16px hsl(var(--h) 50% 18% / .28);
}
.qth::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--qc),var(--qc-amber));}
.qth *{box-sizing:border-box}
.qth [hidden]{display:none!important}


/* ---- a colour for each tool ---- */
.qth[data-tool=words]{--h:172; --l:28%;}
.qth[data-tool=age]{--h:335;}
.qth[data-tool=emi]{--h:215; --ld:72%;}
.qth[data-tool=percent]{--h:28;}
.qth[data-tool=image]{--h:270; --ld:72%;}
.qth[data-tool=qr]{--h:195; --l:28%;}
.qth[data-tool=password]{--h:355;}
.qth[data-tool=pdf]{--h:150; --l:28%;}
.qth[data-tool=pdfc]{--h:235; --ld:72%;}
.qth[data-tool=casec]{--h:310;}
.qth[data-tool=lorem]{--h:85; --l:27%;}
.qth[data-tool=tts]{--h:45; --l:27%;}
.qth[data-tool=unit]{--h:285; --ld:72%;}
.qth[data-tool=currency]{--h:128; --l:28%;}
.qth[data-tool=vtrim]{--h:8;}
.qth[data-tool=vcomp]{--h:205; --ld:72%;}
.qth[data-tool=vaudio]{--h:322;}
.qth[data-tool=vgif]{--h:60; --l:27%;}
.qth[data-tool=ocr]{--h:160; --l:28%;}
.qth[data-tool=typing]{--h:242; --ld:72%;}
.qth[data-tool=pnr]{--h:15;}

/* ---- tool header: same on every tool ---- */
.qth-head{display:flex;align-items:center;gap:.9rem;margin:0 0 1.2rem;padding:.2rem 0 1.1rem;border-bottom:1px solid var(--qc-border)}
.qth-ico{flex:0 0 auto;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--qc),var(--qc-deep));box-shadow:0 6px 14px -6px var(--qc)}
.qth .qth-title{margin:0;padding:0;font-family:var(--qc-font);font-size:1.2rem;font-weight:750;line-height:1.25;letter-spacing:-.01em;color:var(--qc-text)}
.qth .qth-tag{margin:.15rem 0 0;font-size:.9rem;line-height:1.4;color:var(--qc-muted)}

/* ---- text ---- */
.qth label{display:block;margin:0 0 1rem;font-weight:600;font-size:.95rem;color:var(--qc-text)}
.qth-hint{font-weight:400;font-size:.8rem;color:var(--qc-muted);display:block;margin-top:.2rem}
.qth-note{font-size:.85rem;color:var(--qc-muted);line-height:1.55;margin:1.1rem 0 0;
  padding-left:.7rem;border-left:2px solid var(--qc-border-strong)}

/* ---- fields ---- */
.qth input,.qth textarea,.qth select{
  width:100%;margin-top:.35rem;padding:.65rem .75rem;
  border:1px solid var(--qc-border);border-radius:8px;
  font:inherit;font-family:var(--qc-font);background:var(--qc-surface);color:var(--qc-text);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.qth select[multiple]{height:auto}
.qth input:hover,.qth textarea:hover,.qth select:hover{border-color:var(--qc-border-strong)}
.qth input:focus,.qth textarea:focus,.qth select:focus{
  outline:none;border-color:var(--qc);box-shadow:0 0 0 3px color-mix(in srgb, var(--qc) 20%, transparent);
}
.qth-btn:focus-visible{outline:2px solid var(--qc);outline-offset:2px}
.qth textarea{resize:vertical;line-height:1.6}

/* range sliders */
.qth input[type=range]{padding:0;border:0;height:1.4rem;background:transparent;accent-color:var(--qc)}
/* checkboxes / radios */
.qth input[type=checkbox],.qth input[type=radio]{width:auto;accent-color:var(--qc)}

/* native file picker, styled as a tool control */
.qth input[type=file]{padding:.5rem;border-style:dashed;border-color:var(--qc-border-strong);
  background:color-mix(in srgb, var(--qc) 4%, var(--qc-surface));cursor:pointer}
.qth input[type=file]::file-selector-button{
  margin-right:.75rem;padding:.5rem .9rem;border:0;border-radius:6px;
  background:var(--qc);color:#fff;font:inherit;font-weight:600;cursor:pointer;
}
.qth input[type=file]::file-selector-button:hover{background:var(--qc-deep)}

/* ---- buttons ---- */
.qth-btn{
  display:inline-block;padding:.68rem 1.25rem;border:0;border-radius:8px;
  background:var(--qc);color:#fff;font:inherit;font-weight:600;cursor:pointer;
  text-decoration:none;text-align:center;transition:background .15s ease,transform .05s ease;
}
.qth-btn:hover{background:var(--qc-deep);color:#fff}
.qth-btn:active{transform:translateY(1px)}
/* secondary / ghost actions: copy, download, stop */
.qth-btn.qth-copy,.qth-btn.qth-dl,.qth-btn.qth-stop{
  background:transparent;color:var(--qc-deep);border:1px solid var(--qc-border-strong);
}
.qth-btn.qth-copy:hover,.qth-btn.qth-dl:hover,.qth-btn.qth-stop:hover{
  background:color-mix(in srgb, var(--qc) 10%, transparent);color:var(--qc-deep);
}
.qth-btns{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.9rem}
/* a row of several equal-weight format options (case converter) reads
   better as outline chips than a wall of solid buttons */
.qth-btns .qth-btn[data-m]{
  padding:.5rem 1rem;font-size:.92rem;font-weight:600;
  background:transparent;color:var(--qc-deep);border:1px solid var(--qc-border-strong);
}
.qth-btns .qth-btn[data-m]:hover{
  background:color-mix(in srgb, var(--qc) 10%, transparent);border-color:var(--qc);
}

/* ---- readout: where a tool's answer / live status appears ---- */
.qth-result{
  margin-top:1.1rem;padding:.2rem 0;font-size:1.02rem;line-height:1.7;
  font-family:var(--qc-mono);color:var(--qc-text);
}
.qth-result:not(:empty){
  padding:.8rem .9rem;background:var(--qc-surface);
  border:1px solid var(--qc-border);border-radius:8px;
}
.qth-result b{color:var(--qc-deep);font-weight:700}
.qth-result small{color:var(--qc-muted);font-family:var(--qc-font)}

/* ---- stat tiles (word counter) ---- */
.qth-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.65rem;margin-top:1.1rem}
.qth-stats div{padding:.8rem .6rem;background:var(--qc-surface);
  border:1px solid var(--qc-border);border-radius:8px;text-align:center}
.qth-stats b{display:block;font-size:1.7rem;font-family:var(--qc-mono);color:var(--qc-deep);line-height:1.2}
.qth-stats span{font-size:.82rem;color:var(--qc-muted)}

/* ---- inline rows (percentage, EMI breakdown, converters) ---- */
.qth-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.8rem}
.qth-row input{width:110px;margin:0}
.qth-row select{width:auto;flex:1 1 140px;margin:0}
.qth-row span{color:var(--qc-muted);font-size:.9rem}
.qth-row b{color:var(--qc-deep);font-family:var(--qc-mono);font-size:1.1rem}

/* ---- password field ---- */
.qth-pw{display:flex;gap:.5rem;margin-bottom:1rem}
.qth-pw input{margin:0;font-family:var(--qc-mono);letter-spacing:.02em}

/* ---- checkbox groups ---- */
.qth-checks{display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;margin-bottom:1rem}
.qth-checks label{margin:0;font-weight:400;display:flex;align-items:center;gap:.4rem}
.qth-checks input{width:auto;margin:0}
.qth-inline{display:flex;align-items:center;gap:.5rem;font-weight:400;margin-bottom:1rem}
.qth-inline input{width:auto;margin:0}

/* ---- media / downloads ---- */
.qth-prev,.qth-canvas{max-width:100%;height:auto;margin-top:1rem;border-radius:8px;
  border:1px solid var(--qc-border)}
.qth-dl{margin-top:1rem}

/* ---- option cards (radio choices) ---- */
.qth fieldset.qth-opts{margin:0 0 1.1rem;padding:0;border:0;min-width:0}
.qth .qth-opts legend{padding:0;margin:0 0 .5rem;font-weight:600;font-size:.95rem}
.qth label.qth-opt{display:flex;align-items:flex-start;gap:.7rem;margin:0 0 .5rem;padding:.7rem .85rem;font-weight:400;cursor:pointer;
  background:var(--qc-surface);border:1px solid var(--qc-border);border-radius:10px;transition:border-color .15s,box-shadow .15s}
.qth label.qth-opt:hover{border-color:var(--qc-border-strong)}
.qth label.qth-opt:has(input:checked){border-color:var(--qc);box-shadow:0 0 0 3px color-mix(in srgb, var(--qc) 16%, transparent)}
.qth .qth-opt input{margin:.25rem 0 0;flex:0 0 auto}
.qth .qth-opt b{display:block;font-weight:650}
.qth .qth-opt small{display:block;margin-top:.1rem;font-size:.84rem;color:var(--qc-muted);line-height:1.45}
.qth .qth-pwrow input{margin-top:.35rem}
.qth .qth-detail{margin:.5rem 0 0;font-size:.88rem;color:var(--qc-muted)}
.qth .qth-detail:empty{display:none}

/* ---- image to PDF: options + page preview ---- */
.qth-optgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 .8rem}
.qth-pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.75rem;margin:.4rem 0 .6rem;align-items:start}
.qth-page{position:relative;padding:.5rem;background:var(--qc-surface);border:1px solid var(--qc-border);border-radius:12px;cursor:grab;transition:border-color .15s,box-shadow .15s,opacity .15s}
.qth-page:hover{border-color:var(--qc);box-shadow:0 6px 16px -10px var(--qc)}
.qth-page.qth-drag{opacity:.45}
.qth .qth-thumb{display:block;width:100%;height:auto;margin:0;border:1px solid var(--qc-border);border-radius:6px;background:#fff;box-shadow:0 2px 6px -2px rgba(0,0,0,.25)}
.qth-badge{position:absolute;top:.2rem;left:.2rem;z-index:1;min-width:1.5rem;height:1.5rem;padding:0 .35rem;display:grid;place-items:center;border-radius:999px;background:var(--qc);color:#fff;font-size:.75rem;font-weight:700}
.qth-pname{margin:.4rem 0 .3rem;font-size:.75rem;color:var(--qc-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qth-pbar{display:flex;gap:.25rem}
.qth .qth-mini{flex:1;min-width:0;padding:.3rem 0;border:1px solid var(--qc-border-strong);border-radius:6px;background:transparent;color:var(--qc-deep);font:inherit;font-size:.9rem;line-height:1;cursor:pointer}
.qth .qth-mini:hover:not(:disabled){background:color-mix(in srgb, var(--qc) 12%, transparent);border-color:var(--qc)}
.qth .qth-mini:disabled{opacity:.35;cursor:default}
.qth .qth-mini:focus-visible{outline:2px solid var(--qc);outline-offset:1px}

/* ---- dark mode ---- */
@media (prefers-color-scheme:dark){
  .qth{
    --qc:hsl(var(--h) 62% var(--ld)); --qc-deep:hsl(var(--h) 68% 76%); --qc-amber:hsl(calc(var(--h) + 38) 80% 62%);
    --qc-bg:hsl(var(--h) 30% 9%); --qc-surface:hsl(var(--h) 26% 12.5%); --qc-border:hsl(var(--h) 24% 21%); --qc-border-strong:hsl(var(--h) 22% 29%);
    --qc-text:hsl(var(--h) 25% 93%); --qc-muted:hsl(var(--h) 12% 68%);
  }
  .qth .qth-btn{color:hsl(var(--h) 60% 8%)}
  .qth .qth-btn.qth-copy,.qth .qth-btn.qth-dl,.qth .qth-btn.qth-stop{color:var(--qc-deep)}
  .qth input[type=file]::file-selector-button{color:hsl(var(--h) 60% 8%)}
  .qth{box-shadow:0 12px 28px -16px rgba(0,0,0,.6)}
  .qth-ico,.qth-badge{color:hsl(var(--h) 60% 8%)}
}

/* ---- PNR status result ---- */
.qth-pnr-form{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end}
.qth-pnr-form label{flex:1 1 220px;margin:0}
.qth-pnr-form .qth-btn{flex:0 0 auto}
.qth-pnr-out{margin-top:1.1rem}
.qth-pnr-out:empty{display:none}
.qth-pnr-head{padding:.9rem 1rem;margin-bottom:.8rem;background:var(--qc-surface);border:1px solid var(--qc-border);border-radius:8px}
.qth-pnr-title{font-weight:700;font-size:1.05rem}
.qth-pnr-route{margin-top:.15rem;font-size:.95rem;color:var(--qc-muted)}
.qth-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.65rem}
.qth-chip{padding:.2rem .65rem;font-size:.82rem;border:1px solid var(--qc-border-strong);border-radius:999px;background:var(--qc-bg)}
.qth-tablewrap{overflow-x:auto;background:var(--qc-surface);border:1px solid var(--qc-border);border-radius:8px}
.qth .qth-table{width:100%;margin:0;border-collapse:collapse;font-size:.92rem}
.qth .qth-table th,.qth .qth-table td{padding:.6rem .8rem;text-align:left;white-space:nowrap;border:0;border-bottom:1px solid var(--qc-border)}
.qth .qth-table th{font-size:.82rem;font-weight:700;color:var(--qc-muted)}
.qth .qth-table tr:last-child td{border-bottom:0}
.qth .qth-table td.qth-st{font-family:var(--qc-mono);font-weight:600}
/* phones: one small card per passenger instead of a wide table */
@media (max-width:480px){
  .qth .qth-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .qth .qth-table,.qth .qth-table tbody,.qth .qth-table tr{display:block;width:100%}
  .qth .qth-table tr{padding:.4rem 0;border-bottom:1px solid var(--qc-border-strong)}
  .qth .qth-table tr:last-child{border-bottom:0}
  .qth .qth-table td{display:flex;justify-content:space-between;gap:1rem;padding:.3rem .85rem;border:0;white-space:normal}
  .qth .qth-table td::before{content:attr(data-label);font-family:var(--qc-font);font-weight:400;color:var(--qc-muted)}
  .qth .qth-table td:first-child{font-weight:700}
  .qth .qth-table td:first-child::before{content:none}
}

/* phones: roomier tap targets, full-width main actions */
@media (max-width:480px){
  .qth{padding:1.3rem 1.05rem 1.15rem;border-radius:14px}
  .qth-ico{width:40px;height:40px;border-radius:11px}
  .qth .qth-title{font-size:1.1rem}
  .qth-btn.qth-make,.qth-btn.qth-dl{display:block;width:100%}
}
.qth-btns .qth-dl{margin-top:0}