/* =====================================================
   TOOLS — Premium Redesign
   ===================================================== */

/* ---- Hero ---- */
.nxt-hero-tools {
  position: relative;
  padding: 140px 0 80px;
  overflow: hidden;
  background: var(--nx-bg);
}
.nxt-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.nxt-hero-orb--1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(99,102,241,.18) 0%, transparent 70%);
  top: -100px; left: -100px;
}
.nxt-hero-orb--2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(168,85,247,.14) 0%, transparent 70%);
  bottom: -60px; right: -60px;
}
.nxt-hero-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.03em;
  margin-bottom: 18px;
}
.nxt-hero-sub {
  font-size: 17px;
  color: var(--nx-text-muted);
  max-width: 600px;
  margin: 0 auto 32px;
  line-height: 1.7;
}
.nxt-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.nxt-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--nx-text-muted);
}
.nxt-stat-pill i { color: #818cf8; }

/* ---- Filter bar ---- */
.nxt-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
}
.nxt-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  color: var(--nx-text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .22s;
}
.nxt-filter-btn:hover {
  border-color: rgba(99,102,241,.4);
  color: #a5b4fc;
  background: rgba(99,102,241,.06);
}
.nxt-filter-btn.active {
  background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(168,85,247,.12));
  border-color: rgba(99,102,241,.5);
  color: #c7d2fe;
}
.nxt-filter-count {
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
}
.nxt-filter-btn.active .nxt-filter-count {
  background: rgba(99,102,241,.3);
}

