#nbb *, #nbb *::before, #nbb *::after{ margin: 0; padding: 0; box-sizing: border-box; }

#nbb{
  --bg-main:#09090b; --bg-card:#18181b; --bg-sidebar:#0f0f12; --bg-option:#18181b;
  --bg-hover:#27272a; --border:#27272a; --border-light:#1f1f23;
  --text-1:#fafafa; --text-2:#a1a1aa; --text-3:#71717a; --accent:#eab308;
  --ctx-color:#eab308;
  --ctx-glow: color-mix(in srgb, var(--ctx-color) 24%, transparent);
  --ctx-tint: color-mix(in srgb, var(--ctx-color) 8%, transparent);
}

#nbb{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-main);
  color: var(--text-1);
  height: 100vh;
  overflow: hidden;
  font-size: 14px;
}


#nbb .app{
  display: flex;
  flex-direction: column;
  height: 100vh;
}


#nbb .header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 56px;
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 10;
}

#nbb .header-left{ display: flex; align-items: center; gap: 10px; }
#nbb .logo-icon{ font-size: 22px; }
#nbb .logo-text{ font-size: 16px; font-weight: 700; color: var(--text-1); letter-spacing: -.4px; }
#nbb .logo-sep{ color: var(--border); font-size: 18px; }
#nbb .logo-sub{ font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: 2px; }

#nbb .context-badge{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-option);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  transition: all .3s ease;
}
#nbb .context-badge.active{
  color: var(--ctx-color);
  border-color: var(--ctx-color);
  background: var(--ctx-tint);
  box-shadow: 0 0 14px var(--ctx-glow);
}
#nbb .badge-dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-3);
  transition: background .3s;
}
#nbb .context-badge.active .badge-dot{ background: var(--ctx-color); }


#nbb .main-layout{
  display: grid;
  grid-template-columns: 230px 1fr 400px;
  flex: 1;
  overflow: hidden;
}


#nbb .sidebar{
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

#nbb .sidebar-style-picker{ padding: 14px 14px 6px; }

#nbb .style-change-btn{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-option);
  color: var(--text-2);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all .2s;
  text-align: left;
}
#nbb .style-change-btn:hover{
  border-color: var(--ctx-color);
  color: var(--ctx-color);
  background: var(--ctx-tint);
}
#nbb .style-btn-icon{ font-size: 18px; flex-shrink: 0; }
#nbb .style-btn-label{ flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#nbb .style-btn-arrow{ color: var(--text-3); font-size: 11px; }

#nbb .sidebar-section-label{
  padding: 14px 18px 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 2px;
}

#nbb .nav-locked-msg{
  padding: 12px 18px;
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
}

#nbb .category-item{
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 18px;
  cursor: pointer;
  transition: all .15s;
  border-left: 3px solid transparent;
  user-select: none;
}
#nbb .category-item:hover{ background: var(--bg-hover); }
#nbb .category-item.active{
  background: var(--ctx-tint);
  border-left-color: var(--ctx-color);
}
#nbb .category-item.active .cat-label{ color: var(--ctx-color); }
#nbb .cat-icon{ font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
#nbb .cat-label{ font-size: 13px; font-weight: 500; color: var(--text-2); flex: 1; }
#nbb .cat-filled{
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ctx-color);
  display: grid; place-items: center;
  font-size: 9px; color: #000; font-weight: 700;
  opacity: 0; transition: opacity .2s;
  flex-shrink: 0;
}
#nbb .cat-filled.show{ opacity: 1; }

#nbb .sidebar-progress{
  margin-top: auto;
  padding: 14px 18px;
  border-top: 1px solid var(--border-light);
  font-size: 11px;
  color: var(--text-3);
}


#nbb .center-panel{
  overflow-y: auto;
  background: var(--bg-main);
}


#nbb .style-picker-screen{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100%;
  padding: 22px 32px 40px;
  gap: 20px;
}

#nbb .style-picker-header{ text-align: center; }
#nbb .style-picker-header h1{
  font-size: 28px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 10px;
}
#nbb .style-picker-header p{
  font-size: 14px;
  color: var(--text-2);
  max-width: 440px;
}

#nbb .style-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 980px;
  width: 100%;
}


#nbb .style-grid.base-grid{
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 980px;
}

