/* ── NAMING TOOL TOKENS ─────────────────── */
#namingView {
  --nt-bg:       #f0f4f8;
  --nt-surface:  #ffffff;
  --nt-surface2: #f7f9fc;
  --nt-surface3: #eef2f7;
  --nt-border:   #dde3ee;
  --nt-border2:  #e8ecf4;
  --nt-text:     #0f1923;
  --nt-muted:    #52657e;
  --nt-faint:    #9aaabb;
  --nt-azure:    #0078d4;
  --nt-azure-l:  #e8f4fd;
  --nt-success:  #107c10;
  --nt-warn:     #d83b01;
  --nt-amber:    #b45309;
  --nt-grid:     rgba(0,0,0,0.035);
  --nt-shadow:   0 1px 3px rgba(0,0,0,.07),0 4px 14px rgba(0,0,0,.05);
  --nt-glow:     rgba(0,120,212,0.10);
  --nt-tag-bg:   #eef2f7;
  --nt-tag-col:  #52657e;
}
body.dark #namingView {
  --nt-bg:       #0b0f1a;
  --nt-surface:  #111827;
  --nt-surface2: #1a2235;
  --nt-surface3: #1f2d42;
  --nt-border:   #1e2d42;
  --nt-border2:  #243044;
  --nt-text:     #e8edf8;
  --nt-muted:    #7a8aa8;
  --nt-faint:    #3a4a64;
  --nt-azure:    #3aa0f3;
  --nt-azure-l:  #0d2137;
  --nt-success:  #4ec94e;
  --nt-warn:     #f97316;
  --nt-amber:    #f59e0b;
  --nt-grid:     rgba(255,255,255,0.028);
  --nt-shadow:   0 1px 3px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.2);
  --nt-glow:     rgba(58,160,243,0.12);
  --nt-tag-bg:   #1a2235;
  --nt-tag-col:  #4a5a76;
}
#namingView {
  min-height:100vh; background:var(--nt-bg);
  font-family:'IBM Plex Sans',sans-serif; color:var(--nt-text);
  display:flex; flex-direction:column; position:relative;
}
#namingView::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(var(--nt-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--nt-grid) 1px,transparent 1px);
  background-size:48px 48px;
}
.nt-header {
  display:flex; align-items:center; gap:12px;
  padding:0 32px; height:58px;
  background:var(--nt-surface);
  border-bottom:2px solid var(--nt-azure);
  box-shadow:0 2px 8px var(--nt-glow);
  position:sticky; top:0; z-index:100; flex-shrink:0;
}
.nt-back-btn {
  display:flex; align-items:center; gap:6px;
  background:none; border:1.5px solid var(--nt-border);
  border-radius:7px; padding:5px 11px; cursor:pointer;
  color:var(--nt-muted); font-size:11px;
  font-family:'IBM Plex Mono',monospace; font-weight:600;
  transition:all .15s; flex-shrink:0;
}
.nt-back-btn:hover{border-color:var(--nt-azure);color:var(--nt-azure)}
.nt-header-logo {
  width:28px; height:28px; background:var(--nt-azure);
  border-radius:6px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; box-shadow:0 0 14px var(--nt-glow);
}
.nt-header-logo svg{width:17px;height:17px;fill:#fff}
.nt-header h1{font-size:15px;font-weight:600;letter-spacing:-.01em;flex:1}
.nt-dark-btn {
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;cursor:pointer;
  border:1.5px solid var(--nt-border);background:var(--nt-surface2);
  color:var(--nt-muted);transition:all .15s;flex-shrink:0;
}
.nt-dark-btn:hover{border-color:var(--nt-azure);color:var(--nt-azure)}

/* ── TABS ── */
.nt-tabs {
  display:flex; background:var(--nt-surface);
  border-bottom:1px solid var(--nt-border);
  position:sticky; top:58px; z-index:99; flex-shrink:0;
}
.nt-tab {
  display:flex; align-items:center; gap:7px;
  padding:12px 24px; font-size:12px; font-weight:600;
  color:var(--nt-muted); cursor:pointer; border:none; background:none;
  border-bottom:2px solid transparent; transition:all .15s; white-space:nowrap;
}
.nt-tab:hover{color:var(--nt-azure)}
.nt-tab.active{color:var(--nt-azure);border-bottom-color:var(--nt-azure)}
.nt-tab svg{flex-shrink:0}

/* ── TAB PANES ── */
.nt-pane{display:none;flex:1;position:relative;z-index:1}
.nt-pane.active{display:block}

/* ── BUILDER LAYOUT ── */
.nt-builder {padding:24px 28px; max-width:1300px; margin:0 auto; width:100%;}
.nt-builder-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px;
}
@media(max-width:900px){.nt-builder-grid{grid-template-columns:1fr}}

