/* Neun Flow Central UI — shared design system (no build step required) */
:root{
  /* Typography */
  --nf-font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  --nf-font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Core palette */
  --nf-bg: #E2E8F0;          /* slate-200 */
  --nf-surface: #FFFFFF;
  --nf-surface-2: #F8FAFC;   /* slate-50 */
  --nf-border: #E2E8F0;      /* slate-200 */
  --nf-text: #0F172A;        /* slate-900 */
  --nf-text-2: #334155;      /* slate-700 */
  --nf-muted: #64748B;       /* slate-500 */
  --nf-muted-2: #94A3B8;     /* slate-400 */

  /* Brand */
  --nf-primary: #2563EB;     /* blue-600 */
  --nf-primary-700: #1D4ED8; /* blue-700 */
  --nf-primary-100: #EEF4FF;
  --nf-primary-200: #BFDBFE;
  --nf-teal: #0891B2;
  --nf-violet: #7C3AED;
  --nf-success: #16A34A;
  --nf-warning: #F59E0B;
  --nf-danger: #EF4444;

  /* Radius + shadow */
  --nf-radius-sm: 12px;
  --nf-radius: 16px;
  --nf-radius-lg: 24px;
  --nf-shadow-sm: 0 2px 12px rgba(15,23,42,.04);
  --nf-shadow: 0 8px 30px rgba(15,23,42,.10);
  --nf-ring: 0 0 0 4px rgba(37,99,235,.12);
}

*{ box-sizing:border-box; }
html{ text-rendering:optimizeLegibility; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--nf-font-sans);
  background:var(--nf-bg);
  color:var(--nf-text);
}
img{ max-width:100%; height:auto; }
a{ color:inherit; }