/* Compact cards for BOTH the base-category grid and the style grid */
#nbb .style-grid .style-card{ padding: 12px; border-radius: 11px; }
#nbb .style-grid .style-card-top{ margin-bottom: 8px; }
#nbb .style-grid .style-card-icon{ font-size: 22px; }
#nbb .style-grid .style-card-name{ font-size: 13px; margin-bottom: 3px; }
#nbb .style-grid .style-card-desc{ font-size: 10.5px; line-height: 1.4; }
#nbb .style-grid .style-card-tag{ font-size: 8px; margin-top: 7px; }

/* ── Recipe quick-roll chips ── */
#nbb .recipe-bar{ display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 4px 0 14px; }
#nbb .recipe-bar:empty{ display: none; }
#nbb .recipe-bar-label{ font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-3, #71717a); margin-right: 2px; }
#nbb .recipe-chip{ font-size: 11px; font-weight: 600; padding: 6px 11px; border-radius: 20px; cursor: pointer;
  background: var(--bg-card, #18181b); color: var(--text-1, #fafafa); border: 0.5px solid var(--line, #27272a); transition: all .15s; }
#nbb .recipe-chip:hover{ border-color: var(--ctx-color, #eab308); color: var(--ctx-color, #eab308); transform: translateY(-1px); }
#nbb .recipe-chip:active{ transform: scale(.97); }


#nbb .picker-back{
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-option);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
}
#nbb .picker-back:hover{ border-color: var(--text-2); color: var(--text-1); transform: translateX(-3px); }

#nbb .style-card-arrow{
  font-size: 20px;
  color: var(--card-color);
  opacity: .5;
  transition: opacity .2s, transform .2s;
}
#nbb .style-card:hover .style-card-arrow{ opacity: 1; transform: translateX(3px); }

#nbb .style-card{
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  cursor: pointer;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}
#nbb .style-card::after{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: var(--card-color);
  opacity: 0;
  transition: opacity .2s;
}
#nbb .style-card:hover{ border-color: var(--card-color); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
#nbb .style-card:hover::after{ opacity: .05; }
#nbb .style-card.selected{ border-color: var(--card-color); background: color-mix(in srgb, var(--card-color) 8%, var(--bg-card)); }
#nbb .style-card.selected::after{ opacity: .07; }
#nbb .style-card-top{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
#nbb .style-card-icon{ font-size: 34px; }
#nbb .style-card-check{
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--card-color);
  display: grid; place-items: center;
  font-size: 12px; color: #000; font-weight: 700;
  opacity: 0; transition: opacity .2s;
}
#nbb .style-card.selected .style-card-check{ opacity: 1; }
#nbb .style-card-name{ font-size: 16px; font-weight: 600; color: var(--text-1); margin-bottom: 6px; }
#nbb .style-card-desc{ font-size: 12px; color: var(--text-2); line-height: 1.5; }
#nbb .style-card-tag{
  display: inline-block;
  margin-top: 12px;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: color-mix(in srgb, var(--card-color) 15%, transparent);
  color: var(--card-color);
}


#nbb .options-screen{ padding: 0; }

#nbb .options-screen-header{
  padding: 22px 28px 16px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-sidebar);
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 5;
}
#nbb .osc-icon{ font-size: 22px; }
#nbb .osc-info{}
#nbb .osc-title{ font-size: 18px; font-weight: 600; color: var(--text-1); }
#nbb .osc-hint{ font-size: 12px; color: var(--text-3); margin-top: 2px; }
#nbb .osc-hint strong{ color: var(--ctx-color); }

#nbb .fields-container{ padding: 20px 28px; display: flex; flex-direction: column; gap: 28px; }


#nbb .field-block{}
#nbb .field-header{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
#nbb .field-label{
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
#nbb .field-multi-tag{
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--ctx-tint);
  color: var(--ctx-color);
  font-weight: 500;
}

#nbb .options-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 8px;
}


#nbb .option-chip{
  position: relative;
  background: var(--bg-option);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all .15s;
  user-select: none;
  animation: chipIn .2s ease backwards;
}
#nbb .option-chip:hover{
  border-color: var(--ctx-color);
  background: var(--bg-hover);
}
#nbb .option-chip.selected{
  border-color: var(--ctx-color);
  background: var(--ctx-tint);
  box-shadow: 0 0 0 1px var(--ctx-color);
}
#nbb .option-chip.selected::after{
  content: '✓';
  position: absolute;
  top: 6px; right: 8px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ctx-color);
  color: #000;
  font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
}
#nbb .chip-label{ font-size: 13px; font-weight: 500; color: var(--text-1); line-height: 1.35; }
#nbb .chip-value{
  margin-top: 4px;
  font-size: 10px;
  color: var(--text-3);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@keyframes chipIn{
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}


