/* ====== Tool Page Styles (append to site.css) ====== */
.twrap{position:relative;z-index:1;max-width:880px;margin:0 auto;padding:32px 24px 80px}

/* Tool widget at top of page */
.twidget{background:var(--card);border:1.5px solid var(--b2);border-radius:14px;padding:28px;margin-bottom:36px;box-shadow:0 8px 30px rgba(0,0,0,0.18)}
.twidget h1{font-size:clamp(22px,4vw,32px);font-weight:900;color:var(--white);margin-bottom:6px;line-height:1.3}
.twidget .tdesc{font-size:13.5px;color:var(--muted);margin-bottom:22px}
.twidget .ttabs{display:flex;gap:7px;margin-bottom:18px;flex-wrap:wrap}
.twidget .ttab{padding:6px 14px;border-radius:7px;border:1.5px solid var(--b);background:transparent;color:var(--muted2);font-size:12.5px;font-weight:700;cursor:pointer;transition:all .18s;font-family:'Cairo',sans-serif}
.twidget .ttab.on{background:var(--blue);border-color:var(--blue);color:#fff}
.twidget .tfg{margin-bottom:14px}
.twidget .tfg label{display:block;font-size:12.5px;font-weight:700;color:var(--muted2);margin-bottom:6px}
.twidget .tfg input,.twidget .tfg select,.twidget .tfg textarea{width:100%;padding:11px 14px;background:rgba(255,255,255,0.04);border:1.5px solid rgba(255,255,255,0.08);border-radius:9px;color:var(--white);font-size:14px;font-family:'Cairo',sans-serif;outline:none;transition:border .2s;resize:vertical}
.twidget .tfg input:focus,.twidget .tfg select:focus,.twidget .tfg textarea:focus{border-color:var(--blue2)}
.twidget .tfg textarea{min-height:90px}
.twidget .tfg select option{background:var(--card)}
.tr2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.tr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px}
.tbtn{display:inline-block;width:100%;padding:13px;background:linear-gradient(135deg,var(--blue),var(--blue2));border:none;border-radius:9px;color:#fff;font-size:14.5px;font-weight:800;cursor:pointer;font-family:'Cairo',sans-serif;transition:opacity .18s;margin-top:6px}
.tbtn:hover{opacity:.87}
.tbtng{background:linear-gradient(135deg,var(--green),#059669)!important}
.tbtno{background:linear-gradient(135deg,var(--orange),#D97706)!important}
.tbtnp{background:linear-gradient(135deg,var(--purple),#7C3AED)!important}
.tres{background:rgba(6,182,212,0.07);border:1.5px solid rgba(6,182,212,0.2);border-radius:11px;padding:20px;margin-top:16px;display:none;text-align:center}
.tres.show{display:block}
.trv{font-size:30px;font-weight:900;color:var(--cyan)}
.trl{font-size:11.5px;color:var(--muted2);margin-bottom:7px}
.trs{font-size:13px;color:var(--muted2);margin-top:6px;line-height:1.7}
.trg{display:grid;gap:9px;margin-top:14px}
.trg2{grid-template-columns:1fr 1fr}
.trg3{grid-template-columns:1fr 1fr 1fr}
.tri{background:rgba(255,255,255,0.04);border:1px solid var(--b);border-radius:9px;padding:13px;text-align:center}
.tri-l{font-size:10.5px;color:var(--muted);margin-bottom:5px}
.tri-v{font-size:17px;font-weight:900;color:var(--white)}

/* Related tools links */
.related{background:var(--card);border:1px solid var(--b);border-radius:12px;padding:20px;margin-top:24px}
.related h3{font-size:15px;font-weight:800;color:var(--white);margin-bottom:14px}
.relgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.relgrid a{display:block;padding:11px 14px;background:rgba(37,99,235,0.07);border:1px solid var(--b);border-radius:9px;text-decoration:none;color:var(--text);font-size:13px;font-weight:700;transition:all .18s}
.relgrid a:hover{background:rgba(37,99,235,0.15);border-color:var(--blue2);color:var(--blue3)}

/* Scientific calc on tool page */
.tcalcdsp{padding:18px;background:rgba(0,0,0,0.3);border-radius:10px;font-size:28px;font-weight:900;color:var(--white);text-align:left;direction:ltr;font-family:monospace;min-height:60px;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tcalcgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:14px}
.tcalcgrid button{padding:14px 0;border-radius:8px;border:1.5px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.04);color:var(--white);font-size:16px;font-weight:700;cursor:pointer;font-family:'Cairo',sans-serif}
.tcalcgrid button:hover{background:rgba(255,255,255,0.09)}
.tcalcgrid button.op{background:rgba(37,99,235,0.2);color:var(--blue3)}
.tcalcgrid button.eq{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;grid-column:span 2}
.tcalcgrid button.ac{background:rgba(239,68,68,0.2);color:var(--red)}