/* Source: _NR-CORE/ui/theme.css (v7 Clarity). Do not edit here — edit source + propagate. */
/* _NR-CORE/ui/theme.css — Next Realm cinematic dark theme · v7 "Clarity"
   Copied into each NR-[app]/public/styles.css (propagate after editing).
   Backward-compatible: every class name from v6 still exists — markup that
   used the old classes just looks better. New optional components are additive.
   Design tokens drive everything; brand resolver overrides --nr-brand-primary. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* surfaces */
  --nr-bg: #08080E;
  --nr-bg-2: #11111A;
  --nr-bg-3: #1A1A26;
  --nr-surface: rgba(255,255,255,.035);
  --nr-surface-2: rgba(255,255,255,.06);
  /* ink */
  --nr-fg: #ECECF4;
  --nr-fg-dim: #9A9AAE;
  /* accents */
  --nr-accent: #00FF94;
  --nr-accent-2: #A855F7;
  --nr-accent-3: #38BDF8;
  --nr-danger: #FF3B5C;
  --nr-warn: #FFB020;
  /* lines + glow */
  --nr-border: rgba(255,255,255,0.09);
  --nr-border-strong: rgba(255,255,255,0.16);
  --nr-glow: 0 0 32px rgba(0,255,148,.20);
  --nr-glow-purple: 0 0 32px rgba(168,85,247,.24);
  /* gradients */
  --nr-grad: linear-gradient(135deg, #00FF94 0%, #38BDF8 55%, #A855F7 120%);
  --nr-grad-soft: linear-gradient(135deg, rgba(0,255,148,.16), rgba(168,85,247,.16));
  /* type */
  --nr-font: 'Inter', system-ui, -apple-system, sans-serif;
  --nr-font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --nr-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  /* shape */
  --nr-radius: 16px;
  --nr-radius-sm: 10px;
  --nr-ease: cubic-bezier(.22,1,.36,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0;
  background: var(--nr-bg); color: var(--nr-fg);
  font-family: var(--nr-font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body {
  background:
    radial-gradient(ellipse 70% 55% at 50% -8%, rgba(168,85,247,.18), transparent 60%),
    radial-gradient(ellipse 55% 45% at 85% 8%, rgba(56,189,248,.10), transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 112%, rgba(0,255,148,.10), transparent 60%),
    linear-gradient(180deg, var(--nr-bg) 0%, #060609 100%);
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.5;
}
::selection { background: rgba(0,255,148,.28); color: #fff; }
a { color: var(--nr-accent); text-decoration: none; }

.mono { font-family: var(--nr-font-mono); }

/* ---- background fx ---- */
.nr-grid-bg::before {
  content: ''; position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 85%);
  pointer-events: none; z-index: 0;
}
/* optional aurora blob — drop <div class="nr-aurora"></div> near top of a hero */
.nr-aurora {
  position: absolute; inset: -20% -10% auto -10%; height: 460px; z-index: 0;
  background: var(--nr-grad); filter: blur(120px); opacity: .16; pointer-events: none;
  border-radius: 50%;
}

/* ---- cards ---- */
.nr-card {
  background: linear-gradient(180deg, var(--nr-surface), rgba(255,255,255,.012));
  border: 1px solid var(--nr-border);
  border-radius: var(--nr-radius);
  backdrop-filter: blur(16px);
  transition: transform .25s var(--nr-ease), border-color .25s var(--nr-ease), box-shadow .25s var(--nr-ease);
}
.nr-card-hover:hover, a.nr-card:hover {
  transform: translateY(-3px);
  border-color: var(--nr-border-strong);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
/* gradient-border feature card: <div class="nr-card nr-card-grad"> */
.nr-card-grad { position: relative; }
.nr-card-grad::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--nr-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .5; pointer-events: none;
}

/* ---- buttons ---- */
.nr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--nr-radius-sm);
  font-family: inherit; font-weight: 650; font-size: 14px; letter-spacing: .01em;
  cursor: pointer; user-select: none; text-decoration: none;
  border: 1px solid transparent; color: var(--nr-fg);
  transition: transform .18s var(--nr-ease), box-shadow .25s var(--nr-ease), filter .18s var(--nr-ease), background .18s var(--nr-ease);
  position: relative; overflow: hidden;
}
.nr-btn:active { transform: translateY(1px) scale(.99); }
.nr-btn-primary {
  background: var(--nr-grad); background-size: 160% 160%;
  color: #021410; font-weight: 750; box-shadow: var(--nr-glow);
}
.nr-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(0,255,148,.28); filter: saturate(1.1) brightness(1.04); }
/* sheen sweep on hover */
.nr-btn-primary::after {
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); transition: left .6s var(--nr-ease);
}
.nr-btn-primary:hover::after { left: 140%; }
.nr-btn-ghost { background: var(--nr-surface); border-color: var(--nr-border); }
.nr-btn-ghost:hover { background: var(--nr-surface-2); border-color: var(--nr-border-strong); transform: translateY(-1px); }
.nr-btn-purple { background: var(--nr-accent-2); color: #fff; box-shadow: var(--nr-glow-purple); }
.nr-btn-purple:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 12px 36px rgba(168,85,247,.3); }
.nr-btn-xl { padding: 16px 30px; font-size: 16px; border-radius: 12px; }
.nr-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---- inputs ---- */
.nr-input, .nr-textarea {
  width: 100%; background: rgba(0,0,0,.4);
  border: 1px solid var(--nr-border); color: var(--nr-fg);
  padding: 14px 16px; border-radius: var(--nr-radius-sm);
  font-family: inherit; font-size: 15px; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.nr-input::placeholder, .nr-textarea::placeholder { color: rgba(255,255,255,.32); }
.nr-input:focus, .nr-textarea:focus {
  border-color: var(--nr-accent); background: rgba(0,0,0,.55);
  box-shadow: 0 0 0 3px rgba(0,255,148,.16);
}
.nr-textarea { resize: vertical; min-height: 120px; line-height: 1.55; }

/* ---- tags / pills / badges ---- */
.nr-tag {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  background: rgba(0,255,148,.12); color: var(--nr-accent);
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  font-family: var(--nr-font-mono);
}
.nr-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px;
  background: var(--nr-surface); border: 1px solid var(--nr-border);
  font-size: 12px; color: var(--nr-fg-dim); font-weight: 600;
}
.nr-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  background: var(--nr-grad-soft); border: 1px solid var(--nr-border);
  font-family: var(--nr-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--nr-fg);
}

