/* Number Base Converter — dark/warm amber theme #f59e0b, matte-instrument surface, snap-feedback */
/* visual_identity: theme_posture=dark/warm, surface=matte-instrument, border=thick-rounded, motion=snap-feedback */

.nbc-page {
  --nbc-frame-width:   1020px;
  --nbc-amber:         #f59e0b;
  --nbc-amber-soft:    rgba(245, 158, 11, 0.12);
  --nbc-amber-mid:     rgba(245, 158, 11, 0.24);
  --nbc-amber-border:  rgba(245, 158, 11, 0.32);
  --nbc-page-bg:       #0d0b08;
  --nbc-surface:       rgba(30, 25, 16, 0.90);
  --nbc-surface-hover: rgba(42, 35, 20, 0.95);
  --nbc-ink:           #f0e8d8;
  --nbc-ink-soft:      #a0907a;
  --nbc-ink-muted:     #6a5c48;
  --nbc-border:        rgba(245, 158, 11, 0.16);
  --nbc-border-focus:  rgba(245, 158, 11, 0.52);
  --nbc-border-input:  rgba(120, 90, 40, 0.30);
  --nbc-shadow:        0 20px 50px rgba(0, 0, 0, 0.45);
  --nbc-bit-on:        #f59e0b;
  --nbc-bit-off:       rgba(60, 48, 28, 0.80);
  --nbc-t:             120ms ease;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(245,158,11,0.08), transparent 36%),
    radial-gradient(ellipse at 90% 100%, rgba(180,120,20,0.06), transparent 34%),
    linear-gradient(180deg, #0d0b08 0%, #100e0a 60%, #120f09 100%);
  color: var(--nbc-ink);
  min-height: 100vh;
  font-family: "Trebuchet MS", "Avenir Next", "Segoe UI", sans-serif;
}

/* ─── Header / footer dark adaptation ─── */
.nbc-page .site-header {
  background: rgba(13, 11, 8, 0.92);
  border-bottom-color: rgba(245,158,11,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nbc-page .site-brand { color: var(--nbc-ink); }
.nbc-page .site-footer {
  background: rgba(16, 13, 10, 0.90);
  border-top-color: rgba(245,158,11,0.10);
}
.nbc-page .footer-title,
.nbc-page .footer-copy { color: var(--nbc-ink-soft); }
.nbc-page .site-nav a { color: var(--nbc-ink-soft); }
.nbc-page .site-nav a:hover { color: var(--nbc-ink); }

/* ─── Page frame ─── */
.nbc-page .tool-frame {
  width: 100%;
  max-width: var(--nbc-frame-width);
  margin-inline: auto;
}
.nbc-page .tool-header-block {
  max-width: 40rem;
  margin-bottom: 0.6rem;
  padding-inline: 0.5rem;
}
.nbc-page .page-title {
  color: #f5e8cc;
  font-size: 2.05rem;
  line-height: 1;
  letter-spacing: -0.04em;
}
.nbc-page .page-subtitle {
  color: var(--nbc-ink-soft);
  font-size: 0.88rem;
  line-height: 1.32;
  margin-top: 6px;
}

/* ─── Tool shell wrapper ─── */
.nbc-page .tool-shell {
  padding: 0.8rem;
  border-radius: 1.45rem;
  border: 1px solid rgba(245,158,11,0.14);
  background:
    radial-gradient(circle at top right, rgba(245,158,11,0.06), transparent 28%),
    linear-gradient(180deg, rgba(22, 18, 10, 0.99), rgba(18, 14, 8, 0.99));
  box-shadow: 0 28px 56px rgba(0,0,0,0.50);
}

/* ─── Tool notes dark override ─── */
.nbc-page .tool-notes.card,
.nbc-page .card {
  background: rgba(22,18,12,0.85);
  border-color: var(--nbc-border);
  color: var(--nbc-ink);
}
.nbc-page .card-title { color: var(--nbc-ink); }
.nbc-page .card-text { color: var(--nbc-ink-soft); }
.nbc-page .card-eyebrow { color: var(--nbc-amber); }
.nbc-page .tool-discovery__title { color: var(--nbc-ink); }
.nbc-page .tool-discovery__list li,
.nbc-page .tool-discovery__faq dt,
.nbc-page .tool-discovery__faq dd { color: var(--nbc-ink-soft); }
.nbc-page .card-link { color: var(--nbc-amber); }

/* ─── Two-panel layout ─── */
.nbc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 0.74rem;
  align-items: start;
}

.nbc-controls-panel,
.nbc-visual-panel {
  display: grid;
  gap: 0.52rem;
  min-width: 0;
  padding: 0.6rem;
  border-radius: 1.1rem;
  border: 1px solid var(--nbc-border);
  box-shadow: var(--nbc-shadow);
}
.nbc-controls-panel {
  background:
    radial-gradient(circle at top left, rgba(245,158,11,0.10), transparent 30%),
    linear-gradient(180deg, rgba(26,20,10,0.99), rgba(20,16,8,0.99));
}
.nbc-visual-panel {
  background:
    radial-gradient(circle at top right, rgba(245,158,11,0.07), transparent 28%),
    linear-gradient(180deg, rgba(22,18,10,0.99), rgba(18,14,8,0.99));
}

/* ─── Panel headings ─── */
.nbc-panel-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.5rem;
}
.nbc-panel-heading--visual {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.nbc-panel-eyebrow {
  margin: 0 0 0.14rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nbc-amber);
}
.nbc-panel-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.12;
  color: var(--nbc-ink);
  font-weight: 700;
}
.nbc-panel-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: nowrap;
  align-self: start;
}
.nbc-panel-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.5rem;
  padding: 0.08rem 0.52rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  background: var(--nbc-amber-soft);
  border: 1px solid var(--nbc-amber-border);
  color: var(--nbc-amber);
}
.nbc-card-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--nbc-ink-muted);
  margin: 0;
}

