/* ═══════════════════════════════════════════════════════════════════
   binary-tool.css  -  Binary Converter
   Scoped under  #bnt-root  - zero bleed to other tools
   Theme: Clean Light  ×  Blue Accent
   ⚠  Every selector prefixed - nothing affects other tools
═══════════════════════════════════════════════════════════════════ */

/* ── Google Fonts loaded in view ───────────────────────────────── */

/* ── Design Tokens ─────────────────────────────────────────────── */
#bnt-root {
  /* Backgrounds */
  --bnt-bg:          #f0f4f8;
  --bnt-surface:     #ffffff;
  --bnt-surface2:    #f7f9fc;
  --bnt-surface3:    #eef2f7;

  /* Borders */
  --bnt-border:      #dde3ec;
  --bnt-border2:     #c8d2e0;

  /* Blue accent */
  --bnt-accent:      #2563eb;
  --bnt-accent2:     #3b82f6;
  --bnt-accent3:     #60a5fa;
  --bnt-accent-bg:   #eff6ff;
  --bnt-accent-dim:  rgba(37, 99, 235, 0.10);
  --bnt-accent-ring: rgba(37, 99, 235, 0.25);

  /* Semantic */
  --bnt-ok:          #16a34a;
  --bnt-ok-bg:       #f0fdf4;
  --bnt-ok-border:   #bbf7d0;
  --bnt-err:         #dc2626;
  --bnt-err-bg:      #fef2f2;
  --bnt-err-border:  #fecaca;

  /* Text */
  --bnt-text:        #0f172a;
  --bnt-text2:       #475569;
  --bnt-text3:       #94a3b8;
  --bnt-mono-text:   #1e3a5f;

  /* Typography */
  --bnt-sans:  'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
  --bnt-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Shape */
  --bnt-radius:    12px;
  --bnt-radius-sm:  8px;
  --bnt-radius-xs:  5px;

  /* Shadows */
  --bnt-shadow:    0 1px 3px rgba(15,23,42,.07), 0 4px 20px rgba(15,23,42,.06);
  --bnt-shadow-md: 0 4px 24px rgba(15,23,42,.10);
  --bnt-ring:      0 0 0 3px var(--bnt-accent-ring);

  --bnt-ease: cubic-bezier(0.4, 0, 0.2, 1);

  font-family: var(--bnt-sans);
  background:  var(--bnt-bg);
  color:       var(--bnt-text);
  min-height:  100vh;
  box-sizing:  border-box;
}

#bnt-root *, #bnt-root *::before, #bnt-root *::after {
  box-sizing: inherit;
}

/* ── Scrollbar ─────────────────────────────────────────────────── */
#bnt-root ::-webkit-scrollbar            { width: 5px; height: 5px; }
#bnt-root ::-webkit-scrollbar-track      { background: var(--bnt-surface2); }
#bnt-root ::-webkit-scrollbar-thumb      { background: var(--bnt-border2); border-radius: 3px; }
#bnt-root ::-webkit-scrollbar-thumb:hover{ background: var(--bnt-accent3); }

/* ═══════════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════════ */
.bnt-hero {
  background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 45%, #2563eb 100%);
  padding: 52px 24px 44px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Subtle dot-grid overlay */
.bnt-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.bnt-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

.bnt-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: #bfdbfe;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 4px 13px;
  border-radius: 100px;
  margin-bottom: 20px;
}
.bnt-hero-badge svg { width: 12px; height: 12px; }

.bnt-hero h1 {
  font-size: clamp(26px, 5vw, 44px);
  font-weight: 800;
  letter-spacing: -.025em;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.1;
}
.bnt-hero h1 span {
  color: #93c5fd;
}

.bnt-hero p {
  font-size: clamp(13.5px, 2vw, 15.5px);
  color: rgba(255,255,255,.75);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════════
   MODE TABS
═══════════════════════════════════════════════════════════════ */
.bnt-tabs-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 20px 0;
}

.bnt-tabs {
  display: flex;
  gap: 4px;
  background: var(--bnt-surface);
  border: 1px solid var(--bnt-border);
  border-radius: var(--bnt-radius);
  padding: 5px;
  box-shadow: var(--bnt-shadow);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.bnt-tabs::-webkit-scrollbar { height: 0; }

.bnt-tab {
  flex: 1;
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-radius: var(--bnt-radius-sm);
  font-family: var(--bnt-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--bnt-text2);
  cursor: pointer;
  transition: all .16s var(--bnt-ease);
  white-space: nowrap;
  line-height: 1;
}
.bnt-tab svg { width: 14px; height: 14px; flex-shrink: 0; }
.bnt-tab:hover {
  background: var(--bnt-surface2);
  color: var(--bnt-text);
}
.bnt-tab.is-active {
  background: var(--bnt-accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,.35);
}
.bnt-tab.is-active svg { color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   MAIN CONVERTER AREA
═══════════════════════════════════════════════════════════════ */
.bnt-app {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 20px 70px;
}

/* ── Converter card ─────────────────────────────────────────────── */
.bnt-converter {
  background: var(--bnt-surface);
  border: 1px solid var(--bnt-border);
  border-radius: var(--bnt-radius);
  box-shadow: var(--bnt-shadow);
  overflow: hidden;
}

/* Panel pair */
.bnt-panel-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  min-height: 240px;
}

/* Single IO panel */
.bnt-panel {
  display: flex;
  flex-direction: column;
}
.bnt-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 13px 16px 10px;
  border-bottom: 1px solid var(--bnt-border);
  background: var(--bnt-surface2);
}
.bnt-panel-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bnt-text2);
}
.bnt-panel-label svg { width: 13px; height: 13px; color: var(--bnt-accent); }