/* ---- type ---- */
.nr-h1 { font-family: var(--nr-font-display); font-size: clamp(36px, 6vw, 68px); font-weight: 700; line-height: 1.04; letter-spacing: -.025em; margin: 0; }
.nr-h2 { font-family: var(--nr-font-display); font-size: clamp(25px, 3.2vw, 38px); font-weight: 700; letter-spacing: -.015em; margin: 0; }
.nr-h3 { font-family: var(--nr-font-display); font-size: clamp(18px, 2vw, 22px); font-weight: 600; letter-spacing: -.01em; margin: 0; }
.nr-eyebrow { font-family: var(--nr-font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--nr-fg-dim); }
.nr-lead { font-size: clamp(17px, 2vw, 21px); color: var(--nr-fg-dim); line-height: 1.55; }
.nr-muted { color: var(--nr-fg-dim); }

/* gradient + glow text */
.nr-gradient-text, .nr-grad-text {
  background: var(--nr-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.nr-glow-text { text-shadow: 0 0 24px rgba(0,255,148,.5); color: var(--nr-accent); }
.nr-glow-text-purple { text-shadow: 0 0 24px rgba(168,85,247,.5); color: var(--nr-accent-2); }

.nr-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--nr-border-strong), transparent); margin: 24px 0; border: 0; }