#nbb .output-panel{
  background: var(--bg-sidebar);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#nbb .output-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#nbb .output-title{
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 2px;
}
#nbb .output-actions{ display: flex; gap: 8px; }

#nbb .btn-copy, #nbb .btn-reset{
  padding: 5px 14px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--bg-option);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
}
#nbb .btn-copy:hover{ border-color: var(--ctx-color); color: var(--ctx-color); }
#nbb .btn-copy.copied{ background: var(--ctx-color); color: #000; border-color: transparent; }
#nbb .btn-reset:hover{ border-color: #ff5252; color: #ff5252; }

#nbb .btn-roll{
  padding: 5px 14px;
  border-radius: 7px;
  border: 1px solid var(--ctx-color);
  background: var(--ctx-tint);
  color: var(--ctx-color);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
#nbb .btn-roll:hover{ background: var(--ctx-color); color: #000; }
#nbb .btn-roll.rolling{ animation: rollSpin .5s ease; }

@keyframes rollSpin{
  0%   { transform: rotate(0)      scale(1);    }
  50%  { transform: rotate(180deg) scale(1.25); }
  100% { transform: rotate(360deg) scale(1);    }
}


#nbb .admin-link{
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-option);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all .2s;
}
#nbb .admin-link:hover{ border-color: var(--text-2); color: var(--text-1); }

#nbb .header-right{ display: flex; align-items: center; gap: 12px; }


#nbb .selection-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  min-height: 52px;
  max-height: 110px;
  overflow-y: auto;
  flex-shrink: 0;
}
#nbb .chips-empty{ font-size: 12px; color: var(--text-3); font-style: italic; align-self: center; }

#nbb .sel-chip{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  background: var(--ctx-tint);
  color: var(--ctx-color);
  border: 1px solid color-mix(in srgb, var(--ctx-color) 35%, transparent);
  cursor: default;
}
#nbb .sel-chip-icon{ font-size: 12px; }


#nbb .json-display{
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
}
#nbb .json-pre{
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 11.5px;
  line-height: 1.85;
  white-space: pre-wrap;
  word-break: break-word;
}


#nbb .json-key{ color: #40c4ff; }
#nbb .json-str{ color: #a5d6a7; }
#nbb .json-num{ color: #ffcc02; }
#nbb .json-null{ color: #ff7043; }
#nbb .json-bool{ color: #ce93d8; }
#nbb .json-punct{ color: #555580; }
#nbb .json-comment{ color: var(--text-3); font-style: italic; }


#nbb ::-webkit-scrollbar{ width: 5px; height: 5px; }
#nbb ::-webkit-scrollbar-track{ background: transparent; }
#nbb ::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 3px; }
#nbb ::-webkit-scrollbar-thumb:hover{ background: var(--text-3); }


#nbb .hidden{ display: none !important; }