/* ─── Language toggle ─── */
.nbc-lang-toggle {
  display: inline-flex;
  gap: 0.22rem;
  padding: 0.22rem;
  border-radius: 999px;
  background: rgba(30,24,14,0.90);
  border: 1px solid var(--nbc-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.nbc-lang-btn {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--nbc-ink-soft);
  padding: 0.36rem 0.72rem;
  font: inherit;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background var(--nbc-t), color var(--nbc-t), transform var(--nbc-t);
}
.nbc-lang-btn:hover,
.nbc-lang-btn:focus-visible {
  color: var(--nbc-ink);
  background: var(--nbc-amber-soft);
  outline: none;
  transform: translateY(-1px);
}
.nbc-lang-btn--active {
  background: linear-gradient(135deg, rgba(245,158,11,0.90), rgba(251,191,36,0.82));
  color: #0d0b08;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(245,158,11,0.28);
}

/* ─── Clear button ─── */
.nbc-clear-btn {
  min-height: 2.1rem;
  padding: 0 0.82rem;
  border-radius: 999px;
  border: 1px solid var(--nbc-border-input);
  background: rgba(30,24,14,0.80);
  color: var(--nbc-ink-soft);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--nbc-t), color var(--nbc-t), border-color var(--nbc-t), transform var(--nbc-t);
}
.nbc-clear-btn:hover,
.nbc-clear-btn:focus-visible {
  background: var(--nbc-amber-soft);
  color: var(--nbc-amber);
  border-color: var(--nbc-amber-border);
  outline: none;
  transform: translateY(-1px);
}

