/* ============================================================
   NEXUS PRODUCTIVITY HUB — Shared Design System
   Used by: index.html + all tool pages
   ============================================================ */

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── ROOT VARS ── */
:root {
  --cyan:     #00f5e4;
  --violet:   #a855f7;
  --emerald:  #00ffaa;
  --amber:    #ffb800;
  --rose:     #ff4d6d;
  --sky:      #38bdf8;

  --base:     #0d0f14;
  --base-50:  #141720;
  --base-100: #1a1d27;
  --base-200: #1f2330;
  --base-300: #252938;

  --text:        #e2e8f0;
  --text-muted:  rgba(148,163,184,0.7);
  --border:      rgba(255,255,255,0.07);
  --border-h:    rgba(255,255,255,0.14);
}

/* ── GLOBAL ── */
html { scroll-behavior: smooth; }
body {
  background: var(--base);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--base); }
::-webkit-scrollbar-thumb { background: var(--base-300); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* ── NOISE TEXTURE ── */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.032'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none; z-index: 0;
}

/* ── AMBIENT BLOBS ── */
.ambient-blob {
  position: fixed; border-radius: 50%;
  filter: blur(120px); opacity: 0.07;
  pointer-events: none; z-index: 0;
  animation: blobFloat 14s ease-in-out infinite alternate;
}
.blob-1 { width:600px;height:600px;background:var(--cyan);    top:-200px;left:-200px; }
.blob-2 { width:500px;height:500px;background:var(--violet);  bottom:-200px;right:-150px;animation-delay:-5s; }
.blob-3 { width:400px;height:400px;background:var(--emerald); top:40%;left:30%;opacity:0.04;animation-delay:-9s; }
@keyframes blobFloat {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(30px,-20px) scale(1.08); }
  100% { transform: translate(-20px,30px) scale(0.95); }
}