.bnt-panel-meta {
  font-size: 11px;
  font-weight: 600;
  color: var(--bnt-text3);
  font-family: var(--bnt-mono);
}

/* Textarea */
.bnt-textarea {
  flex: 1;
  width: 100%;
  min-height: 180px;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  font-family: var(--bnt-mono);
  font-size: 14px;
  line-height: 1.65;
  color: var(--bnt-mono-text);
  padding: 14px 16px;
  transition: background .15s;
}
.bnt-textarea::placeholder { color: var(--bnt-text3); font-family: var(--bnt-sans); font-size: 13.5px; }
.bnt-textarea:focus { background: var(--bnt-accent-bg); }

/* Output textarea - readonly */
.bnt-textarea.is-output {
  background: var(--bnt-surface2);
  color: var(--bnt-accent);
  font-weight: 600;
  cursor: default;
  user-select: all;
}
.bnt-textarea.is-output:focus { background: var(--bnt-surface2); }

/* Divider arrow */
.bnt-arrow-col {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  background: var(--bnt-surface2);
  border-left: 1px solid var(--bnt-border);
  border-right: 1px solid var(--bnt-border);
  flex-shrink: 0;
}
.bnt-arrow {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bnt-accent-bg);
  border: 1.5px solid var(--bnt-accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bnt-accent);
  flex-shrink: 0;
}
.bnt-arrow svg { width: 14px; height: 14px; }

/* Panel footer - actions */
.bnt-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--bnt-border);
  background: var(--bnt-surface2);
  flex-wrap: wrap;
}

/* ── Error / hint bar ───────────────────────────────────────────── */
.bnt-feedback {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  border-top: 1px solid transparent;
}
.bnt-feedback.is-err {
  display: flex;
  background: var(--bnt-err-bg);
  border-color: var(--bnt-err-border);
  color: var(--bnt-err);
}
.bnt-feedback.is-ok {
  display: flex;
  background: var(--bnt-ok-bg);
  border-color: var(--bnt-ok-border);
  color: var(--bnt-ok);
}
.bnt-feedback svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════════ */
.bnt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: var(--bnt-radius-sm);
  font-family: var(--bnt-sans);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  cursor: pointer;
  transition: all .16s var(--bnt-ease);
  white-space: nowrap;
  line-height: 1;
}
.bnt-btn svg { width: 13px; height: 13px; flex-shrink: 0; }

.bnt-btn-primary {
  background: var(--bnt-accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,.3);
}
.bnt-btn-primary:hover {
  background: #1d4ed8;
  box-shadow: 0 3px 14px rgba(37,99,235,.4);
  transform: translateY(-1px);
}
.bnt-btn-primary:active { transform: none; }

.bnt-btn-outline {
  background: var(--bnt-surface);
  border: 1px solid var(--bnt-border2);
  color: var(--bnt-text2);
}
.bnt-btn-outline:hover {
  background: var(--bnt-accent-bg);
  border-color: var(--bnt-accent2);
  color: var(--bnt-accent);
}

.bnt-btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--bnt-text3);
  padding: 8px 10px;
}
.bnt-btn-ghost:hover {
  background: var(--bnt-surface3);
  color: var(--bnt-text2);
  border-color: var(--bnt-border);
}

.bnt-btn-sm { padding: 6px 12px; font-size: 12px; }
.bnt-btn-sm svg { width: 12px; height: 12px; }

/* Copy success flash */
.bnt-btn.is-copied {
  background: var(--bnt-ok-bg) !important;
  border-color: var(--bnt-ok-border) !important;
  color: var(--bnt-ok) !important;
}

/* ═══════════════════════════════════════════════════════════════
   STATS BAR
═══════════════════════════════════════════════════════════════ */
.bnt-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-top: 1px solid var(--bnt-border);
  background: var(--bnt-surface2);
  flex-wrap: wrap;
}
.bnt-stat {
  font-size: 11.5px;
  color: var(--bnt-text3);
  display: flex;
  align-items: center;
  gap: 4px;
}
.bnt-stat strong {
  font-family: var(--bnt-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--bnt-accent2);
}
.bnt-stat-sep {
  color: var(--bnt-border2);
  font-size: 16px;
  line-height: 1;
  margin: 0 2px;
}