/* ─── Channels card ─── */
.nbc-channels-card {
  display: grid;
  gap: 0.52rem;
  padding: 0.7rem;
  border-radius: 0.9rem;
  background: var(--nbc-surface);
  border: 1px solid var(--nbc-border);
}
.nbc-channel {
  display: grid;
  gap: 0.28rem;
  padding: 0.6rem 0.7rem;
  border-radius: 0.75rem;
  border: 1.5px solid var(--nbc-border);
  background: rgba(20,16,8,0.60);
  transition: border-color var(--nbc-t);
}
.nbc-channel:focus-within {
  border-color: var(--nbc-amber-border);
  background: rgba(26,20,10,0.80);
}
.nbc-channel-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nbc-channel-label-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.nbc-channel-stamp {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nbc-amber);
  background: var(--nbc-amber-soft);
  border: 1px solid var(--nbc-amber-border);
  padding: 1px 7px;
  border-radius: 5px;
}
.nbc-channel-name {
  font-size: 0.7rem;
  color: var(--nbc-ink-muted);
  font-weight: 600;
}
.nbc-copy-btn {
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--nbc-border);
  background: transparent;
  color: var(--nbc-ink-muted);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--nbc-t), color var(--nbc-t), border-color var(--nbc-t);
}
.nbc-copy-btn:hover {
  background: var(--nbc-amber-soft);
  color: var(--nbc-amber);
  border-color: var(--nbc-amber-border);
}
.nbc-copy-btn.copied {
  color: #4ade80;
  border-color: rgba(74,222,128,0.30);
  background: rgba(74,222,128,0.07);
}
.nbc-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid var(--nbc-border-input);
  background: rgba(12,10,6,0.70);
  color: var(--nbc-ink);
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--nbc-t), box-shadow var(--nbc-t);
}
.nbc-input--mono {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.88rem;
}
.nbc-input--hex { text-transform: uppercase; }
.nbc-input:focus {
  border-color: var(--nbc-border-focus);
  box-shadow: 0 0 0 3px rgba(245,158,11,0.12);
}
.nbc-input.is-error {
  border-color: rgba(248,113,113,0.50);
  background: rgba(248,113,113,0.04);
}
.nbc-field-error {
  font-size: 0.68rem;
  color: #f87171;
  margin: 0;
}

/* ─── Preset chips ─── */
.nbc-preset-header { display: flex; align-items: center; }
.nbc-preset-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.nbc-preset-chip {
  padding: 0.28rem 0.72rem;
  border-radius: 8px;
  border: 1px solid var(--nbc-amber-border);
  background: var(--nbc-amber-soft);
  color: var(--nbc-amber);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  font-family: 'Courier New', Courier, monospace;
  cursor: pointer;
  transition: background var(--nbc-t), border-color var(--nbc-t), transform var(--nbc-t), box-shadow var(--nbc-t);
}
.nbc-preset-chip sub {
  font-size: 0.62rem;
  opacity: 0.75;
  margin-left: 2px;
}
.nbc-preset-chip:hover,
.nbc-preset-chip:focus-visible {
  background: var(--nbc-amber-mid);
  border-color: rgba(245,158,11,0.55);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(245,158,11,0.18);
  outline: none;
}

/* ─── Bit strip card ─── */
.nbc-strip-card {
  display: grid;
  gap: 0.52rem;
  padding: 0.7rem;
  border-radius: 0.9rem;
  background: var(--nbc-surface);
  border: 1px solid var(--nbc-border);
}
.nbc-strip-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.nbc-group-chips {
  display: flex;
  gap: 0.3rem;
}
.nbc-group-chip {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--nbc-border-input);
  background: transparent;
  color: var(--nbc-ink-soft);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--nbc-t), color var(--nbc-t), border-color var(--nbc-t), transform var(--nbc-t);
}
.nbc-group-chip:hover {
  background: var(--nbc-amber-soft);
  color: var(--nbc-amber);
  border-color: var(--nbc-amber-border);
}
.nbc-group-chip--active {
  background: var(--nbc-amber-soft);
  color: var(--nbc-amber);
  border-color: var(--nbc-amber-border);
}
.nbc-strip-shell {
  min-height: 52px;
  border-radius: 10px;
  background: rgba(10,8,4,0.70);
  border: 1px solid var(--nbc-border);
  padding: 10px;
  display: flex;
  align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.nbc-bit-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-height: 20px;
}
.nbc-bit {
  width: 14px;
  height: 20px;
  border-radius: 3px;
  border: 1px solid rgba(245,158,11,0.18);
  background: var(--nbc-bit-off);
  transition: background 80ms ease, border-color 80ms ease, box-shadow 80ms ease;
  flex-shrink: 0;
}
.nbc-bit.is-on {
  background: var(--nbc-bit-on);
  border-color: rgba(245,158,11,0.6);
  box-shadow: 0 0 6px rgba(245,158,11,0.35);
}
.nbc-bit-gap {
  width: 8px;
  flex-shrink: 0;
}
.nbc-strip-output {
  display: block;
  font-size: 0.72rem;
  font-family: 'Courier New', Courier, monospace;
  color: var(--nbc-ink-muted);
  text-align: center;
  min-height: 1.1em;
}

