/* Tools pages — page-specific styles */

/* ── Tools index hero ── */
.tools-hero {
  padding: 48px 0 32px;
}
.tools-hero-card {
  border: 1px solid var(--border);
  background: var(--bg2);
  border-radius: var(--r);
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.tools-hero-card::before {
  content: "";
  position: absolute; inset: -1px;
  background:
    radial-gradient(55% 70% at 18% 10%, rgba(0,255,148,.08), transparent 62%),
    radial-gradient(45% 55% at 85% 18%, rgba(0,180,255,.06), transparent 60%);
  pointer-events: none;
}
.tools-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 10px;
  position: relative;
}
.tools-hero-card h1 {
  font-family: var(--syne);
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 800;
  color: var(--fg);
  margin: 0 0 10px;
  position: relative;
}
.tools-hero-card .sub {
  color: var(--fg2);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
  position: relative;
}

/* ── Tool cards grid ── */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
}
@media(max-width:900px) { .tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:580px) { .tools-grid { grid-template-columns: 1fr; } }

.tool-card {
  border: 1px solid var(--border);
  background: var(--bg2);
  border-radius: var(--r);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 160px;
  text-decoration: none;
  transition: border-color .2s, background .2s;
}
.tool-card:hover {
  border-color: var(--border-hi);
  background: var(--bg3);
}
.tool-card .tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green);
}
.tool-card .title {
  font-family: var(--syne);
  font-size: 17px;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
}
.tool-card .desc {
  color: var(--fg2);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}
.tool-card .go {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--green);
}

/* ── Calculator tool layout ── */
.tool-main {
  padding: 40px 0 70px;
  display: grid;
  place-items: center;
}

.t-card {
  width: min(920px, 100%);
  border: 1px solid var(--border);
  background: var(--bg2);
  border-radius: var(--r);
  overflow: hidden;
}

.t-cover {
  height: 120px;
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(0,255,148,.12), transparent 60%),
    radial-gradient(120% 120% at 90% 100%, rgba(0,180,255,.08), transparent 60%),
    var(--bg3);
  display: flex;
  align-items: flex-end;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
}

.t-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-hi);
  background: rgba(0,255,148,.08);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
}
.t-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
}

.t-body {
  padding: 24px;
}
.t-body h1 {
  font-family: var(--syne);
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 800;
  color: var(--fg);
  margin: 0 0 8px;
}
.t-body .sub {
  color: var(--fg2);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 20px;
}

/* ── Two-column grid (input | output) ── */
.t-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media(max-width:760px) { .t-grid { grid-template-columns: 1fr; } }

/* ── Panels ── */
.t-panel {
  border: 1px solid var(--border);
  background: var(--bg3);
  border-radius: var(--r);
  padding: 18px;
}
.t-panel h2 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg3);
  margin: 0 0 16px;
}

/* ── Form ── */
.t-form { display: grid; gap: 14px; }
.t-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media(max-width:520px) { .t-row { grid-template-columns: 1fr; } }

.t-field label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg3);
  margin-bottom: 8px;
}
.t-field input,
.t-field select {
  width: 100%;
  padding: 11px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  transition: border-color .2s, box-shadow .2s;
  appearance: none;
  -webkit-appearance: none;
}
.t-field input:focus,
.t-field select:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-dim);
}
.t-field select {
  padding-right: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--fg3) 50%),
    linear-gradient(135deg, var(--fg3) 50%, transparent 50%);
  background-position:
    calc(100% - 17px) 50%,
    calc(100% - 11px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  background-color: var(--bg2);
  color-scheme: dark;
}
.t-field select option {
  background: var(--bg2);
  color: var(--fg);
}
.t-help {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg3);
  margin-top: 6px;
  line-height: 1.5;
}

/* ── Actions ── */
.t-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.t-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s;
}
.t-btn.primary {
  background: var(--green);
  border-color: var(--green);
  color: #070B10;
}
.t-btn.primary:hover { opacity: .85; }
.t-btn.ghost {
  background: var(--bg3);
  color: var(--fg2);
}
.t-btn.ghost:hover { color: var(--green); border-color: var(--border-hi); }

/* ── Error box ── */
.t-err {
  border: 1px solid rgba(255,80,80,.3);
  background: rgba(255,80,80,.08);
  color: #FF9999;
  padding: 12px 14px;
  border-radius: var(--r);
  margin-bottom: 14px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
}
.t-err ul { margin: 6px 0 0 18px; padding: 0; }

/* ── KPI tiles ── */
.t-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media(max-width:520px) { .t-kpi { grid-template-columns: 1fr; } }

.t-tile {
  border: 1px solid var(--border);
  background: var(--bg2);
  border-radius: var(--r);
  padding: 14px;
}
.t-tile .t-lbl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg3);
}
.t-tile .t-val {
  font-family: var(--syne);
  font-size: 26px;
  font-weight: 800;
  color: var(--green);
  margin-top: 6px;
}
.t-tile .t-meta {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--fg3);
  margin-top: 6px;
  line-height: 1.4;
}

/* ── Tables ── */
.t-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 16px 0;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg2);
}
.t-table th, .t-table td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.t-table th {
  background: var(--bg3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg3);
  font-weight: 600;
}
.t-table td {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--fg2);
}
.t-table tr:last-child td { border-bottom: none; }
.t-table tr:hover td { background: var(--bg3); transition: background .15s; }
.t-table td b { color: var(--fg); }

/* ── Note/hint ── */
.t-note {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg3);
  margin-top: 12px;
  line-height: 1.5;
}
.t-spacer { height: 14px; }

/* ── Empty state ── */
.t-empty {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--fg3);
  margin-top: 4px;
  line-height: 1.6;
}

@media(max-width:560px) {
  .t-body { padding: 18px 16px; }
  .tools-hero-card { padding: 22px 18px; }
}