/* ── GRADIENT TEXT ── */
.grad-cyan   { background: linear-gradient(135deg,var(--cyan),#60efff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-violet { background: linear-gradient(135deg,var(--violet),#e879f9); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-emerald{ background: linear-gradient(135deg,var(--emerald),#60efff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-amber  { background: linear-gradient(135deg,var(--amber),#ff6b35); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-rose   { background: linear-gradient(135deg,var(--rose),#ff9a3c); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-sky    { background: linear-gradient(135deg,var(--sky),var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-multi  { background: linear-gradient(135deg,var(--cyan) 0%,var(--violet) 50%,var(--emerald) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ── GLASS PANEL ── */
.glass {
  background: rgba(20,23,32,0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 18px;
}
.glass-sm {
  background: rgba(20,23,32,0.8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* ── STATUS TAGS ── */
.tag { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:0.62rem;font-family:'DM Mono',monospace;letter-spacing:0.06em;text-transform:uppercase; }
.tag .dot { width:5px;height:5px;border-radius:50%;background:currentColor; }
.tag-live    { background:rgba(0,255,170,0.1);  color:var(--emerald); border:1px solid rgba(0,255,170,0.2); }
.tag-live .dot { animation:pulse 1.5s ease-in-out infinite; }
.tag-new     { background:rgba(0,245,228,0.1);  color:var(--cyan);    border:1px solid rgba(0,245,228,0.2); }
.tag-pro     { background:rgba(255,184,0,0.1);  color:var(--amber);   border:1px solid rgba(255,184,0,0.2); }
.tag-free    { background:rgba(0,255,170,0.08); color:var(--emerald); border:1px solid rgba(0,255,170,0.15); }

/* ── ICON BADGE ── */
.icon-badge {
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;
  background:rgba(var(--acc-rgb,0,245,228),0.1);
  border:1px solid rgba(var(--acc-rgb,0,245,228),0.2);
  color:var(--acc,var(--cyan));
  transition:all 0.3s;
  flex-shrink:0;
}

/* ── BUTTONS ── */
.btn-primary {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 22px;border-radius:11px;
  background:linear-gradient(135deg,var(--acc,var(--cyan)) 0%,color-mix(in srgb,var(--acc,var(--cyan)) 60%,var(--violet)) 100%);
  color:var(--base);font-family:'DM Mono',monospace;font-size:0.78rem;font-weight:600;
  letter-spacing:0.04em;cursor:pointer;border:none;
  transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:0 0 24px rgba(var(--acc-rgb,0,245,228),0.3);
}
.btn-primary:hover { transform:translateY(-2px) scale(1.03); box-shadow:0 0 36px rgba(var(--acc-rgb,0,245,228),0.5); }
.btn-primary:active { transform:scale(0.97); }

.btn-ghost {
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 18px;border-radius:10px;
  border:1px solid rgba(var(--acc-rgb,0,245,228),0.25);
  background:rgba(var(--acc-rgb,0,245,228),0.06);
  color:var(--acc,var(--cyan));
  font-family:'DM Mono',monospace;font-size:0.72rem;letter-spacing:0.04em;
  cursor:pointer;
  transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.btn-ghost:hover { background:rgba(var(--acc-rgb,0,245,228),0.14); border-color:rgba(var(--acc-rgb,0,245,228),0.5); transform:translateY(-1px); box-shadow:0 0 18px rgba(var(--acc-rgb,0,245,228),0.18); }
.btn-ghost:active { transform:scale(0.97); }

.btn-icon {
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:9px;
  border:1px solid var(--border);background:rgba(255,255,255,0.04);
  color:var(--text-muted);cursor:pointer;
  transition:all 0.2s;
}
.btn-icon:hover { border-color:var(--border-h);background:rgba(255,255,255,0.08);color:var(--text); }

/* ── FORM INPUTS ── */
.input-field {
  width:100%;padding:10px 14px;border-radius:10px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);color:var(--text);
  font-family:'DM Mono',monospace;font-size:0.82rem;
  outline:none;transition:all 0.25s;
}
.input-field:focus {
  background:rgba(255,255,255,0.06);
  border-color:rgba(var(--acc-rgb,0,245,228),0.4);
  box-shadow:0 0 0 3px rgba(var(--acc-rgb,0,245,228),0.08);
}
.input-field::placeholder { color:var(--text-muted); }

textarea.input-field { resize:vertical; min-height:120px; font-family:'DM Mono',monospace; }

.input-label {
  display:block;margin-bottom:6px;
  font-family:'DM Mono',monospace;font-size:0.65rem;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);
}

/* ── CHECKBOX / TOGGLE ── */
.toggle {
  position:relative;width:44px;height:24px;
  background:rgba(255,255,255,0.08);border-radius:99px;
  border:1px solid var(--border);cursor:pointer;
  transition:all 0.3s;flex-shrink:0;
}
.toggle.on { background:rgba(var(--acc-rgb,0,245,228),0.3);border-color:rgba(var(--acc-rgb,0,245,228),0.5); }
.toggle::after {
  content:'';position:absolute;top:3px;left:3px;
  width:16px;height:16px;border-radius:50%;
  background:var(--text-muted);transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.toggle.on::after { left:23px;background:var(--acc,var(--cyan));box-shadow:0 0 8px rgba(var(--acc-rgb,0,245,228),0.6); }

/* ── RANGE SLIDER ── */
input[type=range] {
  -webkit-appearance:none;width:100%;height:4px;
  background:rgba(255,255,255,0.08);border-radius:99px;outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none;width:18px;height:18px;
  border-radius:50%;background:var(--acc,var(--cyan));
  box-shadow:0 0 10px rgba(var(--acc-rgb,0,245,228),0.5);
  transition:transform 0.2s;
}
input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.2); }

/* ── PROGRESS BAR ── */
.progress-track { height:4px;border-radius:99px;background:rgba(255,255,255,0.06);overflow:hidden; }
.progress-fill  { height:100%;border-radius:99px;background:linear-gradient(90deg,var(--acc,var(--cyan)),rgba(var(--acc-rgb,0,245,228),0.5));box-shadow:0 0 8px rgba(var(--acc-rgb,0,245,228),0.4);transition:width 0.8s cubic-bezier(0.4,0,0.2,1); }

/* ── KBD ── */
.kbd { background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-bottom-width:2px;border-radius:5px;font-family:'DM Mono',monospace;font-size:0.65rem;letter-spacing:0.02em;padding:2px 6px;color:var(--text-muted); }

/* ── SECTION DIVIDER ── */
.section-label { font-family:'DM Mono',monospace;font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);display:flex;align-items:center;gap:10px; }
.section-label::after { content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent); }

/* ── TOOLTIP ── */
[data-tooltip] { position:relative; }
[data-tooltip]::before {
  content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(4px);
  background:rgba(26,29,39,0.96);border:1px solid var(--border-h);
  color:#cbd5e1;font-family:'DM Mono',monospace;font-size:0.65rem;letter-spacing:0.04em;
  padding:5px 10px;border-radius:7px;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity 0.2s,transform 0.2s;z-index:999;backdrop-filter:blur(8px);
}
[data-tooltip]:hover::before { opacity:1;transform:translateX(-50%) translateY(0); }

/* ── COPY SUCCESS FLASH ── */
@keyframes copyFlash {
  0%   { background:rgba(0,255,170,0.3); }
  100% { background:transparent; }
}
.copy-flash { animation:copyFlash 0.5s ease-out; }

/* ── TOAST ── */
.toast {
  position:fixed;bottom:24px;right:24px;z-index:9999;
  background:rgba(20,23,32,0.95);backdrop-filter:blur(16px);
  border:1px solid rgba(0,245,228,0.3);border-radius:14px;
  padding:14px 20px;display:flex;align-items:center;gap:12px;
  box-shadow:0 20px 40px rgba(0,0,0,0.4),0 0 30px rgba(0,245,228,0.06);
  transform:translateY(80px) scale(0.95);opacity:0;
  transition:all 0.4s cubic-bezier(0.34,1.3,0.64,1);
  pointer-events:none;min-width:240px;max-width:340px;
}
.toast.show { transform:translateY(0) scale(1);opacity:1;pointer-events:all; }

/* ── TOOL PAGE HEADER ── */
.tool-header {
  position:sticky;top:0;z-index:100;
  background:rgba(13,15,20,0.88);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
  padding:0 24px;height:60px;
  display:flex;align-items:center;gap:14px;
}

/* ── RESULT BOX ── */
.result-box {
  background:rgba(255,255,255,0.03);border:1px solid var(--border);
  border-radius:12px;padding:16px;
  font-family:'DM Mono',monospace;font-size:0.82rem;
  color:var(--text);line-height:1.7;word-break:break-all;
  min-height:60px;transition:border-color 0.3s;
}
.result-box.highlight { border-color:rgba(0,245,228,0.4);box-shadow:0 0 0 3px rgba(0,245,228,0.06); }

/* ── ANIMATIONS ── */
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:0.6} }
@keyframes spin   { from{transform:rotate(0deg)}to{transform:rotate(360deg)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)} }
@keyframes scaleIn{ from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)} }

.animate-fade-up  { animation:fadeUp  0.5s cubic-bezier(0.34,1.2,0.64,1) both; }
.animate-scale-in { animation:scaleIn 0.4s cubic-bezier(0.34,1.2,0.64,1) both; }

/* ── RESPONSIVE UTILITY ── */
@media (max-width:768px) {
  .hide-mobile { display:none !important; }
}
@media (min-width:769px) {
  .show-mobile-only { display:none !important; }
}