html.light-mode #nbb{
  --bg-main:#f4f4f5; --bg-card:#ffffff; --bg-sidebar:#f8f8fa; --bg-option:#ffffff;
  --bg-hover:#eef0f3; --border:#e4e4e7; --border-light:#ececef;
  --text-1:#18181b; --text-2:#52525b; --text-3:#8a8a93;
}
#nbb .nbb-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:200;}
#nbb .nbb-modal-overlay.hidden{display:none;}
#nbb .nbb-modal{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:22px;width:92%;max-width:430px;box-shadow:0 20px 60px rgba(0,0,0,.5);}
#nbb .nbb-modal h3{font-size:18px;font-weight:700;color:var(--text-1);margin-bottom:12px;}
#nbb .nbb-modal label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin:12px 0 5px;}
#nbb .nbb-modal input[type=text]{width:100%;background:var(--bg-main);border:1px solid var(--border);border-radius:9px;padding:10px 11px;color:var(--text-1);font-size:13px;outline:none;font-family:inherit;}
#nbb .nbb-modal input[type=text]:focus{border-color:var(--ctx-color);}
#nbb .nbb-modal .nbb-check{display:flex;align-items:center;gap:8px;margin-top:14px;text-transform:none;letter-spacing:0;font-size:13px;color:var(--text-2);}
#nbb .nbb-modal .nbb-check input{width:16px;height:16px;accent-color:var(--ctx-color);}
#nbb .nbb-modal-actions{display:flex;gap:10px;margin-top:20px;}
#nbb .nbb-modal-actions button{flex:1;padding:11px;border-radius:10px;border:1px solid var(--border);background:var(--bg-option);color:var(--text-1);font-weight:700;font-size:13px;cursor:pointer;}
#nbb .nbb-modal-actions button:hover{background:var(--bg-hover);}
#nbb .nbb-modal-actions button.primary{background:var(--ctx-color);color:#1a1100;border-color:var(--ctx-color);}
#nbb .nbb-modal-actions button:disabled{opacity:.6;cursor:default;}
#nbb #nbbToast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--bg-card);border:1px solid var(--border);color:var(--text-1);padding:10px 18px;border-radius:10px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .25s;z-index:300;box-shadow:0 8px 30px rgba(0,0,0,.45);}
#nbb #nbbToast.show{opacity:1;}


@media (max-width: 880px){
  #nbb .main-layout{ display:flex; flex-direction:column; overflow:visible; }

  /* ── Sidebar collapses to a compact top control strip ── */
  #nbb .sidebar{ order:1; border-right:none; border-bottom:1px solid var(--border); overflow:visible; }
  #nbb .sidebar-style-picker{ padding:10px 12px 8px; }
  #nbb .sidebar-section-label{ display:none; }   /* "Categories" label — redundant on mobile */
  #nbb .sidebar-progress{ display:none; }         /* progress text — saves vertical space */

  /* ── Quick Start removed on mobile (per request) ── */
  #nbb .qs-bar, #nbb #qsBar{ display:none !important; }

  /* ── Category nav becomes a horizontal, swipeable tab row ── */
  #nbb .category-nav{ display:flex; gap:8px; overflow-x:auto; overflow-y:hidden;
    padding:0 12px 10px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  #nbb .category-nav::-webkit-scrollbar{ display:none; }
  #nbb .nav-locked-msg{ padding:2px 12px 10px; }
  #nbb .category-item{ flex:0 0 auto; border:1px solid var(--border); border-radius:20px;
    padding:7px 13px; background:var(--bg-option); white-space:nowrap; }
  #nbb .category-item:hover{ background:var(--bg-option); }
  #nbb .category-item.active{ border-color:var(--ctx-color); background:var(--ctx-tint); }
  #nbb .cat-icon{ width:auto; }
  #nbb .cat-label{ flex:0 0 auto; }

  #nbb .center-panel{ order:2; overflow:visible; }
  #nbb .output-panel{ order:3; border-left:none; border-top:1px solid var(--border); overflow:visible; }
  #nbb .style-grid, #nbb .style-grid.base-grid{ grid-template-columns:repeat(2,1fr); max-width:none; }
  #nbb .options-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
  #nbb .json-display{ max-height:48vh; overflow:auto; }
  #nbb .header{ padding:0 14px; height:52px; }
  #nbb .logo-sep, #nbb .logo-sub{ display:none; }
  #nbb .fields-container{ padding:16px; gap:20px; }
  #nbb .output-header{ flex-wrap:wrap; gap:8px; }
}
@media (max-width: 480px){
  /* keep the picker 2-up so it's a short, scannable grid rather than one long column */
  #nbb .style-grid, #nbb .style-grid.base-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  #nbb .options-grid{ grid-template-columns:1fr 1fr; }
  #nbb .fields-container{ padding:14px; }
  #nbb .nbb-modal{ padding:18px; }
}




#nbb .style-card{ padding:19px; border-radius:13px; }
#nbb .style-card-icon{ font-size:27px; }
#nbb .style-card-top{ margin-bottom:11px; }
#nbb .style-card-name{ font-size:13px; margin-bottom:5px; }
#nbb .style-card-desc{ font-size:10px; line-height:1.45; }
#nbb .style-card-tag{ font-size:8px; margin-top:9px; padding:2px 8px; letter-spacing:.6px; }
#nbb .style-card-check{ width:20px; height:20px; font-size:10px; }
#nbb .style-grid{ gap:13px; }