/* ---- AI output prose (.nr-result wraps generated text) ---- */
.nr-result { font-size: 15px; line-height: 1.7; color: var(--nr-fg); }
.nr-result h1, .nr-result h2, .nr-result h3 { font-family: var(--nr-font-display); margin: 1.1em 0 .4em; line-height: 1.25; }
.nr-result p { margin: 0 0 1em; }
.nr-result ul, .nr-result ol { margin: 0 0 1em; padding-left: 1.3em; }
.nr-result li { margin: .3em 0; }
.nr-result strong { color: #fff; }
.nr-result code { font-family: var(--nr-font-mono); font-size: .9em; background: rgba(0,0,0,.4); padding: 2px 6px; border-radius: 6px; }
.nr-result a { border-bottom: 1px solid rgba(0,255,148,.4); }

/* ---- motion ---- */
@keyframes nr-pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
.nr-pulse { animation: nr-pulse 1.6s ease-in-out infinite; }
@keyframes nr-scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(100vh); } }
.nr-scanline {
  position: fixed; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--nr-accent), transparent);
  opacity: .16; pointer-events: none; animation: nr-scan 9s linear infinite; z-index: 1;
}
@keyframes nr-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.nr-shimmer {
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.12) 37%, rgba(255,255,255,.04) 63%);
  background-size: 200% 100%; animation: nr-shimmer 1.4s ease-in-out infinite;
}
/* reveal-on-scroll: add class, then toggle .in via IntersectionObserver (optional) */
.nr-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--nr-ease), transform .6s var(--nr-ease); }
.nr-reveal.in { opacity: 1; transform: none; }

/* ---- "alive" loading: skeletons + thinking dots ---- */
.nr-skeleton { height: 14px; border-radius: 7px; margin: 10px 0; }
.nr-skeleton.line { width: 100%; }
.nr-skeleton.short { width: 55%; }
.nr-thinking { display: inline-flex; gap: 6px; align-items: center; color: var(--nr-fg-dim); font-size: 13px; }
.nr-thinking i { width: 7px; height: 7px; border-radius: 50%; background: var(--nr-accent); display: inline-block; animation: nr-bounce 1.2s infinite ease-in-out; }
.nr-thinking i:nth-child(2) { animation-delay: .15s; }
.nr-thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes nr-bounce { 0%,80%,100% { transform: scale(.5); opacity:.4 } 40% { transform: scale(1); opacity:1 } }

/* ---- layout helpers ---- */
.nr-container { max-width: 1100px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.nr-stack > * + * { margin-top: 16px; }
.nr-grid-auto { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---- admin shell (unchanged API, refreshed look) ---- */
.nr-admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; position: relative; z-index: 1; }
.nr-admin-side { border-right: 1px solid var(--nr-border); padding: 24px 16px; background: rgba(0,0,0,.32); }
.nr-admin-side a { display: block; padding: 10px 12px; color: var(--nr-fg-dim); border-radius: 8px; text-decoration: none; font-size: 14px; transition: background .15s, color .15s; }
.nr-admin-side a:hover, .nr-admin-side a.active { background: var(--nr-surface-2); color: var(--nr-fg); }
.nr-admin-main { padding: 32px 40px; }
.nr-stat { padding: 20px; }
.nr-stat .label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--nr-fg-dim); }
.nr-stat .value { font-size: 32px; font-weight: 700; margin-top: 8px; font-family: var(--nr-font-mono); }
.nr-stat .delta { font-size: 12px; margin-top: 4px; color: var(--nr-accent); }
.nr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.nr-table th, .nr-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--nr-border); }
.nr-table th { color: var(--nr-fg-dim); font-weight: 500; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.nr-table tr { transition: background .12s; }
.nr-table tbody tr:hover { background: var(--nr-surface); }

/* ---- accessibility ---- */
:focus-visible { outline: 2px solid var(--nr-accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---- responsive ---- */
@media (max-width: 720px) {
  .nr-admin-shell { grid-template-columns: 1fr; }
  .nr-admin-side { display: none; }
  .nr-admin-main { padding: 20px; }
  .nr-container { padding-left: 18px; padding-right: 18px; }
}