/* ============================================================
   TOOLS PLATFORM — tools.css
   Fully compatible with app.css CSS variables
   ============================================================ */

/* ── Variables (fallback if layout not loaded yet) ── */
:root {
  --primary:     #2563eb;
  --primary-dark:#1d4ed8;
  --secondary:   #7c3aed;
  --accent:      #f59e0b;
  --success:     #16a34a;
  --danger:      #dc2626;
  --warning:     #d97706;
  --radius:      0.5rem;
  --bg:          #f8fafc;
  --card:        #ffffff;
  --text:        #1e293b;
  --text-muted:  #64748b;
  --border:      #e2e8f0;
  --shadow-md:   0 4px 16px rgba(0,0,0,.08);
}

/* ── Hero ── */
.tools-hero {
  background: linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);
  color:#fff;padding:3.5rem 0 2.5rem;text-align:center;position:relative;overflow:hidden;
}
.tools-hero::before {
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}
.tools-hero h1 { font-size:2.4rem;font-weight:800;margin-bottom:.75rem;position:relative; }
.tools-hero p  { font-size:1.1rem;opacity:.9;max-width:640px;margin:0 auto;position:relative; }
.tools-hero .breadcrumb { margin-bottom:1rem;font-size:.85rem;opacity:.8;position:relative; }
.tools-hero .breadcrumb a { color:#fff;opacity:.8; }
.tools-hero .breadcrumb a:hover { opacity:1;text-decoration:none; }

/* ── Search ── */
.tools-search-wrap { position:relative;max-width:520px;margin:1.5rem auto 0; }
.tools-search-wrap input {
  width:100%;padding:.85rem 3.5rem .85rem 1.25rem;border-radius:2rem;border:none;
  font-size:1rem;box-shadow:0 4px 20px rgba(0,0,0,.15);outline:none;color:var(--text);
}
.tools-search-wrap button {
  position:absolute;right:.5rem;top:50%;transform:translateY(-50%);
  background:var(--primary);color:#fff;border:none;border-radius:50%;
  width:38px;height:38px;cursor:pointer;font-size:1rem;
  display:flex;align-items:center;justify-content:center;transition:background .2s;
}
.tools-search-wrap button:hover { background:var(--primary-dark); }

/* ── Category Nav ── */
.tools-category-nav {
  display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;
  padding:1.25rem 0;border-bottom:1px solid var(--border);margin-bottom:2rem;
  background:var(--card);position:sticky;top:60px;z-index:50;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.tools-category-nav a {
  padding:.4rem 1rem;border-radius:2rem;font-size:.85rem;font-weight:500;
  color:var(--text-muted);background:var(--bg);border:1.5px solid var(--border);
  text-decoration:none;transition:all .2s;
}
.tools-category-nav a:hover,.tools-category-nav a.active {
  background:var(--primary);color:#fff;border-color:var(--primary);text-decoration:none;
}

/* ── Tools Grid ── */
.tools-section { padding:2rem 0; }
.tools-section-title {
  font-size:1.5rem;font-weight:700;margin-bottom:.35rem;color:var(--text);
  display:flex;align-items:center;gap:.6rem;
}
.tools-section-title i { color:var(--primary); }
.tools-section-desc { color:var(--text-muted);font-size:.9rem;margin-bottom:1.5rem; }
.tools-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem;
}
.tool-card {
  background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);
  padding:1.4rem 1.2rem;text-decoration:none;transition:all .2s;
  display:flex;flex-direction:column;gap:.5rem;position:relative;overflow:hidden;
}
.tool-card::before {
  content:'';position:absolute;top:0;left:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--primary),var(--secondary));opacity:0;transition:opacity .2s;
}
.tool-card:hover { border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-2px);text-decoration:none; }
.tool-card:hover::before { opacity:1; }
.tool-card-icon {
  width:44px;height:44px;border-radius:.6rem;display:flex;align-items:center;
  justify-content:center;font-size:1.25rem;margin-bottom:.25rem;
}
.tool-card-name { font-size:.95rem;font-weight:600;color:var(--text);line-height:1.3; }
.tool-card-desc { font-size:.8rem;color:var(--text-muted);line-height:1.5;flex:1; }
.badge-new {
  position:absolute;top:.6rem;right:.6rem;background:var(--accent);color:#fff;
  font-size:.65rem;font-weight:700;padding:.15rem .5rem;border-radius:1rem;letter-spacing:.04em;
}