#nbb .selection-chips{ display:none !important; }

#nbb .qs-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:14px 0 4px; }
#nbb .qs-label{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--ctx-color); }
#nbb .qs-chip{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:6px 12px; border-radius:20px; border:1px solid var(--border); background:var(--bg-option); color:var(--text-1); cursor:pointer; transition:all .15s; }
#nbb .qs-chip:hover{ border-color:var(--ctx-color); color:var(--ctx-color); transform:translateY(-1px); }
/* Preset chips (carry exact selections) stand out from plain style starters. */
#nbb .qs-chip.preset{ border-color:var(--ctx-color); color:var(--ctx-color); background:var(--ctx-tint); }

#nbb .output-panel{ overflow-y:auto; }
#nbb .output-title{ color:var(--text-1); font-size:12px; letter-spacing:1.5px; }
#nbb .out-section{ display:flex; flex-direction:column; border-bottom:1px solid var(--border); }
#nbb .out-section:last-child{ border-bottom:none; }
#nbb .out-section-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 18px 4px; }
#nbb .out-section-head span{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-3); }
#nbb .mini-copy{ font-size:10px; font-weight:600; padding:3px 9px; border-radius:6px; border:1px solid var(--border); background:var(--bg-option); color:var(--text-2); cursor:pointer; transition:all .15s; }
#nbb .mini-copy:hover{ border-color:var(--ctx-color); color:var(--ctx-color); }
#nbb .mini-copy.copied{ background:var(--ctx-color); color:#000; border-color:transparent; }
#nbb .json-display{ max-height:46vh; }
#nbb .text-prompt{ width:100%; min-height:120px; max-height:34vh; resize:vertical; border:none; background:var(--bg-main); color:var(--text-1); font-family:'JetBrains Mono','Fira Code',monospace; font-size:11.5px; line-height:1.7; padding:12px 18px 16px; outline:none; }
#nbb .text-prompt::placeholder{ color:var(--text-3); }



