/* Ngepush Tools 1.0.0 - mewarisi font tema; warna netral agar aman di tema terang/gelap. */
.ngp-tool {
  --ngp-accent: #f26a1b;
  --ngp-pos: #0a7a3d;
  --ngp-neg: #b3261e;
  --ngp-line: rgba(128, 128, 128, .4);
  --ngp-soft: rgba(255, 106, 31, .09);
  box-sizing: border-box;
  max-width: 760px;
  margin: 1.5rem 0;
  padding: 1.25rem;
  border: 1px solid var(--ngp-line);
  border-radius: 10px;
  font-family: inherit;
  line-height: 1.5;
}
.ngp-tool *, .ngp-tool *::before, .ngp-tool *::after { box-sizing: border-box; }

.ngp-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem 1.25rem; }
.ngp-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.ngp-field label { font-weight: 600; font-size: .95rem; }
.ngp-field small { opacity: .75; font-size: .8rem; }

.ngp-box { display: flex; align-items: stretch; border: 1px solid var(--ngp-line); border-radius: 6px; background: transparent; }
.ngp-box:focus-within { border-color: var(--ngp-accent); box-shadow: 0 0 0 2px var(--ngp-soft); }
.ngp-aff { display: flex; align-items: center; padding: 0 .65rem; opacity: .7; font-size: .9rem; }
.ngp-tool input, .ngp-tool select {
  width: 100%; min-width: 0; margin: 0; padding: .55rem .65rem;
  font: inherit; color: inherit; background: transparent;
  border: 0; border-radius: 6px; outline: none;
}
.ngp-field > select { border: 1px solid var(--ngp-line); }
.ngp-field > select:focus { border-color: var(--ngp-accent); box-shadow: 0 0 0 2px var(--ngp-soft); }
.ngp-tool select option { color: #111; background: #fff; }
.ngp-tool input:focus-visible, .ngp-tool select:focus-visible, .ngp-reset:focus-visible { outline: 2px solid var(--ngp-accent); outline-offset: 2px; }

.ngp-reset {
  grid-column: 1 / -1; justify-self: start; padding: .4rem .9rem;
  font: inherit; font-size: .9rem; color: inherit; cursor: pointer;
  background: transparent; border: 1px solid var(--ngp-line); border-radius: 6px;
}
.ngp-reset:hover { border-color: var(--ngp-accent); }

.ngp-out { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--ngp-line); }
.ngp-empty, .ngp-note { margin: 0; opacity: .75; font-size: .9rem; }
.ngp-note { margin-top: .9rem; }
.ngp-err { margin: 0; padding: .7rem .9rem; border-left: 4px solid var(--ngp-neg); background: rgba(179, 38, 30, .08); }

.ngp-main { display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1rem; border-left: 4px solid var(--ngp-accent); background: var(--ngp-soft); }
.ngp-main.pos { border-left-color: var(--ngp-pos); }
.ngp-main.neg { border-left-color: var(--ngp-neg); }
.ngp-main-l { font-size: .9rem; opacity: .85; }
.ngp-main-v { font-size: clamp(1.6rem, 5vw, 2.1rem); line-height: 1.2; }
.ngp-main.pos .ngp-main-v, .ngp-rows .pos { color: var(--ngp-pos); }
.ngp-main.neg .ngp-main-v, .ngp-rows .neg { color: var(--ngp-neg); }

.ngp-rows { margin: 1rem 0 0; }
.ngp-rows > div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--ngp-line); }
.ngp-rows dt { margin: 0; }
.ngp-rows dd { margin: 0; font-weight: 600; text-align: right; }

@media (prefers-color-scheme: dark) {
  .ngp-tool { --ngp-accent: #ff9a5c; --ngp-pos: #5bd68f; --ngp-neg: #ff8a80; --ngp-soft: rgba(255, 154, 92, .12); }
  .ngp-err { background: rgba(255, 138, 128, .1); }
}
@media (max-width: 480px) { .ngp-tool { padding: 1rem; } .ngp-rows > div { flex-direction: column; gap: .1rem; } .ngp-rows dd { text-align: left; } }