/* ─── Info card ─── */
.nbc-info-card {
  display: grid;
  gap: 0.5rem;
  padding: 0.7rem;
  border-radius: 0.9rem;
  background: var(--nbc-surface);
  border: 1px solid var(--nbc-border);
}
.nbc-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.nbc-pow2-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--nbc-amber-soft);
  border: 1px solid var(--nbc-amber-border);
  color: var(--nbc-amber);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 0 12px rgba(245,158,11,0.18);
}
.nbc-metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.44rem;
}
.nbc-metric-card {
  display: grid;
  gap: 3px;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  background: rgba(14,11,6,0.65);
  border: 1px solid var(--nbc-border);
}
.nbc-metric-card--wide {
  grid-column: 1 / -1;
}
.nbc-metric-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--nbc-ink-muted);
}
.nbc-metric-value {
  font-size: 1rem;
  font-weight: 800;
  color: var(--nbc-ink);
  line-height: 1;
}
.nbc-metric-value--mono {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.88rem;
  word-break: break-all;
}

/* ─── Nibble coloring in bit strip ─── */
.nbc-bit--nibble-odd {
  background: rgba(245, 158, 11, 0.70);
  border-color: rgba(245, 158, 11, 0.45);
}
.nbc-bit--nibble-odd.is-on {
  background: #fbbf24;
  border-color: rgba(251,191,36,0.65);
  box-shadow: 0 0 7px rgba(251,191,36,0.40);
}

/* ─── Byte breakdown card ─── */
.nbc-bytes-card {
  display: grid;
  gap: 0.5rem;
  padding: 0.7rem;
  border-radius: 0.9rem;
  background: var(--nbc-surface);
  border: 1px solid var(--nbc-border);
}
.nbc-bytes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.nbc-bytes-grid {
  display: grid;
  gap: 0.4rem;
}
.nbc-byte-row {
  display: grid;
  grid-template-columns: 3rem 1fr auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.6rem;
  border-radius: 7px;
  background: rgba(14,11,6,0.65);
  border: 1px solid var(--nbc-border);
}
.nbc-byte-pos {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nbc-ink-muted);
}
.nbc-byte-bits {
  display: flex;
  gap: 2px;
}
.nbc-byte-bit {
  width: 10px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid rgba(245,158,11,0.16);
  background: var(--nbc-bit-off);
  flex-shrink: 0;
}
.nbc-byte-bit.is-on {
  background: var(--nbc-bit-on);
  border-color: rgba(245,158,11,0.5);
  box-shadow: 0 0 4px rgba(245,158,11,0.28);
}
.nbc-byte-hex {
  font-size: 0.78rem;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  color: var(--nbc-amber);
  min-width: 2.6rem;
  text-align: right;
}
.nbc-byte-dec {
  font-size: 0.72rem;
  font-family: 'Courier New', Courier, monospace;
  color: var(--nbc-ink-soft);
  min-width: 2.4rem;
  text-align: right;
}

/* ─── Tool-discovery spacing ─── */
.nbc-page .tool-discovery {
  padding-inline: 0.5rem;
}

/* ─── Responsive ─── */
@media (max-width: 680px) {
  .nbc-layout { grid-template-columns: 1fr; }
  .nbc-page .tool-shell { padding: 0.54rem; }
}