/* ── Tool Page Layout ── */
.tool-page { padding:2rem 0 3rem; }
.tool-page-inner { display:grid;grid-template-columns:1fr 300px;gap:2rem;align-items:start; }
.tool-main-panel {
  background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden;
}
.tool-panel-header {
  background:linear-gradient(90deg,var(--primary),var(--secondary));padding:1.25rem 1.5rem;color:#fff;
}
.tool-panel-header h2 { font-size:1.2rem;font-weight:700;margin:0; }
.tool-panel-body { padding:1.5rem; }
.tool-sidebar { display:flex;flex-direction:column;gap:1.25rem; }
.tool-sidebar-card {
  background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);padding:1.25rem;
}
.tool-sidebar-card h3 {
  font-size:.95rem;font-weight:700;margin-bottom:.75rem;color:var(--text);
  padding-bottom:.5rem;border-bottom:1px solid var(--border);
}

/* ── Calculator ── */
.calc-display {
  background:#0f172a;color:#f1f5f9;font-family:'Courier New',monospace;
  font-size:2rem;padding:1rem 1.25rem;border-radius:var(--radius);
  text-align:right;margin-bottom:1rem;min-height:70px;word-break:break-all;
  display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;gap:.2rem;
}
.calc-display .calc-expression { font-size:.85rem;opacity:.5; }
.calc-buttons { display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem; }
.calc-btn {
  padding:1rem;border:none;border-radius:var(--radius);font-size:1rem;font-weight:600;
  cursor:pointer;transition:all .15s;background:#e2e8f0;color:var(--text);
}
.calc-btn:hover { filter:brightness(.93);transform:scale(.98); }
.calc-btn:active { transform:scale(.95); }
.calc-btn-op   { background:var(--secondary);color:#fff; }
.calc-btn-eq   { background:var(--primary);color:#fff;grid-column:span 2; }
.calc-btn-clear{ background:var(--danger);color:#fff; }
.calc-btn-zero { grid-column:span 2; }
.calc-btn-fn   { background:#cbd5e1; }

/* ── Form Helpers ── */
.tool-input-group { display:flex;gap:.5rem;align-items:center; }
.tool-input-group .form-control { flex:1; }
.tool-result-box {
  background:linear-gradient(135deg,#eff6ff 0%,#f0f9ff 100%);
  border:1.5px solid var(--primary);border-radius:var(--radius);
  padding:1.25rem;margin-top:1.25rem;text-align:center;
}
.tool-result-box .result-value { font-size:2rem;font-weight:800;color:var(--primary);line-height:1; }
.tool-result-box .result-label { font-size:.85rem;color:var(--text-muted);margin-top:.35rem; }
.tool-result-grid {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin-top:1.25rem;
}
.tool-result-item {
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:.85rem;text-align:center;
}
.tool-result-item .val { font-size:1.4rem;font-weight:700;color:var(--primary); }
.tool-result-item .lbl { font-size:.75rem;color:var(--text-muted);margin-top:.2rem; }

/* ── Tabs ── */
.tool-tabs {
  display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:1.5rem;
  overflow-x:auto;scrollbar-width:thin;
}
.tool-tab {
  padding:.65rem 1.1rem;font-size:.88rem;font-weight:500;cursor:pointer;color:var(--text-muted);
  border:none;background:none;border-bottom:2px solid transparent;margin-bottom:-2px;
  white-space:nowrap;transition:all .2s;flex-shrink:0;
}
.tool-tab.active,.tool-tab:hover { color:var(--primary);border-bottom-color:var(--primary); }
.tool-tab-panel { display:none; }
.tool-tab-panel.active { display:block; }

/* ── QR Preview ── */
.qr-preview-wrap {
  display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1.5rem;
  background:#f8fafc;border-radius:var(--radius);border:2px dashed var(--border);
  min-height:200px;justify-content:center;
}
#qrCanvas { max-width:280px;border-radius:.5rem; }

/* ── Invoice ── */
.invoice-preview {
  background:#fff;border:1.5px solid var(--border);border-radius:var(--radius);
  padding:2.5rem;font-size:.9rem;color:#1e293b;
}
.invoice-header { display:flex;justify-content:space-between;margin-bottom:2rem;align-items:flex-start; }
.invoice-logo { font-size:1.8rem;font-weight:800;color:var(--primary); }
.invoice-table { width:100%;border-collapse:collapse;margin:1.25rem 0; }
.invoice-table th { background:var(--primary);color:#fff;padding:.6rem .85rem;text-align:left;font-size:.83rem; }
.invoice-table td { padding:.6rem .85rem;border-bottom:1px solid var(--border);font-size:.88rem; }
.invoice-totals { margin-left:auto;width:280px; }
.invoice-totals tr td { padding:.4rem .5rem; }
.invoice-totals .grand-total td { font-weight:700;font-size:1.05rem;border-top:2px solid var(--primary); }

/* ── Cheque ── */
.cheque-preview {
  background:#fff9eb;border:3px solid #c9a227;border-radius:.5rem;
  padding:1.5rem 2rem;font-family:'Courier New',monospace;min-height:180px;
  position:relative;max-width:680px;margin:0 auto;box-shadow:0 4px 20px rgba(0,0,0,.1);
}
.cheque-bank { font-size:1rem;font-weight:700;color:#1a1a1a; }
.cheque-row { display:flex;align-items:flex-end;gap:1rem;margin-bottom:.75rem; }
.cheque-label { font-size:.75rem;color:#666;margin-bottom:.2rem; }
.cheque-line {
  flex:1;border-bottom:1.5px solid #333;padding-bottom:.2rem;
  font-size:.95rem;color:#1a1a1a;font-weight:500;min-width:60px;
}
.cheque-amount-box {
  border:2px solid #333;padding:.3rem .75rem;min-width:160px;text-align:center;
  font-size:1rem;font-weight:700;color:#1a1a1a;border-radius:.25rem;
}
.cheque-micr { font-size:.7rem;letter-spacing:.15em;color:#555;margin-top:1rem;border-top:1px solid #ccc;padding-top:.5rem; }
.cheque-watermark {
  position:absolute;font-size:5rem;font-weight:900;color:rgba(201,162,39,.06);
  top:50%;left:50%;transform:translate(-50%,-50%) rotate(-30deg);
  pointer-events:none;white-space:nowrap;letter-spacing:.2em;
}

/* ── Speed Test ── */
.speedtest-gauge { width:240px;height:240px;position:relative;margin:0 auto; }
.speedtest-gauge svg { width:100%;height:100%; }
.speedtest-number {
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-size:2.8rem;font-weight:800;
  color:var(--text);line-height:1;
}
.speedtest-number small { font-size:.9rem;color:var(--text-muted);font-weight:400; }
.speedtest-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem;text-align:center; }
.speedtest-stat-val { font-size:1.5rem;font-weight:700;color:var(--primary); }
.speedtest-stat-lbl { font-size:.78rem;color:var(--text-muted);margin-top:.2rem; }

/* ── Website Down ── */
.down-result-ok  { background:#dcfce7;border:1.5px solid var(--success);border-radius:var(--radius);padding:1.25rem;text-align:center; }
.down-result-bad { background:#fee2e2;border:1.5px solid var(--danger); border-radius:var(--radius);padding:1.25rem;text-align:center; }
.down-location-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;margin-top:1rem; }
.down-location-item {
  border:1px solid var(--border);border-radius:var(--radius);padding:.75rem;
  text-align:center;font-size:.82rem;background:var(--card);
}
.status-ok  { color:var(--success);font-weight:600; }
.status-bad { color:var(--danger); font-weight:600; }

/* ── Code/Terminal outputs ── */
.whois-output {
  background:#0f172a;color:#a5f3fc;font-family:'Courier New',monospace;font-size:.83rem;
  padding:1.25rem;border-radius:var(--radius);white-space:pre-wrap;word-break:break-word;
  max-height:400px;overflow-y:auto;line-height:1.7;
}
.llms-output {
  background:#0f172a;color:#86efac;font-family:'Courier New',monospace;font-size:.83rem;
  padding:1.25rem;border-radius:var(--radius);white-space:pre-wrap;min-height:300px;line-height:1.7;
}
.dns-record-table { width:100%;border-collapse:collapse;font-size:.87rem; }
.dns-record-table th { background:var(--bg);padding:.5rem .75rem;text-align:left;font-weight:600;border-bottom:2px solid var(--border); }
.dns-record-table td { padding:.5rem .75rem;border-bottom:1px solid var(--border);font-family:monospace; }
.dns-record-table tr:hover td { background:var(--bg); }

/* ── Drop Zone ── */
.drop-zone {
  border:3px dashed var(--border);border-radius:var(--radius);padding:3rem 2rem;
  text-align:center;cursor:pointer;transition:all .2s;background:var(--bg);
}
.drop-zone:hover,.drop-zone.drag-over { border-color:var(--primary);background:#eff6ff; }
.drop-zone .drop-icon { font-size:2.5rem;color:var(--text-muted);margin-bottom:.75rem; }
.image-compare-wrap { display:flex;gap:1rem;margin-top:1rem; }
.image-compare-wrap > div { flex:1; }
.image-compare-wrap img { width:100%;border-radius:.375rem;border:1px solid var(--border); }
.image-compare-label { font-size:.75rem;color:var(--text-muted);text-align:center;margin-top:.35rem; }

/* ── SEO Score Ring ── */
.seo-score-ring { width:120px;height:120px;position:relative;margin:0 auto; }
.seo-score-ring svg { width:100%;height:100%;transform:rotate(-90deg); }
.seo-score-ring .score-text {
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:1.7rem;font-weight:800;color:var(--text);
}

/* ── Content Sections ── */
.tool-content-section {
  background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);
  padding:2.5rem;margin-top:2.5rem;
}
.tool-content-section h2 { font-size:1.4rem;font-weight:700;margin-bottom:1rem;color:var(--text); }
.tool-content-section h3 { font-size:1.1rem;font-weight:600;margin:1.5rem 0 .5rem;color:var(--text); }
.tool-content-section p  { line-height:1.8;color:var(--text-muted);margin-bottom:.85rem; }
.tool-content-section ul { padding-left:1.5rem;margin-bottom:.85rem; }
.tool-content-section ul li { line-height:1.8;color:var(--text-muted);margin-bottom:.3rem; }

/* ── FAQ ── */
.faq-list { margin-top:1rem; }
.faq-item { border:1.5px solid var(--border);border-radius:var(--radius);margin-bottom:.75rem;overflow:hidden; }
.faq-question {
  padding:1rem 1.25rem;font-weight:600;cursor:pointer;display:flex;
  justify-content:space-between;align-items:center;gap:.75rem;
  background:var(--card);color:var(--text);font-size:.95rem;transition:background .2s;
}
.faq-question:hover { background:var(--bg); }
.faq-question .faq-icon { color:var(--primary);font-size:.9rem;transition:transform .2s;flex-shrink:0; }
.faq-item.open .faq-icon { transform:rotate(180deg); }
.faq-answer {
  display:none;padding:0 1.25rem 1rem;font-size:.9rem;color:var(--text-muted);
  line-height:1.8;border-top:1px solid var(--border);background:var(--bg);
}
.faq-item.open .faq-answer { display:block; }

/* ── Related Tools ── */
.related-tools { display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.75rem; }
.related-tool-link {
  padding:.45rem 1rem;border:1.5px solid var(--border);border-radius:2rem;font-size:.83rem;
  color:var(--text-muted);text-decoration:none;transition:all .2s;background:var(--card);
}
.related-tool-link:hover { border-color:var(--primary);color:var(--primary);background:#eff6ff;text-decoration:none; }

/* ── Color helpers ── */
.color-pdf    { background:#fee2e2;color:#dc2626; }
.color-image  { background:#dbeafe;color:#2563eb; }
.color-calc   { background:#dcfce7;color:#16a34a; }
.color-utility{ background:#fef3c7;color:#d97706; }
.color-seo    { background:#ede9fe;color:#7c3aed; }
.color-domain { background:#e0f2fe;color:#0284c7; }
.color-qr     { background:#fce7f3;color:#db2777; }
.color-finance{ background:#d1fae5;color:#059669; }
.color-misc   { background:#f3f4f6;color:#374151; }

/* ── Responsive ── */
@media(max-width:900px) {
  .tool-page-inner { grid-template-columns:1fr; }
  .tool-sidebar { order:-1; }
  .tools-grid  { grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); }
}
@media(max-width:640px) {
  .tools-hero h1 { font-size:1.7rem; }
  .tools-grid   { grid-template-columns:1fr 1fr; }
  .calc-buttons { gap:.35rem; }
  .calc-btn     { padding:.75rem .5rem;font-size:.9rem; }
  .speedtest-stats { grid-template-columns:1fr; }
  .invoice-header { flex-direction:column;gap:1rem; }
  .tool-content-section { padding:1.5rem; }
  .image-compare-wrap { flex-direction:column; }
}
@media print {
  .site-header,.site-footer,.tool-sidebar,.tools-category-nav,.btn { display:none !important; }
  .tool-page-inner { grid-template-columns:1fr; }
}