/* Legacy class aliases (used in existing Blade views) */
.font-mono-pa{ font-family:var(--nf-font-mono); }
.hide-scrollbar::-webkit-scrollbar{ display:none; }
.hide-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }
.grad-text{ /* old */
  background: linear-gradient(135deg, #1d4ed8, #0891b2);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.grad-text-on-dark{
  background: linear-gradient(135deg, #93c5fd, #22d3ee);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.grad-text-blue{
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-section{ background: var(--nf-bg); }
.hero-section.nf-hero-bg{ background: var(--nf-bg); }
.hero-section{
  background:
    radial-gradient(ellipse 90% 70% at 50% -5%, rgba(37, 99, 235, 0.12) 0%, transparent 58%),
    radial-gradient(ellipse 55% 50% at 92% 45%, rgba(8, 145, 178, 0.10) 0%, transparent 52%),
    radial-gradient(ellipse 45% 55% at 6% 85%, rgba(124, 58, 237, 0.06) 0%, transparent 50%),
    var(--nf-bg);
}
.section-divider{
  height:1px;
  background: linear-gradient(90deg, transparent, #cbd5e1, transparent);
}
@keyframes nf-pulse-dot{
  0%, 100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.6; transform:scale(1.5); }
}
.live-dot{ animation: nf-pulse-dot 2s ease-in-out infinite; }
.nav-link{ position:relative; }
.nav-link::after{
  content:'';
  position:absolute;
  bottom:-4px; left:0; right:0;
  height:2px;
  background: linear-gradient(90deg, var(--nf-primary), var(--nf-teal));
  border-radius:2px;
  transform:scaleX(0);
  transition: transform .25s ease;
}
.nav-link:hover::after{ transform:scaleX(1); }
.search-wrap:focus-within{
  box-shadow: 0 0 0 3px rgba(37,99,235,.20), 0 16px 48px rgba(15,23,42,.08);
}
.agent-card{
  background:#fff;
  border:1px solid var(--nf-border);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.agent-card:hover{
  border-color: var(--nf-primary-200);
  box-shadow: 0 8px 30px rgba(37,99,235,.12);
  transform: translateY(-3px);
}
.prop-card-wrap{
  background:#fff;
  border:1px solid var(--nf-border);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.prop-card-wrap:hover{
  border-color: var(--nf-primary-200);
  box-shadow: 0 20px 50px rgba(15,23,42,.10), 0 4px 16px rgba(37,99,235,.06);
  transform: translateY(-4px);
}
.prop-img{ transition: transform .6s cubic-bezier(.4,0,.2,1); }
.prop-card-wrap:hover .prop-img{ transform: scale(1.05); }
.tag-pill{
  background:#fff;
  border: 1.5px solid var(--nf-border);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.tag-pill:hover{
  background: var(--nf-primary-100);
  border-color: var(--nf-primary-200);
  color: var(--nf-primary-700);
}
.stat-card{
  background:#fff;
  border: 1px solid var(--nf-border);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* Layout helpers */
.nf-container{ max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.nf-page{ min-height: calc(100vh - 72px); }

/* Text helpers */
.nf-muted{ color:var(--nf-muted); }
.nf-muted-2{ color:var(--nf-muted-2); }
.nf-mono{ font-family:var(--nf-font-mono); }

/* Effects */
.nf-grad-text{
  background: linear-gradient(135deg, #1d4ed8, #0891b2);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.nf-hero-bg{
  background:
    radial-gradient(ellipse 90% 70% at 50% -5%, rgba(37, 99, 235, 0.12) 0%, transparent 58%),
    radial-gradient(ellipse 55% 50% at 92% 45%, rgba(8, 145, 178, 0.10) 0%, transparent 52%),
    radial-gradient(ellipse 45% 55% at 6% 85%, rgba(124, 58, 237, 0.06) 0%, transparent 50%),
    var(--nf-bg);
}

/* Cards */
.nf-card{
  background:var(--nf-surface);
  border:1px solid var(--nf-border);
  border-radius:var(--nf-radius-lg);
  box-shadow:var(--nf-shadow-sm);
}
.nf-card-hover{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.nf-card-hover:hover{
  transform: translateY(-3px);
  border-color: var(--nf-primary-200);
  box-shadow: 0 20px 50px rgba(15,23,42,.10), 0 4px 16px rgba(37,99,235,.06);
}

/* Buttons */
.nf-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-weight: 800;
  font-size: 14px;
  text-decoration:none;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.nf-btn:active{ transform: translateY(1px); }
.nf-btn-primary{
  background: linear-gradient(135deg, var(--nf-primary), var(--nf-primary-700));
  color:#fff;
  box-shadow: 0 12px 32px rgba(37,99,235,.25);
}
.nf-btn-primary:hover{ box-shadow: 0 16px 42px rgba(37,99,235,.32); transform: translateY(-1px); }
.nf-btn-soft{
  background: var(--nf-primary-100);
  color: var(--nf-primary-700);
  border-color: var(--nf-primary-200);
}
.nf-btn-ghost{
  background: rgba(255,255,255,.14);
  color:#fff;
  border-color: rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
}
.nf-btn-ghost:hover{ background: rgba(255,255,255,.22); }

/* Inputs */
.nf-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size: 12px;
  font-weight: 800;
  color: var(--nf-text-2);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.nf-input, .nf-select, .nf-textarea{
  width:100%;
  padding: 14px 16px;
  border-radius: 16px;
  border: 2px solid var(--nf-border);
  background: #fff;
  font-size: 15px;
  color: var(--nf-text);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.nf-input:focus, .nf-select:focus, .nf-textarea:focus{
  border-color: #3b82f6;
  box-shadow: var(--nf-ring);
}
.nf-input::placeholder, .nf-textarea::placeholder{ color: #CBD5E1; }

/* Existing central auth/settings component classes (kept for consistency) */
.pa-field{ margin-bottom: 18px; }
.pa-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size: 12px;
  font-weight: 800;
  color: var(--nf-text-2);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.pa-input{
  width:100%;
  padding: 14px 18px;
  border-radius: 16px;
  border: 2px solid var(--nf-border);
  background: #fff;
  font-size: 15px;
  color: var(--nf-text);
  font-family: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  outline: none;
}
.pa-input:focus{ border-color: #3b82f6; box-shadow: var(--nf-ring); }
.pa-input::placeholder{ color:#CBD5E1; }
.pa-btn{
  width:100%;
  padding: 16px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--nf-primary), var(--nf-primary-700));
  color:#fff;
  font-family: inherit;
  font-weight: 900;
  font-size: 16px;
  cursor:pointer;
  letter-spacing: .02em;
  box-shadow: 0 12px 32px rgba(37,99,235,.30);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.pa-btn:hover{ transform: translateY(-1px); box-shadow: 0 16px 42px rgba(37,99,235,.38); }
.pa-btn:active{ transform: translateY(1px); }

/* Auth / forms: leading icon inside .pa-input */
.nf-input-icon-wrap{
  position: relative;
  display: block;
}
.nf-input-icon-wrap > .nf-input-icon{
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  color: var(--nf-muted-2);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .2s ease;
}
.nf-input-icon-wrap > .nf-input-icon svg{
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.nf-input-icon-wrap .pa-input{
  padding-left: 50px;
}
.nf-input-icon-wrap:focus-within > .nf-input-icon{
  color: var(--nf-primary);
}
.nf-input-icon-wrap--error > .nf-input-icon{
  color: var(--nf-danger);
}

.sf-label{
  font-size: 12px;
  font-weight: 800;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 9px;
  display:block;
}
.sf-input{
  width:100%;
  padding: 14px 18px;
  border-radius: 16px;
  border: 2px solid var(--nf-border);
  background: var(--nf-surface-2);
  font-size: 15px;
  color: var(--nf-text);
  font-family: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  outline: none;
}
.sf-input:focus{ border-color: var(--nf-primary); background:#fff; box-shadow: var(--nf-ring); }
.sf-input::placeholder{ color:#CBD5E1; }
.sf-input:disabled{ background: #F8FAFC; color: var(--nf-muted-2); cursor:not-allowed; }
.sf-btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 13px 22px;
  border: none;
  border-radius: 14px;
  font-family: inherit;
  font-weight: 900;
  font-size: 15px;
  cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.sf-btn-primary{ background: var(--nf-primary); color:#fff; box-shadow: 0 8px 24px rgba(37,99,235,.22); }
.sf-btn-primary:hover{ background: var(--nf-primary-700); transform: translateY(-1px); box-shadow: 0 12px 32px rgba(37,99,235,.30); }
.sf-btn-danger{ background:#FEF2F2; color:#DC2626; border: 2px solid #FECACA; }
.sf-btn-danger:hover{ background:#FEE2E2; }

/* Mobile ergonomics (prevent iOS zoom + improve tap targets) */
@media (max-width: 639px){
  input[type="text"], input[type="email"], input[type="search"], input[type="password"], select, textarea{
    font-size: 16px !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}