/* ---- Tool cards ---- */
.nxt-tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--nx-bg-2);
  border: 1px solid var(--nx-border);
  border-radius: 18px;
  padding: 28px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color .25s, transform .25s, box-shadow .25s;
  height: 100%;
}
.nxt-tool-card:hover {
  color: inherit;
  border-color: var(--tc, #6366f1);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
}
.nxt-tool-card-glow {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: radial-gradient(ellipse at 50% 0%, var(--tc,#6366f1) 0%, transparent 65%);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
  z-index: 0;
}
.nxt-tool-card:hover .nxt-tool-card-glow { opacity: .07; }
.nxt-tool-card > * { position: relative; z-index: 1; }

.nxt-tool-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}
.nxt-tool-card-icon {
  width: 52px; height: 52px;
  background: rgba(99,102,241,.12);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: var(--tc, #818cf8);
  border: 1px solid rgba(99,102,241,.2);
  flex-shrink: 0;
}
.nxt-tool-card-icon-green  { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.2);  color: #10b981; }
.nxt-tool-card-icon-amber  { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.2);  color: #f59e0b; }
.nxt-tool-card-icon-blue   { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.2);  color: #3b82f6; }
.nxt-tool-card-icon-pink   { background: rgba(236,72,153,.12); border-color: rgba(236,72,153,.2);  color: #ec4899; }

.nxt-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nxt-cat-badge-green  { background: rgba(16,185,129,.1);  color: #34d399; border: 1px solid rgba(16,185,129,.2); }
.nxt-cat-badge-amber  { background: rgba(245,158,11,.1);  color: #fbbf24; border: 1px solid rgba(245,158,11,.2); }
.nxt-cat-badge-blue   { background: rgba(59,130,246,.1);  color: #60a5fa; border: 1px solid rgba(59,130,246,.2); }
.nxt-cat-badge-pink   { background: rgba(236,72,153,.1);  color: #f472b6; border: 1px solid rgba(236,72,153,.2); }
.nxt-cat-badge-purple { background: rgba(99,102,241,.1);  color: #a5b4fc; border: 1px solid rgba(99,102,241,.2); }

.nxt-tool-card-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 10px;
  color: var(--nx-text);
}
.nxt-tool-card-desc {
  font-size: 13px;
  color: var(--nx-text-muted);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 22px;
}
.nxt-tool-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: gap .2s;
}
.nxt-tool-card-cta i { font-size: 18px; }
.nxt-tool-card:hover .nxt-tool-card-cta { gap: 8px; }
/* per-category CTA colors */
.nxt-cta-green  { color: #10b981; }
.nxt-cta-amber  { color: #f59e0b; }
.nxt-cta-blue   { color: #3b82f6; }
.nxt-cta-pink   { color: #ec4899; }
.nxt-cta-purple { color: #818cf8; }

/* ---- CTA Banner ---- */
.nxt-cta-banner {
  position: relative;
  background: var(--nx-bg-2);
  border: 1px solid var(--nx-border);
  border-radius: 20px;
  padding: 44px 48px;
  overflow: hidden;
}
@media(max-width:640px) { .nxt-cta-banner { padding: 32px 24px; } }
.nxt-cta-banner-orb {
  position: absolute;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(99,102,241,.12) 0%, transparent 70%);
  top: -80px; right: -60px;
  pointer-events: none;
}
.nxt-cta-banner-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 8px;
  position: relative;
}

/* ===================================================
   SINGLE TOOL PAGE
   =================================================== */
.nxt-breadcrumb {
  padding: 16px 0;
  border-bottom: 1px solid var(--nx-border);
  margin-top: 120px;
}
.nxt-breadcrumb .breadcrumb      { margin: 0; }
.nxt-breadcrumb .breadcrumb-item a { color: var(--nx-text-muted); text-decoration: none; font-size: 13px; }
.nxt-breadcrumb .breadcrumb-item a:hover { color: var(--nx-text); }
.nxt-breadcrumb .breadcrumb-item.active  { color: var(--nx-text); font-size: 13px; }
.nxt-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--nx-text-muted); }

.nxt-single-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
}
.nxt-single-icon {
  width: 64px; height: 64px; flex-shrink: 0;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.nxt-single-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
.nxt-single-desc {
  font-size: 14px;
  color: var(--nx-text-muted);
  margin: 0;
  line-height: 1.6;
}

/* ---- Calculator card ---- */
.nxt-calc-card {
  background: var(--nx-bg-2);
  border: 1px solid var(--nx-border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(0,0,0,.35);
  position: relative;
}
.nxt-calc-card-bar {
  height: 3px;
  width: 100%;
}
.nxt-calc-card-inner {
  padding: 32px 36px;
}
@media(max-width:640px) { .nxt-calc-card-inner { padding: 24px 20px; } }

/* ---- Form elements ---- */
.nx-calc-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nx-text-muted);
  margin-bottom: 8px;
}
.nx-calc-input {
  display: block; width: 100%;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--nx-text);
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 15px;
  font-family: var(--font-main);
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
  -webkit-appearance: none;
}
.nx-calc-input:focus {
  border-color: #6366f1;
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 0 3px rgba(99,102,241,.14);
}
.nx-calc-input option { background: #1a1d2e; color: #e2e8f0; }

/* Toggle group */
.nx-calc-toggle-group { display: flex; gap: 8px; flex-wrap: wrap; }
.nx-calc-toggle {
  flex: 1 1 auto;
  min-width: 110px;
  padding: 11px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  color: var(--nx-text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  text-align: center;
}
.nx-calc-toggle:hover {
  border-color: rgba(99,102,241,.4);
  color: #a5b4fc;
  background: rgba(99,102,241,.06);
}
.nx-calc-toggle.active {
  background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(168,85,247,.12));
  border-color: rgba(99,102,241,.5);
  color: #c7d2fe;
  box-shadow: 0 0 0 1px rgba(99,102,241,.2);
}

/* Info box */
.nx-calc-info {
  background: rgba(99,102,241,.07);
  border: 1px solid rgba(99,102,241,.18);
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 13px;
  color: var(--nx-text-muted);
  display: flex; gap: 10px; align-items: flex-start;
  line-height: 1.55;
}
.nx-calc-info i { color: #818cf8; flex-shrink: 0; margin-top: 1px; font-size: 14px; }

/* Button inside calc */
.nxt-calc-card .btn.nx-btn-primary {
  padding: 14px 24px;
  font-size: 15px;
  border-radius: 12px;
}

/* ---- Results ---- */
@keyframes nxtResultIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nx-calc-result {
  animation: nxtResultIn .3s cubic-bezier(.4,0,.2,1);
  padding-top: 4px;
}
.nx-calc-result-card {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--nx-border);
  border-radius: 14px;
  padding: 20px 14px;
  text-align: center;
}
.nx-calc-result-card--accent {
  background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(168,85,247,.08));
  border-color: rgba(99,102,241,.35);
}
.nx-calc-result-card--red {
  background: rgba(239,68,68,.07);
  border-color: rgba(239,68,68,.25);
}
.nx-calc-result-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--nx-text-muted);
  margin-bottom: 10px;
}
.nx-calc-result-val {
  font-size: 17px; font-weight: 800;
  color: #e2e8f0; letter-spacing: -.01em;
  word-break: break-word;
}
.nx-calc-result-card--accent .nx-calc-result-val {
  background: linear-gradient(135deg, #a5b4fc, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.nx-calc-result-big {
  font-size: 26px; font-weight: 800;
  background: linear-gradient(135deg, #a5b4fc, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.nx-calc-result-secondary {
  font-size: 13px; color: var(--nx-text-muted);
  text-align: center; padding: 12px 0 4px; font-weight: 500;
}

/* ---- Sidebar ---- */
.nxt-sidebar-sticky { position: sticky; top: 90px; }
.nxt-sidebar-card {
  background: var(--nx-bg-2);
  border: 1px solid var(--nx-border);
  border-radius: 16px;
  padding: 22px;
}
.nxt-sidebar-card-title {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--nx-text-muted);
  margin-bottom: 16px;
}
.nxt-share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  border: 1px solid rgba(255,255,255,.10);
  color: var(--nx-text-muted);
  background: transparent; transition: all .2s;
}
.nxt-share-x:hover    { border-color: rgba(255,255,255,.25); color: #fff; background: rgba(255,255,255,.06); }
.nxt-share-li:hover   { border-color: #0a66c2; color: #60a5fa; background: rgba(10,102,194,.08); }
.nxt-share-copy:hover { border-color: rgba(99,102,241,.4); color: #818cf8; background: rgba(99,102,241,.08); }

.nxt-sidebar-tool {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: 10px;
  text-decoration: none; color: var(--nx-text-muted);
  font-size: 13px; font-weight: 500;
  transition: all .18s; margin-bottom: 2px;
}
.nxt-sidebar-tool:hover { background: rgba(255,255,255,.04); color: var(--nx-text); }
.nxt-sidebar-tool-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.nxt-sidebar-tool-label { flex: 1; line-height: 1.3; }
.nxt-sidebar-tool-arrow { font-size: 13px; color: rgba(255,255,255,.15); transition: transform .18s, color .18s; }
.nxt-sidebar-tool:hover .nxt-sidebar-tool-arrow { transform: translateX(3px); color: var(--nx-text-muted); }

/* ---- Per-category colour helpers ---- */
/* Single tool icon */
.nxt-single-icon--cat-green  { background:rgba(16,185,129,.14); border:1px solid rgba(16,185,129,.25); color:#10b981; }
.nxt-single-icon--cat-amber  { background:rgba(245,158,11,.14); border:1px solid rgba(245,158,11,.25); color:#f59e0b; }
.nxt-single-icon--cat-blue   { background:rgba(59,130,246,.14); border:1px solid rgba(59,130,246,.25); color:#3b82f6; }
.nxt-single-icon--cat-pink   { background:rgba(236,72,153,.14); border:1px solid rgba(236,72,153,.25); color:#ec4899; }
.nxt-single-icon--cat-purple { background:rgba(99,102,241,.14); border:1px solid rgba(99,102,241,.25); color:#818cf8; }

/* Calc card top bar */
.nxt-calc-card-bar {
  height: 3px;
  width: 100%;
}
.nxt-calc-card-bar--cat-green  { background: linear-gradient(90deg,#10b981,#34d399); }
.nxt-calc-card-bar--cat-amber  { background: linear-gradient(90deg,#f59e0b,#fbbf24); }
.nxt-calc-card-bar--cat-blue   { background: linear-gradient(90deg,#3b82f6,#60a5fa); }
.nxt-calc-card-bar--cat-pink   { background: linear-gradient(90deg,#ec4899,#f472b6); }
.nxt-calc-card-bar--cat-purple { background: linear-gradient(90deg,#6366f1,#a855f7); }

/* Sidebar tool icons */
.nxt-sidebar-tool-icon-green  { background:rgba(16,185,129,.12); color:#10b981; }
.nxt-sidebar-tool-icon-amber  { background:rgba(245,158,11,.12); color:#f59e0b; }
.nxt-sidebar-tool-icon-blue   { background:rgba(59,130,246,.12); color:#3b82f6; }
.nxt-sidebar-tool-icon-pink   { background:rgba(236,72,153,.12); color:#ec4899; }
.nxt-sidebar-tool-icon-purple { background:rgba(99,102,241,.12); color:#818cf8; }

/* ===================================================
   AI TOOLS
   =================================================== */
.nxt-ai-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  background: linear-gradient(135deg,rgba(99,102,241,.15),rgba(168,85,247,.1));
  border: 1px solid rgba(99,102,241,.3);
  font-size: 12px; font-weight: 700; color: #a5b4fc;
}
.nxt-ai-result-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.nxt-ai-result-label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #818cf8;
  display: flex; align-items: center; gap: 6px;
}
.nxt-ai-copy-btn {
  background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.2);
  color: #818cf8; border-radius: 8px; padding: 6px 10px;
  cursor: pointer; font-size: 14px; transition: all .2s;
}
.nxt-ai-copy-btn:hover { background: rgba(99,102,241,.2); color: #a5b4fc; }
.nxt-ai-result-box {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(99,102,241,.2);
  border-radius: 12px; padding: 20px;
  font-size: 14px; line-height: 1.8; color: var(--nx-text);
  white-space: pre-wrap; min-height: 80px;
}
.nxt-ai-spinner {
  width: 40px; height: 40px; margin: 0 auto;
  border: 3px solid rgba(99,102,241,.2);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* purple icon variant (default) */
.nxt-tool-card-icon { color: #818cf8; }
.nxt-sidebar-tool-icon-purple { background: rgba(99,102,241,.12); color: #818cf8; }

/* ═══════════════════════════════════════════════
   NEW CATEGORY COLORS — developer / genel / medya
   ═══════════════════════════════════════════════ */

/* Violet (developer) */
.nxt-tool-card-icon-violet   { color:#8b5cf6; background:rgba(139,92,246,.12); }
.nxt-cat-badge-violet        { color:#8b5cf6; background:rgba(139,92,246,.12); border-color:rgba(139,92,246,.2); }
.nxt-cta-violet              { color:#8b5cf6; }
.nxt-cta-violet:hover        { background:rgba(139,92,246,.08); }
.nxt-calc-card-bar--cat-violet   { background:linear-gradient(90deg,#8b5cf6,#6d28d9); }
.nxt-single-icon--cat-violet { background:rgba(139,92,246,.12); color:#8b5cf6; }
.nxt-sidebar-tool-icon-violet{ color:#8b5cf6; background:rgba(139,92,246,.1); }

/* Cyan (genel) */
.nxt-tool-card-icon-cyan     { color:#06b6d4; background:rgba(6,182,212,.12); }
.nxt-cat-badge-cyan          { color:#06b6d4; background:rgba(6,182,212,.12); border-color:rgba(6,182,212,.2); }
.nxt-cta-cyan                { color:#06b6d4; }
.nxt-cta-cyan:hover          { background:rgba(6,182,212,.08); }
.nxt-calc-card-bar--cat-cyan { background:linear-gradient(90deg,#06b6d4,#0891b2); }
.nxt-single-icon--cat-cyan   { background:rgba(6,182,212,.12); color:#06b6d4; }
.nxt-sidebar-tool-icon-cyan  { color:#06b6d4; background:rgba(6,182,212,.1); }

/* Orange (medya) */
.nxt-tool-card-icon-orange   { color:#f97316; background:rgba(249,115,22,.12); }
.nxt-cat-badge-orange        { color:#f97316; background:rgba(249,115,22,.12); border-color:rgba(249,115,22,.2); }
.nxt-cta-orange              { color:#f97316; }
.nxt-cta-orange:hover        { background:rgba(249,115,22,.08); }
.nxt-calc-card-bar--cat-orange { background:linear-gradient(90deg,#f97316,#ea580c); }
.nxt-single-icon--cat-orange { background:rgba(249,115,22,.12); color:#f97316; }
.nxt-sidebar-tool-icon-orange{ color:#f97316; background:rgba(249,115,22,.1); }

/* ═══════════════════════════════════════════════
   DEVELOPER TOOL UTILITIES
   ═══════════════════════════════════════════════ */
.nxt-mono { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.82rem; line-height:1.6; }
.nxt-dev-textarea { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.82rem; line-height:1.6; resize:vertical; min-height:140px; }
.nxt-dev-output { background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:14px 16px; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.82rem; line-height:1.7; white-space:pre-wrap; word-break:break-all; position:relative; }
.nxt-dev-badge { display:inline-flex; align-items:center; gap:6px; font-size:.75rem; font-weight:600; padding:4px 12px; border-radius:20px; margin-bottom:8px; }
.nxt-dev-badge-ok  { background:rgba(16,185,129,.15); color:#10b981; }
.nxt-dev-badge-err { background:rgba(239,68,68,.15);  color:#ef4444; }
.nxt-tool-btn-group { display:flex; gap:8px; flex-wrap:wrap; }
.nxt-out-copy { position:absolute; top:10px; right:10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.6); border-radius:6px; padding:4px 10px; font-size:.75rem; cursor:pointer; transition:.2s; }
.nxt-out-copy:hover { background:rgba(255,255,255,.14); color:#fff; }

/* Color converter */
.nxt-color-swatch { width:100%; height:80px; border-radius:12px; border:1px solid rgba(255,255,255,.1); transition:background .2s; }
.nxt-color-row { display:flex; align-items:center; gap:10px; padding:10px 14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:10px; margin-bottom:8px; }
.nxt-color-row-label { font-size:.72rem; color:rgba(255,255,255,.4); width:52px; flex-shrink:0; }
.nxt-color-row-value { font-family:"JetBrains Mono",monospace; font-size:.85rem; flex:1; }
.nxt-color-row-copy { background:none; border:none; color:rgba(255,255,255,.4); cursor:pointer; padding:4px 8px; border-radius:6px; transition:.15s; }
.nxt-color-row-copy:hover { color:#fff; background:rgba(255,255,255,.08); }

/* Strength bar */
.nxt-strength-bar { height:6px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:8px; }
.nxt-strength-fill { height:100%; border-radius:3px; transition:width .3s, background .3s; }

/* Drop zone */
.nxt-drop-zone { border:2px dashed rgba(255,255,255,.15); border-radius:14px; padding:40px 20px; text-align:center; cursor:pointer; transition:.2s; background:rgba(255,255,255,.02); }
.nxt-drop-zone:hover,.nxt-drop-zone.drag-over { border-color:rgba(139,92,246,.5); background:rgba(139,92,246,.06); }
.nxt-drop-zone input[type=file] { display:none; }

/* Image preview pair */
.nxt-img-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:576px){ .nxt-img-pair { grid-template-columns:1fr; } }
.nxt-img-preview { border-radius:10px; overflow:hidden; background:rgba(0,0,0,.3); text-align:center; padding:8px; }
.nxt-img-preview img { max-width:100%; max-height:180px; object-fit:contain; border-radius:6px; }
.nxt-img-preview-label { font-size:.72rem; color:rgba(255,255,255,.4); margin-top:6px; }

/* QR / Barcode wrapper */
.nxt-qr-wrap { display:flex; justify-content:center; padding:20px; background:rgba(255,255,255,.97); border-radius:14px; min-height:180px; align-items:center; }
.nxt-qr-wrap canvas,.nxt-qr-wrap svg { max-width:100%; }

/* Cron */
.nxt-cron-fields { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
@media(max-width:576px){ .nxt-cron-fields { grid-template-columns:repeat(2,1fr); } }
.nxt-cron-expr { font-family:"JetBrains Mono",monospace; font-size:1.3rem; font-weight:700; letter-spacing:2px; color:#8b5cf6; text-align:center; padding:16px; background:rgba(139,92,246,.08); border-radius:12px; border:1px solid rgba(139,92,246,.2); word-break:break-all; }

/* Regex highlight */
.nxt-regex-match { background:rgba(251,191,36,.25); color:#fbbf24; border-radius:3px; padding:1px 2px; }
.nxt-regex-preview { font-family:"JetBrains Mono",monospace; font-size:.85rem; background:rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:14px; line-height:1.8; word-break:break-word; white-space:pre-wrap; min-height:80px; }

/* JWT parts */
.nxt-jwt-part { border-radius:12px; padding:16px; margin-bottom:12px; }
.nxt-jwt-part-header  { background:rgba(239,68,68,.08);  border:1px solid rgba(239,68,68,.2); }
.nxt-jwt-part-payload { background:rgba(139,92,246,.08); border:1px solid rgba(139,92,246,.2); }
.nxt-jwt-part-sig     { background:rgba(6,182,212,.08);  border:1px solid rgba(6,182,212,.2); }
.nxt-jwt-part-title { font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin-bottom:10px; }
.nxt-jwt-part-header  .nxt-jwt-part-title { color:#ef4444; }
.nxt-jwt-part-payload .nxt-jwt-part-title { color:#8b5cf6; }
.nxt-jwt-part-sig     .nxt-jwt-part-title { color:#06b6d4; }

/* UUID list */
.nxt-uuid-list { display:flex; flex-direction:column; gap:6px; max-height:320px; overflow-y:auto; }
.nxt-uuid-row { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.04); border-radius:8px; padding:8px 12px; }
.nxt-uuid-val { font-family:"JetBrains Mono",monospace; font-size:.82rem; flex:1; word-break:break-all; }

/* Favicon previews */
.nxt-fav-previews { display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; }
.nxt-fav-size { text-align:center; }
.nxt-fav-size canvas { display:block; image-rendering:pixelated; border-radius:4px; border:1px solid rgba(255,255,255,.1); }
.nxt-fav-size-label { font-size:.7rem; color:rgba(255,255,255,.4); margin-top:4px; }

/* Rose (css category) */
.nxt-tool-card-icon-rose    { color:#f43f5e; background:rgba(244,63,94,.12); }
.nxt-cat-badge-rose         { color:#f43f5e; background:rgba(244,63,94,.12); border-color:rgba(244,63,94,.2); }
.nxt-cta-rose               { color:#f43f5e; }
.nxt-cta-rose:hover         { background:rgba(244,63,94,.08); }
.nxt-calc-card-bar--cat-rose  { background:linear-gradient(90deg,#f43f5e,#e11d48); }
.nxt-single-icon--cat-rose  { background:rgba(244,63,94,.12); color:#f43f5e; }
.nxt-sidebar-tool-icon-rose { color:#f43f5e; background:rgba(244,63,94,.1); }

/* CSS tool live preview boxes */
.nxt-css-preview {
    border-radius:16px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:140px;
    background:repeating-conic-gradient(rgba(255,255,255,.04) 0% 25%, transparent 0% 50%) 0 0/24px 24px;
    border:1px solid rgba(255,255,255,.07);
}
.nxt-css-preview-box {
    width:120px;
    height:80px;
    border-radius:12px;
    background:#5865f2;
}
.nxt-css-preview-card {
    width:180px;
    padding:20px;
    border-radius:16px;
    font-size:.85rem;
    background:rgba(255,255,255,.08);
}
.nxt-stop-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.nxt-stop-row input[type=color] { width:40px; height:34px; border:none; background:none; cursor:pointer; padding:0; }
.nxt-stop-row input[type=range]{ flex:1; }
.nxt-stop-row .nxt-stop-pos { font-size:.8rem; color:rgba(255,255,255,.5); width:36px; text-align:right; }
.nxt-shadow-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:10px; background:rgba(255,255,255,.04); border-radius:10px; margin-bottom:8px; }

/* bezier canvas */
.nxt-bezier-wrap { background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.08); border-radius:12px; overflow:hidden; }
.nxt-bezier-wrap canvas { display:block; width:100%; }

/* loader preview area */
.nxt-loader-stage { display:flex; align-items:center; justify-content:center; min-height:120px; }

/* JSON tree */
.nxt-tree { font-family:"JetBrains Mono",monospace; font-size:.82rem; line-height:1.8; }
.nxt-tree-item { padding-left:20px; position:relative; }
.nxt-tree-toggle { cursor:pointer; user-select:none; color:#8b5cf6; }
.nxt-tree-toggle::before { content:"▾ "; }
.nxt-tree-toggle.collapsed::before { content:"▸ "; }
.nxt-tree-key   { color:#f59e0b; }
.nxt-tree-str   { color:#10b981; }
.nxt-tree-num   { color:#60a5fa; }
.nxt-tree-bool  { color:#f43f5e; }
.nxt-tree-null  { color:rgba(255,255,255,.3); }
.nxt-tree-children { border-left:1px solid rgba(255,255,255,.1); margin-left:8px; }

/* color shades */
.nxt-shade-grid { display:grid; grid-template-columns:repeat(11,1fr); gap:4px; }
.nxt-shade-cell { border-radius:8px; aspect-ratio:1; cursor:pointer; position:relative; }
.nxt-shade-cell:hover::after { content:attr(data-hex); position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%); background:#1e1e2e; color:#fff; font-size:.65rem; padding:2px 6px; border-radius:4px; white-space:nowrap; font-family:"JetBrains Mono",monospace; pointer-events:none; z-index:10; }

/* blob preview */
.nxt-blob-wrap { display:flex; align-items:center; justify-content:center; min-height:220px; background:repeating-conic-gradient(rgba(255,255,255,.04) 0% 25%, transparent 0% 50%) 0 0/24px 24px; border:1px solid rgba(255,255,255,.07); border-radius:16px; }

/* OG preview card */
.nxt-og-card { border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); }
.nxt-og-card-img { height:180px; background:linear-gradient(135deg,#5865f2,#7c5cf0); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.3); font-size:.85rem; }
.nxt-og-card-img img { width:100%; height:100%; object-fit:cover; }
.nxt-og-card-body { padding:14px; }
.nxt-og-card-domain { font-size:.72rem; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.05em; }
.nxt-og-card-title { font-weight:600; font-size:.95rem; margin:4px 0; }
.nxt-og-card-desc { font-size:.8rem; color:rgba(255,255,255,.5); }

/* code-to-image canvas container */
.nxt-c2i-wrap { background:#1e1e2e; border-radius:14px; overflow:hidden; padding:8px; }
.nxt-c2i-wrap canvas { display:block; max-width:100%; border-radius:8px; }

/* ---- extra utilities for new tools ---- */
.nxt-tool-btn-group { display:flex; flex-wrap:wrap; gap:6px; }
.nxt-tree-root { font-family:"JetBrains Mono",monospace; font-size:.82rem; line-height:1.9; padding:10px 6px; overflow-x:auto; }
.nxt-tree-node { padding-left:20px; position:relative; }
.nxt-tree-toggle { cursor:pointer; user-select:none; margin-right:4px; font-size:.8em; color:#8b5cf6; }
.nxt-tree-key { color:#f59e0b; }
.nxt-tree-count { color:rgba(255,255,255,.35); font-size:.8em; }
.nxt-tree-children { border-left:1px solid rgba(255,255,255,.1); padding-left:14px; }
.nxt-tree-val-string  { color:#10b981; }
.nxt-tree-val-number  { color:#60a5fa; }
.nxt-tree-val-boolean { color:#f43f5e; }
.nxt-tree-val-null    { color:rgba(255,255,255,.3); }
.nxt-shade-cell { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:1px; padding-bottom:4px; }

/* ── TEAL (Dönüşüm) category ───────────────────────────────── */
.nxt-tool-card-icon-teal  { background: rgba(20,184,166,.15); color: #14b8a6; }
.nxt-cat-badge-teal       { background: rgba(20,184,166,.12); color: #2dd4bf; }
.nxt-cta-teal             { color: #14b8a6; }
.nxt-cta-teal:hover       { color: #2dd4bf; }
.cat-teal .nxt-tool-single-icon { background:rgba(20,184,166,.15); color:#14b8a6; }
.nxt-sidebar-tool-icon-teal     { background:rgba(20,184,166,.12); color:#2dd4bf; }
.nxt-cta-btn-teal { background:linear-gradient(135deg,#14b8a6,#0d9488); color:#fff; border:none; border-radius:10px; }
.nxt-cta-btn-teal:hover { background:linear-gradient(135deg,#0d9488,#0f766e); color:#fff; }

/* diff viewer */
.nxt-diff-add { background:rgba(16,185,129,.15); border-left:3px solid #10b981; padding:2px 8px; }
.nxt-diff-rem { background:rgba(244,63,94,.15);  border-left:3px solid #f43f5e;  padding:2px 8px; }
.nxt-diff-eql { padding:2px 8px; opacity:.55; }