#nbb .nbb-loading{ position:absolute; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; background:var(--bg-main); color:var(--text-2); font-size:14px; font-weight:600; }
#nbb .text-field-input{ width:100%; background:var(--bg-option); border:1px solid var(--border); border-radius:10px; padding:10px 12px; color:var(--text-1); font-family:inherit; font-size:13px; line-height:1.5; resize:vertical; outline:none; }
#nbb .text-field-input:focus{ border-color:var(--ctx-color); }
#nbb .header .qs-bar{ flex:1 1 auto; min-width:0; padding:0; margin:0 14px; justify-content:center; overflow-x:auto; flex-wrap:nowrap; }
#nbb .header .qs-bar::-webkit-scrollbar{ height:0; }
#nbb .header .qs-chip{ padding:5px 10px; font-size:11px; white-space:nowrap; }
#nbb .header .qs-label{ white-space:nowrap; }
@media (max-width:880px){ #nbb .header{ flex-wrap:wrap; height:auto; padding:8px 14px; } #nbb .header .qs-bar{ order:3; width:100%; flex-basis:100%; margin:8px 0 0; justify-content:flex-start; } }



#nbb .style-card{ background:linear-gradient(165deg, var(--bg-card), color-mix(in srgb, var(--bg-card) 90%, #000)); transition:transform .18s cubic-bezier(.2,.7,.3,1), border-color .18s, box-shadow .18s; }
#nbb .style-card:hover{ transform:translateY(-4px); box-shadow:0 16px 38px rgba(0,0,0,.42); }
#nbb .style-card-icon{ transition:transform .18s cubic-bezier(.2,.7,.3,1); display:inline-block; }
#nbb .style-card:hover .style-card-icon{ transform:scale(1.12) rotate(-3deg); }
#nbb .style-picker-header h1{ letter-spacing:-.5px; }
#nbb .style-picker-header p{ color:var(--text-2); max-width:520px; margin:0 auto; }
#nbb .qs-chip{ transition:transform .15s, border-color .15s, color .15s, background .15s; }
#nbb .osc-title{ letter-spacing:-.3px; }
#nbb .option-chip{ transition:transform .12s, border-color .15s, background .15s; }
#nbb .option-chip:hover{ transform:translateY(-2px); }
html.light-mode .style-card #nbb{ box-shadow:0 2px 10px rgba(0,0,0,.05); }
html.light-mode .style-card:hover #nbb{ box-shadow:0 14px 34px rgba(0,0,0,.12); }



#nbb .field-header{ display:flex; align-items:center; gap:8px; }
#nbb .field-header .lock-btn{ margin-left:auto; }
#nbb .text-suggest{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
#nbb .suggest-chip{ font-size:11px; padding:4px 10px; border-radius:14px; border:1px solid var(--border); background:var(--bg-option); color:var(--text-2); cursor:pointer; transition:all .15s; }
#nbb .suggest-chip:hover{ border-color:var(--ctx-color); color:var(--ctx-color); }
#nbb .lock-btn{ display:inline-flex; align-items:center; gap:5px; background:none; border:1px solid transparent; color:var(--text-3); cursor:pointer; font-size:13px; border-radius:7px; padding:3px 7px; transition:all .15s; }
#nbb .lock-btn:hover{ color:var(--text-1); border-color:var(--border); }
/* Locked is unmistakable: accent colour + tinted, bordered pill (not just a glyph swap). */
#nbb .lock-btn.locked{ color:var(--ctx-color); background:var(--ctx-tint); border-color:var(--ctx-color); }
#nbb .lock-btn .lk{ width:14px; height:14px; flex:0 0 auto; display:block; }
#nbb .osc-lock{ margin-left:auto; font-size:11px; font-weight:600; flex:0 0 auto; }
#nbb .osc-lock-txt{ line-height:1; }
#nbb .more-chip{ display:flex; align-items:center; justify-content:center; border:1px dashed var(--border); border-radius:10px; background:transparent; color:var(--ctx-color); font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; min-height:54px; }
#nbb .more-chip:hover{ border-color:var(--ctx-color); background:var(--ctx-tint); }
#nbb .nbb-opts-modal{ max-width:760px; width:92%; max-height:80vh; display:flex; flex-direction:column; }
#nbb .nbb-opts-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
#nbb .nbb-opts-head h3{ margin:0; font-size:16px; color:var(--text-1); }
#nbb .nbb-x{ background:none; border:none; color:var(--text-3); font-size:16px; cursor:pointer; }
#nbb .nbb-x:hover{ color:var(--text-1); }
#nbb .nbb-opts-modal .options-grid{ overflow-y:auto; }

#nbb{ position:relative; height:calc(100vh - 96px); min-height:680px; max-width:1500px; margin:0 auto; overflow:hidden; border:1px solid rgba(255,255,255,.08); border-radius:16px; }
#nbb .app{ height:100% !important; }
@media (max-width:880px){ #nbb{ height:auto; min-height:0; overflow:visible; border:none; border-radius:0; } #nbb .app{ height:auto !important; } }

/* ── Category Prev / Next pager (rendered at the end of the options list) ── */
#nbb .cat-pager{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:26px; padding-top:18px; border-top:1px solid var(--border); }
#nbb .cat-pager-btn{ flex:1 1 0; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:4px; padding:11px 12px; border-radius:12px; border:1px solid var(--border); background:var(--bg-option); color:var(--text-1); font-size:13px; font-weight:600; cursor:pointer; transition:all .15s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#nbb .cat-pager-btn:hover{ border-color:var(--ctx-color); color:var(--ctx-color); }
#nbb .cat-pager-btn.primary{ background:var(--ctx-color); color:#000; border-color:transparent; }
#nbb .cat-pager-btn.primary:hover{ filter:brightness(1.06); color:#000; }
#nbb .cat-pager-btn.ghost{ flex:0 0 auto; padding:11px 14px; opacity:.35; cursor:default; background:transparent; }
#nbb .cat-pager-btn.ghost:hover{ border-color:var(--border); color:var(--text-1); }
#nbb .cat-pager-pos{ flex:0 0 auto; font-size:11px; font-weight:700; color:var(--text-3); letter-spacing:.5px; white-space:nowrap; }

/* Re-renders triggered by a tap shouldn't re-flash the chip entrance animation. */
#nbb .fields-container.no-anim .option-chip{ animation:none !important; }

/* Smooth-scroll targets clear the sticky site header (≈64px) so nothing hides under it. */
#nbb, #nbb .options-screen-header, #nbb .output-panel{ scroll-margin-top:72px; }