/* ── CARDS ── */
.nt-card {
  background:var(--nt-surface); border:1px solid var(--nt-border);
  border-radius:14px; padding:22px; box-shadow:var(--nt-shadow);
}
.nt-card-title {
  font-family:'Syne',sans-serif; font-size:14px; font-weight:700;
  letter-spacing:-.02em; color:var(--nt-text); margin-bottom:16px;
  display:flex; align-items:center; gap:7px;
}
.nt-card-badge {
  font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 7px; border-radius:5px;
}
.nt-badge-req{background:rgba(0,120,212,.1);color:var(--nt-azure);border:1px solid rgba(0,120,212,.2)}
.nt-badge-opt{background:rgba(180,83,9,.08);color:var(--nt-amber);border:1px solid rgba(180,83,9,.2)}

/* ── FORM CONTROLS ── */
.nt-field{margin-bottom:14px}
.nt-field:last-child{margin-bottom:0}
.nt-label {
  font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--nt-muted); margin-bottom:6px; display:flex; align-items:center; gap:5px;
}
.nt-input,.nt-select {
  width:100%; padding:9px 12px;
  background:var(--nt-surface2); border:1.5px solid var(--nt-border);
  border-radius:8px; color:var(--nt-text);
  font-family:'IBM Plex Mono',monospace; font-size:12px;
  outline:none; transition:border-color .2s;
}
.nt-input:focus,.nt-select:focus{border-color:var(--nt-azure)}
.nt-input::placeholder{color:var(--nt-faint)}
.nt-select option{background:var(--nt-surface2)}

/* ── OPTIONAL TOGGLE ROW ── */
.nt-opt-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0; border-bottom:1px solid var(--nt-border2);
}
.nt-opt-row:last-child{border-bottom:none}
.nt-opt-label{font-size:12px;color:var(--nt-text);font-weight:500}
.nt-opt-right{display:flex;align-items:center;gap:8px}
.nt-toggle{position:relative;width:36px;height:20px;cursor:pointer;flex-shrink:0}
.nt-toggle input{opacity:0;width:0;height:0;position:absolute}
.nt-toggle-track{position:absolute;inset:0;border-radius:10px;background:var(--nt-border);transition:background .2s}
.nt-toggle input:checked~.nt-toggle-track{background:var(--nt-azure)}
.nt-toggle-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.nt-toggle input:checked~.nt-toggle-thumb{transform:translateX(16px)}
.nt-opt-input {
  font-family:'IBM Plex Mono',monospace; font-size:11px;
  border:1.5px solid var(--nt-border); border-radius:6px;
  background:var(--nt-surface2); color:var(--nt-text);
  padding:4px 8px; width:100px; outline:none;
}
.nt-opt-input:focus{border-color:var(--nt-azure)}
.nt-opt-panel{
  display:none; padding-top:10px;
  border-top:1px solid var(--nt-border2); margin-top:10px;
}
.nt-opt-panel.visible{display:block}

/* ── RESOURCE TYPE SEARCH ── */
.nt-search-wrap{position:relative;margin-bottom:12px}
.nt-search-input {
  width:100%; padding:9px 12px 9px 36px;
  background:var(--nt-surface2); border:1.5px solid var(--nt-border);
  border-radius:8px; color:var(--nt-text);
  font-family:'IBM Plex Sans',sans-serif; font-size:13px;
  outline:none; transition:border-color .2s;
}
.nt-search-input:focus{border-color:var(--nt-azure)}
.nt-search-icon{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  color:var(--nt-faint); pointer-events:none;
}
.nt-category-tabs{
  display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px;
}
.nt-cat-tab {
  font-size:10px; font-weight:600; padding:3px 9px; border-radius:5px;
  border:1.5px solid var(--nt-border); background:var(--nt-surface2);
  color:var(--nt-muted); cursor:pointer; transition:all .15s;
  white-space:nowrap;
}
.nt-cat-tab:hover{border-color:var(--nt-azure);color:var(--nt-azure)}
.nt-cat-tab.active{border-color:var(--nt-azure);background:var(--nt-azure-l);color:var(--nt-azure)}
.nt-resource-list{
  max-height:280px; overflow-y:auto; border:1px solid var(--nt-border);
  border-radius:8px; background:var(--nt-surface2);
}
.nt-resource-list::-webkit-scrollbar{width:4px}
.nt-resource-list::-webkit-scrollbar-thumb{background:var(--nt-border);border-radius:2px}
.nt-resource-item {
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  border-bottom:1px solid var(--nt-border2); cursor:pointer;
  transition:background .12s;
}
.nt-resource-item:last-child{border-bottom:none}
.nt-resource-item:hover{background:var(--nt-azure-l)}
.nt-resource-item.selected{background:var(--nt-azure-l);border-left:3px solid var(--nt-azure)}
.nt-resource-item input[type=checkbox]{accent-color:var(--nt-azure);flex-shrink:0}
.nt-resource-item-name{font-size:12px;font-weight:500;flex:1}
.nt-resource-item-abbr{
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  color:var(--nt-azure);background:var(--nt-azure-l);
  padding:1px 6px;border-radius:4px;flex-shrink:0;
}
.nt-resource-item-meta{font-size:10px;color:var(--nt-faint)}
.nt-selected-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;min-height:28px}
.nt-chip {
  display:flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;
  background:var(--nt-azure-l);color:var(--nt-azure);
  border:1px solid rgba(0,120,212,.25);
  padding:3px 8px;border-radius:6px;
}
.nt-chip-x{
  font-size:13px;line-height:1;cursor:pointer;
  width:14px;height:14px;display:flex;align-items:center;justify-content:center;
  border-radius:3px;transition:background .12s;
}
.nt-chip-x:hover{background:rgba(0,120,212,.2)}

