/* DetZero tools — shared styles, extends /styles.css */
.crumbs { padding: 26px 0 0; font-size: 13.5px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.toolhead { padding: 10px 0 0; }
.toolhead h1 { color: var(--blue-900); font-size: 34px; margin: 0 0 8px; letter-spacing: -0.4px; }
.toolhead p.sub { font-size: 17px; color: var(--muted); margin: 0; max-width: 680px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-top: 18px; }
.stat { background: var(--blue-050); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.stat .v { font-size: 26px; font-weight: 800; color: var(--blue-900); line-height: 1.15; }
.stat .k { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.limits { margin-top: 16px; }
.limits .lim { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); margin-top: 7px; }
.limits .bar { flex: 1; height: 7px; background: #e8eff7; border-radius: 99px; overflow: hidden; }
.limits .bar i { display: block; height: 100%; background: var(--green); width: 0%; }
.limits .bar i.over { background: var(--red); }
.limits .lim b { color: var(--ink); min-width: 118px; font-weight: 600; }
.btnrow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
button.chip { background: #fff; border: 1px solid var(--line); color: var(--blue-700); padding: 9px 15px; font-size: 14.5px; }
button.chip:hover { border-color: var(--blue-500); }
button.chip.active { background: var(--blue-500); color: #fff; border-color: var(--blue-500); }
textarea.tin, .tout {
  width: 100%; min-height: 130px; border: 1px solid var(--line); border-radius: 10px;
  padding: 14px; font: inherit; font-size: 15.5px; color: var(--ink); background: #fdfefe; resize: vertical;
}
.tout { background: var(--blue-050); white-space: pre-wrap; word-break: break-word; }
select, input[type="number"], input[type="text"].tin {
  font: inherit; font-size: 15px; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 9px; color: var(--ink); background: #fff;
}
label.opt { font-size: 14.5px; color: var(--ink); display: inline-flex; gap: 7px; align-items: center; margin-right: 16px; }
.stylerow {
  display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 13px 15px; margin-top: 10px; cursor: pointer; text-align: left; width: 100%;
}
.stylerow:hover { border-color: var(--blue-500); }
.stylerow .nm { font-size: 12.5px; color: var(--muted); min-width: 108px; font-weight: 600; }
.stylerow .tx { font-size: 19px; color: var(--ink); word-break: break-word; flex: 1; }
.stylerow .cp { font-size: 12.5px; color: var(--blue-500); font-weight: 700; white-space: nowrap; }
.symgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; margin-top: 18px; }
.sym {
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 13px 4px;
  font-size: 24px; text-align: center; cursor: pointer; color: var(--ink); line-height: 1.3;
}
.sym:hover { border-color: var(--blue-500); background: var(--blue-050); }
.sym.wide { grid-column: span 2; font-size: 17px; }
#toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: var(--blue-900); color: #fff; padding: 11px 22px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 50;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 8px; }
.related a {
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px;
  font-weight: 600; font-size: 15px; color: var(--blue-700); display: block;
}
.related a:hover { border-color: var(--blue-500); text-decoration: none; }
.related a span { display: block; font-weight: 400; font-size: 13px; color: var(--muted); margin-top: 3px; }
.hubgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 10px; }
@media (max-width: 560px) { .toolhead h1 { font-size: 27px; } .stylerow .nm { min-width: 84px; } }