/* ═══════════════════════════════════════════════════════════════
   QUICK REFERENCE TABLE
═══════════════════════════════════════════════════════════════ */
.bnt-ref-card {
  margin-top: 20px;
  background: var(--bnt-surface);
  border: 1px solid var(--bnt-border);
  border-radius: var(--bnt-radius);
  box-shadow: var(--bnt-shadow);
  overflow: hidden;
}
.bnt-ref-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--bnt-border);
  background: var(--bnt-surface2);
  cursor: pointer;
  user-select: none;
}
.bnt-ref-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bnt-text2);
  flex: 1;
}
.bnt-ref-chevron {
  color: var(--bnt-text3);
  transition: transform .18s var(--bnt-ease);
}
.bnt-ref-chevron svg { width: 15px; height: 15px; }
.bnt-ref-card.is-open .bnt-ref-chevron { transform: rotate(180deg); }

.bnt-ref-body {
  display: none;
  overflow-x: auto;
}
.bnt-ref-card.is-open .bnt-ref-body { display: block; }

.bnt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.bnt-table th {
  background: var(--bnt-surface2);
  color: var(--bnt-text2);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 9px 14px;
  text-align: left;
  border-bottom: 1px solid var(--bnt-border);
  white-space: nowrap;
}
.bnt-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--bnt-border);
  font-family: var(--bnt-mono);
  font-size: 12.5px;
  color: var(--bnt-text);
  vertical-align: middle;
}
.bnt-table tr:last-child td { border-bottom: none; }
.bnt-table tr:hover td { background: var(--bnt-surface2); }
.bnt-table td:first-child { color: var(--bnt-text2); font-family: var(--bnt-sans); font-size: 13px; font-weight: 600; }
.bnt-table .mono-blue { color: var(--bnt-accent); font-weight: 600; }
.bnt-table .mono-green { color: var(--bnt-ok); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   SEO SECTION
═══════════════════════════════════════════════════════════════ */
.bnt-seo {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--bnt-border);
}
.bnt-seo h2 {
  font-size: clamp(17px, 2.5vw, 22px);
  font-weight: 800;
  color: var(--bnt-text);
  margin: 0 0 10px;
  letter-spacing: -.015em;
}
.bnt-seo h3 { font-size: 15px; font-weight: 700; color: var(--bnt-text); margin: 24px 0 8px; }
.bnt-seo p  { font-size: 14px; color: var(--bnt-text2); line-height: 1.78; margin: 0 0 10px; }
.bnt-seo code {
  font-family: var(--bnt-mono);
  font-size: 12.5px;
  background: var(--bnt-surface2);
  border: 1px solid var(--bnt-border);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--bnt-accent);
}

.bnt-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.bnt-info-card {
  background: var(--bnt-surface);
  border: 1px solid var(--bnt-border);
  border-radius: var(--bnt-radius-sm);
  padding: 14px 16px;
  border-left: 3px solid var(--bnt-accent);
}
.bnt-info-card h4 { font-size: 13px; font-weight: 700; color: var(--bnt-accent); margin: 0 0 4px; }
.bnt-info-card p  { font-size: 12.5px; color: var(--bnt-text2); margin: 0; line-height: 1.55; }

/* FAQ */
.bnt-faq { margin-top: 12px; }
.bnt-faq-item { border-bottom: 1px solid var(--bnt-border); }
.bnt-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--bnt-text);
  user-select: none;
  transition: color .14s;
}
.bnt-faq-q:hover { color: var(--bnt-accent); }
.bnt-faq-chevron {
  flex-shrink: 0;
  color: var(--bnt-text3);
  transition: transform .18s var(--bnt-ease);
}
.bnt-faq-item.is-open .bnt-faq-chevron { transform: rotate(180deg); }
.bnt-faq-a {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--bnt-text2);
  padding-bottom: 14px;
  display: none;
}
.bnt-faq-item.is-open .bnt-faq-a { display: block; }

/* ═══════════════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════════════ */
.bnt-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: #0f172a;
  color: #f1f5f9;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 100px;
  box-shadow: 0 4px 24px rgba(15,23,42,.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--bnt-ease), transform .2s var(--bnt-ease);
  z-index: 9999;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bnt-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.bnt-toast.ok  { background: #14532d; }
.bnt-toast.err { background: #7f1d1d; }
.bnt-toast svg { width: 14px; height: 14px; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  .bnt-hero { padding: 38px 16px 32px; }

  /* Stack the two panels vertically */
  .bnt-panel-pair {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  /* Arrow rotates to point down */
  .bnt-arrow-col {
    width: 100%;
    height: 40px;
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--bnt-border);
    border-bottom: 1px solid var(--bnt-border);
  }
  .bnt-arrow { transform: rotate(90deg); }

  .bnt-tabs { flex-wrap: nowrap; }
  .bnt-tab  { min-width: 105px; font-size: 12px; padding: 9px 10px; }

  .bnt-info-grid { grid-template-columns: 1fr 1fr; }
  .bnt-app { padding: 16px 12px 60px; }
  .bnt-tabs-wrap { padding: 18px 12px 0; }

  .bnt-panel-foot { gap: 6px; }
  .bnt-stats { gap: 4px; }
}

@media (max-width: 420px) {
  .bnt-info-grid { grid-template-columns: 1fr; }
  .bnt-tab span { display: none; }    /* icon only on very small screens */
  .bnt-tab { min-width: 48px; gap: 0; padding: 10px; }
}