/* ── GENERATE BUTTON ── */
.nt-gen-btn {
  width:100%;padding:13px;
  background:linear-gradient(135deg,var(--nt-azure) 0%,#005fb3 100%);
  color:#fff;border:none;border-radius:10px;
  font-family:'IBM Plex Sans',sans-serif;font-size:14px;font-weight:600;
  cursor:pointer;transition:all .2s;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 4px 16px rgba(0,120,212,.3);
}
.nt-gen-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.nt-gen-btn:active{transform:translateY(0)}
.nt-gen-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ── PREVIEW CARD ── */
.nt-preview {
  background:var(--nt-surface2);border:1.5px solid var(--nt-border);
  border-radius:10px;padding:14px 16px;margin-bottom:16px;
}
.nt-preview-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--nt-faint);margin-bottom:6px}
.nt-preview-name{
  font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:600;
  color:var(--nt-azure);word-break:break-all;
}
.nt-preview-name.invalid{color:var(--nt-warn)}
.nt-preview-meta{display:flex;gap:12px;margin-top:6px;flex-wrap:wrap}
.nt-preview-meta span{font-size:10px;color:var(--nt-faint)}
.nt-validation-pill {
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-weight:600;padding:2px 8px;border-radius:6px;
  margin-left:8px;
}
.nt-pill-ok{background:rgba(16,124,16,.1);color:var(--nt-success);border:1px solid rgba(16,124,16,.2)}
.nt-pill-err{background:rgba(216,59,1,.1);color:var(--nt-warn);border:1px solid rgba(216,59,1,.2)}

/* ── RESULTS TABLE ── */
.nt-results-wrap{padding:24px 28px;max-width:1300px;margin:0 auto;width:100%}
.nt-results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.nt-results-title{font-family:'Syne',sans-serif;font-size:16px;font-weight:700;letter-spacing:-.02em}
.nt-results-actions{display:flex;gap:8px}
.nt-action-btn {
  display:flex;align-items:center;gap:5px;
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  padding:6px 12px;border-radius:7px;
  border:1.5px solid var(--nt-border);background:var(--nt-surface);
  color:var(--nt-muted);cursor:pointer;transition:all .15s;
}
.nt-action-btn:hover{border-color:var(--nt-azure);color:var(--nt-azure)}
.nt-results-table{
  background:var(--nt-surface);border:1px solid var(--nt-border);
  border-radius:12px;overflow:hidden;box-shadow:var(--nt-shadow);
}
.nt-results-table table{width:100%;border-collapse:collapse}
.nt-results-table thead th{
  background:var(--nt-surface2);font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--nt-muted);
  padding:10px 14px;text-align:left;border-bottom:1px solid var(--nt-border);
  white-space:nowrap;
}
.nt-results-table tbody tr{border-bottom:1px solid var(--nt-border2);transition:background .1s}
.nt-results-table tbody tr:last-child{border-bottom:none}
.nt-results-table tbody tr:hover{background:var(--nt-azure-l)}
.nt-results-table td{padding:10px 14px;font-size:12px;vertical-align:middle}
.nt-name-cell{
  font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;
  color:var(--nt-azure);
}
.nt-name-cell.invalid{color:var(--nt-warn)}
.nt-cat-pill{
  font-size:9px;font-weight:700;padding:2px 7px;border-radius:8px;
  white-space:nowrap;
}
.nt-copy-btn {
  width:28px;height:28px;border-radius:6px;
  border:1.5px solid var(--nt-border);background:var(--nt-surface);
  color:var(--nt-muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.nt-copy-btn:hover{border-color:var(--nt-azure);color:var(--nt-azure)}
.nt-copy-btn.copied{border-color:var(--nt-success);color:var(--nt-success)}
.nt-empty-results{text-align:center;padding:52px 20px;color:var(--nt-faint);font-size:12px;line-height:1.6}
.nt-empty-results svg{margin:0 auto 12px;display:block}

@keyframes ntToastIn {
  from{opacity:0;transform:translateX(-50%) translateY(10px)}
  to  {opacity:1;transform:translateX(-50%) translateY(0)}
}

/* ── SAVED NAMES ── */
.nt-saved-wrap{padding:24px 28px;max-width:1300px;margin:0 auto;width:100%}