/**
 * ============================================================================
 * NEXPLACIFY™ — BASE DESIGN SYSTEM
 * ============================================================================
 *
 * Product        : NexPlacify™
 * Theme          : Onyx & Charcoal
 * Typography     : Syne
 * Organization   : Privonix Technologies
 * Developer      : Mayank Chawdhari aka BOSS294
 * Version        : 1.0.0
 * Status         : Production Foundation
 * License        : Proprietary — Privonix Technologies
 * Copyright      : © 2026 Privonix Technologies. All rights reserved.
 *
 * TRADEMARK NOTICE
 * ----------------
 * "NexPlacify™" and associated brand assets are trademarks/brand property of
 * Privonix Technologies. This stylesheet is part of the NexPlacify product
 * design system and must not be redistributed as a standalone commercial
 * design system without written permission from Privonix Technologies.
 *
 * DESIGN DIRECTIVE
 * ----------------
 * This file is the single visual foundation for the NexPlacify UI.
 *
 * FIXED THEME:
 *   Onyx & Charcoal
 *
 * FIXED TYPEFACE:
 *   Syne — architectural sans-serif
 *
 * The product does NOT expose a theme selector. Do not add alternate themes,
 * color-theme classes, light/dark toggles, or per-page replacement palettes.
 *
 * Product design must remain:
 *   intentional • premium • distinctive • professional • trustworthy
 *   restrained • accessible • responsive • fast • maintainable
 *
 * DO NOT introduce generic AI/SaaS visual patterns:
 *   - purple/blue gradients
 *   - excessive gradients
 *   - glassmorphism everywhere
 *   - excessive rounded cards
 *   - repetitive 3-column card grids
 *   - giant meaningless headings
 *   - excessive pill UI
 *   - random blobs
 *   - unnecessary glow
 *   - excessive shadows
 *   - meaningless animation
 *   - fake statistics/testimonials/logos/badges
 *
 * Every component should improve hierarchy, comprehension, interaction or
 * feedback. Decoration is subordinate to product clarity.
 *
 * DESIGN SOURCE OF TRUTH
 * ----------------------
 * Apply this foundation to every public page, student page, admin page,
 * component, modal, form, dashboard, job card, roadmap and interview UI.
 *
 * ============================================================================
 *
 * FEATURES
 * --------
 * 1. Fixed Onyx & Charcoal color system.
 * 2. Fixed Syne typography system.
 * 3. Responsive containers, grid and spacing utilities.
 * 4. Accessible focus-visible states.
 * 5. Complete button variants + hover/active/disabled/loading states.
 * 6. Icon representation primitives for inline, boxed, circular and button
 *    usage with SVG/Lucide-compatible markup.
 * 7. Inputs, selects, textareas, checkboxes, radios and switches.
 * 8. Cards, badges, chips, alerts, tables, tabs and navigation primitives.
 * 9. Modal, dropdown, tooltip, toast and overlay foundations.
 * 10. Progress bars, meters, skeleton loading and empty/error states.
 * 11. Dashboard primitives for readiness, matching and analytics.
 * 12. Reduced-motion support.
 * 13. Dark-theme native scrollbars and selection styling.
 * 14. Print-safe base rules.
 *
 * HOW TO USE
 * ----------
 * In every HTML/PHP page:
 *
 *   <link rel="preconnect" href="https://fonts.googleapis.com">
 *   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 *   <link rel="stylesheet" href="/Assets/Modules/base.css">
 *
 * Use semantic classes rather than page-specific duplicated CSS.
 *
 * Examples:
 *
 *   <button class="btn btn-primary">Analyze Resume</button>
 *   <button class="btn btn-outline">Explore Jobs</button>
 *   <button class="btn btn-ghost">View Details</button>
 *   <button class="btn btn-danger">Delete</button>
 *
 *   <span class="icon icon-inline" aria-hidden="true">
 *     <svg viewBox="0 0 24 24" fill="none">...</svg>
 *   </span>
 *
 *   <button class="icon-btn icon-btn-sm" aria-label="Close">
 *     <svg ...>...</svg>
 *   </button>
 *
 *   <div class="icon-tile icon-tile-lg">...</div>
 *
 *   <span class="badge badge-success">Ready</span>
 *
 *   <div class="card">...</div>
 *
 * JS BEHAVIOR
 * -----------
 * JS may add state classes such as:
 *   .is-active
 *   .is-open
 *   .is-loading
 *   .is-selected
 *   .is-invalid
 *   .is-success
 *   .is-disabled
 *
 * Prefer native [disabled], [aria-expanded], [aria-pressed], [aria-selected]
 * and [aria-invalid] attributes wherever semantic state exists.
 *
 * ICONS
 * -----
 * This foundation intentionally does not ship a second icon library.
 * Use the project's approved SVG/Lucide icons. All inline SVG icons inherit
 * currentColor through `.icon` primitives.
 *
 * ============================================================================
 */


/* ==========================================================================
   01. FONT + ROOT TOKENS
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&display=swap");

:root {
  /* ------------------------------------------------------------------------
     Brand / theme — ONYX & CHARCOAL ONLY
     ------------------------------------------------------------------------ */
  --color-bg:              #0B0C0D;
  --color-surface:         #111315;
  --color-surface-2:       #16191C;
  --color-surface-3:       #1B1F23;
  --color-surface-inverse: #F1F2F3;

  --color-text:            #F2F3F4;
  --color-text-strong:     #FFFFFF;
  --color-text-muted:      #A7ACB3;
  --color-text-subtle:     #777D85;
  --color-text-inverse:    #111315;

  --color-border:          rgba(255, 255, 255, 0.10);
  --color-border-strong:   rgba(255, 255, 255, 0.18);
  --color-border-soft:     rgba(255, 255, 255, 0.06);

  --color-accent:          #ffffff;
  --color-accent-strong:   #FFFFFF;
  --color-accent-hover:    #ECEDEF;
  --color-accent-soft:     rgba(214, 216, 220, 0.10);
  --color-accent-faint:    rgba(214, 216, 220, 0.05);

  /* ------------------------------------------------------------------------
     Semantic status colors.
     These are state colors, not alternate visual themes.
     ------------------------------------------------------------------------ */
  --color-success:         #59C98A;
  --color-success-bg:      rgba(89, 201, 138, 0.10);
  --color-success-border:  rgba(89, 201, 138, 0.24);

  --color-warning:         #E8BA62;
  --color-warning-bg:      rgba(232, 186, 98, 0.10);
  --color-warning-border:  rgba(232, 186, 98, 0.24);

  --color-danger:          #F07878;
  --color-danger-bg:       rgba(240, 120, 120, 0.10);
  --color-danger-border:   rgba(240, 120, 120, 0.24);

  --color-info:            #8FB7DC;
  --color-info-bg:         rgba(143, 183, 220, 0.10);
  --color-info-border:     rgba(143, 183, 220, 0.24);

  /* ------------------------------------------------------------------------
     Typography — SYNE ONLY
     ------------------------------------------------------------------------ */
  --font-sans: "Syne", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;

  --text-xs:    0.6875rem; /* 11px */
  --text-sm:    0.8125rem; /* 13px */
  --text-md:    0.9375rem; /* 15px */
  --text-lg:    1.0625rem; /* 17px */
  --text-xl:    1.25rem;   /* 20px */
  --text-2xl:   1.5rem;    /* 24px */
  --text-3xl:   1.875rem;  /* 30px */
  --text-4xl:   2.375rem;  /* 38px */
  --text-5xl:   3.25rem;   /* 52px */
  --text-6xl:   4.5rem;    /* 72px */

  --lh-tight:   1.08;
  --lh-snug:    1.22;
  --lh-normal:  1.55;
  --lh-relaxed: 1.75;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ------------------------------------------------------------------------
     Spacing — 4px base rhythm
     ------------------------------------------------------------------------ */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ------------------------------------------------------------------------
     Layout
     ------------------------------------------------------------------------ */
  --container-xs:  30rem;
  --container-sm:  40rem;
  --container-md:  48rem;
  --container-lg:  64rem;
  --container-xl:  75rem;
  --container-2xl: 90rem;

  --gutter-mobile: 1rem;
  --gutter-tablet: 1.5rem;
  --gutter-desktop: 2rem;

  /* ------------------------------------------------------------------------
     Radii — restrained; avoid excessive pill UI
     ------------------------------------------------------------------------ */
  --radius-xs:  0.25rem;
  --radius-sm:  0.375rem;
  --radius-md:  0.625rem;
  --radius-lg:  0.875rem;
  --radius-xl:  1.125rem;
  --radius-2xl: 1.5rem;
  --radius-pill: 999px;

  /* ------------------------------------------------------------------------
     Shadows — restrained and purpose-driven
     ------------------------------------------------------------------------ */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-sm:   0 5px 18px rgba(0, 0, 0, 0.22);
  --shadow-md:   0 12px 30px rgba(0, 0, 0, 0.28);
  --shadow-lg:   0 22px 55px rgba(0, 0, 0, 0.34);
  --shadow-none: none;

  /* ------------------------------------------------------------------------
     Motion
     ------------------------------------------------------------------------ */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;
  --duration-slower: 420ms;

  /* ------------------------------------------------------------------------
     Components
     ------------------------------------------------------------------------ */
  --control-height-sm: 2rem;
  --control-height-md: 2.625rem;
  --control-height-lg: 3.125rem;

  --header-height: 4.5rem;
  --sidebar-width: 16rem;
  --sidebar-collapsed-width: 4.5rem;

  color-scheme: dark;
}


/* ==========================================================================
   02. RESET + GLOBAL FOUNDATION
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--color-bg);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a,
select,
summary,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
figure,
dl,
dd,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

::selection {
  background: rgba(214, 216, 220, 0.20);
  color: var(--color-text-strong);
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}

[hidden] {
  display: none !important;
}


/* ==========================================================================
   03. DOCUMENT ELEMENTS + TYPOGRAPHY
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-text-strong);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.035em;
  line-height: var(--lh-tight);
}

h1 {
  font-size: clamp(2.25rem, 5vw, var(--text-6xl));
  font-weight: var(--weight-bold);
}

h2 {
  font-size: clamp(1.875rem, 3.6vw, var(--text-4xl));
}

h3 {
  font-size: clamp(1.375rem, 2.5vw, var(--text-3xl));
}

h4 {
  font-size: var(--text-xl);
}

h5 {
  font-size: var(--text-lg);
}

h6 {
  font-size: var(--text-md);
}

p {
  max-width: 70ch;
}

strong,
b {
  font-weight: var(--weight-bold);
}

small {
  font-size: var(--text-sm);
}

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }

.font-regular { font-weight: var(--weight-regular); }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold { font-weight: var(--weight-bold); }
.font-extrabold { font-weight: var(--weight-extrabold); }

.text-main { color: var(--color-text); }
.text-strong { color: var(--color-text-strong); }
.text-muted { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }
.text-info { color: var(--color-info); }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.uppercase {
  text-transform: uppercase;
  letter-spacing: 0.10em;
}

.eyebrow {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}


/* ==========================================================================
   04. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  width: min(100% - (var(--gutter-mobile) * 2), var(--container-xl));
  margin-inline: auto;
}

.container-xs { max-width: var(--container-xs); }
.container-sm { max-width: var(--container-sm); }
.container-md { max-width: var(--container-md); }
.container-lg { max-width: var(--container-lg); }
.container-xl { max-width: var(--container-xl); }
.container-2xl { max-width: var(--container-2xl); }

.section {
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

.section-sm {
  padding-block: clamp(2rem, 4vw, 3.5rem);
}

.section-lg {
  padding-block: clamp(5rem, 10vw, 9rem);
}

.stack {
  display: flex;
  flex-direction: column;
}

.stack-1 { gap: var(--space-1); }
.stack-2 { gap: var(--space-2); }
.stack-3 { gap: var(--space-3); }
.stack-4 { gap: var(--space-4); }
.stack-5 { gap: var(--space-5); }
.stack-6 { gap: var(--space-6); }
.stack-8 { gap: var(--space-8); }
.stack-10 { gap: var(--space-10); }
.stack-12 { gap: var(--space-12); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.cluster-2 { gap: var(--space-2); }
.cluster-3 { gap: var(--space-3); }
.cluster-4 { gap: var(--space-4); }
.cluster-6 { gap: var(--space-6); }

.grid {
  display: grid;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.auto-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }

.w-full { width: 100%; }
.max-w-none { max-width: none; }

.hidden { display: none !important; }


/* ==========================================================================
   05. SURFACES / CARDS / PANELS
   ========================================================================== */

.surface {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.surface-2 {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
}

.surface-3 {
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
}

.card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.card-interactive {
  transition:
    transform var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    background-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.card-interactive:hover {
  background: var(--color-surface-2);
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.card-interactive:active {
  transform: translateY(0);
}

.card-compact {
  padding: var(--space-4);
  border-radius: var(--radius-md);
}

.card-large {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius-xl);
}

.panel {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.panel-header,
.panel-footer {
  padding: var(--space-5) var(--space-6);
}

.panel-header {
  border-bottom: 1px solid var(--color-border);
}

.panel-footer {
  border-top: 1px solid var(--color-border);
}

.divider {
  width: 100%;
  height: 1px;
  background: var(--color-border);
}


/* ==========================================================================
   06. BUTTON SYSTEM — COMPLETE STATES
   ========================================================================== */

.btn {
  --btn-bg: var(--color-surface-2);
  --btn-color: var(--color-text);
  --btn-border: var(--color-border);
  --btn-shadow: none;
  --btn-bg-hover: var(--color-surface-3);
  --btn-color-hover: var(--color-text-strong);
  --btn-border-hover: var(--color-border-strong);

  position: relative;
  display: inline-flex;
  min-width: 0;
  min-height: var(--control-height-md);
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-color);
  box-shadow: var(--btn-shadow);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  transition:
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.btn:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
  color: var(--btn-color-hover);
}

.btn:active:not(:disabled):not([aria-disabled="true"]),
.btn.is-active,
.btn[aria-pressed="true"] {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled {
  opacity: 0.42;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

.btn-lg {
  min-height: var(--control-height-lg);
  padding-inline: 1.2rem;
  font-size: var(--text-md);
}

.btn-sm {
  min-height: var(--control-height-sm);
  padding: 0.45rem 0.75rem;
  font-size: var(--text-xs);
}

.btn-xs {
  min-height: 1.75rem;
  padding: 0.3rem 0.55rem;
  font-size: 0.6875rem;
}

.btn-block {
  width: 100%;
}

.btn-primary {
  --btn-bg: var(--color-accent);
  --btn-color: var(--color-text-inverse);
  --btn-border: var(--color-accent);
  --btn-bg-hover: var(--color-accent-hover);
  --btn-color-hover: var(--color-text-inverse);
  --btn-border-hover: var(--color-accent-hover);
  --btn-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

.btn-secondary {
  --btn-bg: var(--color-surface-3);
  --btn-color: var(--color-text-strong);
  --btn-border: var(--color-border-strong);
  --btn-bg-hover: #22272B;
  --btn-border-hover: rgba(255, 255, 255, 0.24);
}

.btn-outline {
  --btn-bg: transparent;
  --btn-color: var(--color-text);
  --btn-border: var(--color-border-strong);
  --btn-bg-hover: var(--color-accent-soft);
  --btn-color-hover: var(--color-text-strong);
  --btn-border-hover: rgba(214, 216, 220, 0.45);
}

.btn-ghost {
  --btn-bg: transparent;
  --btn-color: var(--color-text-muted);
  --btn-border: transparent;
  --btn-bg-hover: var(--color-accent-faint);
  --btn-color-hover: var(--color-text-strong);
  --btn-border-hover: transparent;
}

.btn-ghost:hover:not(:disabled) {
  transform: none;
}

.btn-soft {
  --btn-bg: var(--color-accent-soft);
  --btn-color: var(--color-text);
  --btn-border: transparent;
  --btn-bg-hover: rgba(214, 216, 220, 0.16);
  --btn-color-hover: var(--color-text-strong);
  --btn-border-hover: transparent;
}

.btn-elevated {
  --btn-bg: var(--color-surface-3);
  --btn-color: var(--color-text-strong);
  --btn-border: var(--color-border-strong);
  --btn-bg-hover: #202428;
  --btn-border-hover: rgba(255, 255, 255, 0.24);
  --btn-shadow: 0 4px 0 rgba(0, 0, 0, 0.34), var(--shadow-sm);
}

.btn-elevated:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.34), var(--shadow-md);
}

.btn-elevated:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.34), var(--shadow-xs);
}

.btn-danger {
  --btn-bg: var(--color-danger-bg);
  --btn-color: var(--color-danger);
  --btn-border: var(--color-danger-border);
  --btn-bg-hover: rgba(240, 120, 120, 0.16);
  --btn-color-hover: #FF9A9A;
  --btn-border-hover: rgba(240, 120, 120, 0.38);
}

.btn-success {
  --btn-bg: var(--color-success-bg);
  --btn-color: var(--color-success);
  --btn-border: var(--color-success-border);
  --btn-bg-hover: rgba(89, 201, 138, 0.16);
  --btn-color-hover: #78DEA3;
  --btn-border-hover: rgba(89, 201, 138, 0.38);
}

.btn-warning {
  --btn-bg: var(--color-warning-bg);
  --btn-color: var(--color-warning);
  --btn-border: var(--color-warning-border);
  --btn-bg-hover: rgba(232, 186, 98, 0.16);
  --btn-color-hover: #F1C975;
  --btn-border-hover: rgba(232, 186, 98, 0.38);
}

.btn-text {
  min-height: auto;
  padding: 0.25rem 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
}

.btn-text:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-strong);
  transform: none;
}

.btn-with-icon {
  padding-inline: 0.85rem;
}

.btn-loading {
  pointer-events: none;
}

.btn-loading .btn-label {
  opacity: 0.68;
}

.btn-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: nx-spin 700ms linear infinite;
}


/* ==========================================================================
   07. ICON SYSTEM — ALL CORE REPRESENTATIONS
   Compatible with inline SVG / Lucide / approved SVG icon assets.
   ========================================================================== */

.icon {
  --icon-size: 1.125rem;

  display: inline-flex;
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 var(--icon-size);
  align-items: center;
  justify-content: center;
  color: currentColor;
  vertical-align: middle;
}

.icon > svg,
.icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  color: currentColor;
  fill: none;
  pointer-events: none;
}

.icon svg[fill]:not([fill="none"]) {
  fill: currentColor;
}

.icon-xs {
  --icon-size: 0.75rem;
}

.icon-sm {
  --icon-size: 0.9375rem;
}

.icon-md {
  --icon-size: 1.125rem;
}

.icon-lg {
  --icon-size: 1.375rem;
}

.icon-xl {
  --icon-size: 1.625rem;
}

.icon-2xl {
  --icon-size: 2rem;
}

.icon-3xl {
  --icon-size: 2.5rem;
}

/* Inline icon */
.icon-inline {
  display: inline-flex;
  vertical-align: -0.18em;
}

/* Icon with semantic size box */
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 2.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text);
  transition:
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
}

.icon-box:hover {
  background: var(--color-surface-3);
  border-color: var(--color-border-strong);
  color: var(--color-text-strong);
  transform: translateY(-1px);
}

.icon-box-sm {
  width: 2.25rem;
  height: 2.25rem;
  flex-basis: 2.25rem;
  border-radius: var(--radius-sm);
}

.icon-box-lg {
  width: 3.5rem;
  height: 3.5rem;
  flex-basis: 3.5rem;
  border-radius: var(--radius-lg);
}

.icon-box-accent {
  background: var(--color-accent-soft);
  border-color: rgba(214, 216, 220, 0.18);
  color: var(--color-accent);
}

.icon-box-success {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success);
}

.icon-box-warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning);
}

.icon-box-danger {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger);
}

/* Circular icon representation */
.icon-circle {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface-2);
  color: var(--color-text);
  transition:
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}

.icon-circle:hover {
  background: var(--color-surface-3);
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
}

.icon-circle-sm {
  width: 2rem;
  height: 2rem;
  flex-basis: 2rem;
}

.icon-circle-lg {
  width: 4rem;
  height: 4rem;
  flex-basis: 4rem;
}

/* Circular framed / ring icon */
.icon-ring {
  display: inline-flex;
  width: 3.25rem;
  height: 3.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  box-shadow: inset 0 0 0 5px var(--color-surface);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

/* Icon action button */
.icon-btn {
  --icon-btn-size: 2.625rem;

  display: inline-flex;
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  flex: 0 0 var(--icon-btn-size);
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  transition:
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.icon-btn:hover:not(:disabled) {
  background: var(--color-surface-3);
  border-color: var(--color-border-strong);
  color: var(--color-text-strong);
  transform: translateY(-1px);
}

.icon-btn:active:not(:disabled),
.icon-btn.is-active,
.icon-btn[aria-pressed="true"] {
  transform: translateY(1px);
  background: var(--color-accent-soft);
  color: var(--color-text-strong);
}

.icon-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.icon-btn-sm {
  --icon-btn-size: 2rem;
  border-radius: var(--radius-sm);
}

.icon-btn-lg {
  --icon-btn-size: 3.25rem;
  border-radius: var(--radius-lg);
}

.icon-btn-ghost {
  border-color: transparent;
  background: transparent;
}

.icon-btn-ghost:hover:not(:disabled) {
  border-color: var(--color-border);
  background: var(--color-accent-faint);
}

.icon-btn-danger:hover:not(:disabled) {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

/* Icon tile — for feature/step representations */
.icon-tile {
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-surface-3);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.icon-tile-sm {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
}

.icon-tile-lg {
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-lg);
}

.icon-tile-accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-inverse);
}

/* Badge-contained icon */
.icon-badge {
  display: inline-flex;
  width: 1.875rem;
  height: 1.875rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-3);
  color: var(--color-text-muted);
}

/* Leading/trailing icon helpers */
.has-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.icon-leading {
  order: -1;
}

.icon-trailing {
  order: 2;
}


/* ==========================================================================
   08. BADGES / CHIPS / STATUS
   ========================================================================== */

.badge {
  display: inline-flex;
  min-height: 1.625rem;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  white-space: nowrap;
}

.badge-neutral { color: var(--color-text-muted); }

.badge-accent {
  background: var(--color-accent-soft);
  border-color: rgba(214, 216, 220, 0.18);
  color: var(--color-accent);
}

.badge-success {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success);
}

.badge-warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning);
}

.badge-danger {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger);
}

.badge-info {
  background: var(--color-info-bg);
  border-color: var(--color-info-border);
  color: var(--color-info);
}

.badge-dot::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  flex: 0 0 0.4rem;
  border-radius: 50%;
  background: currentColor;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  transition:
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
}

.chip:hover {
  background: var(--color-surface-3);
  border-color: var(--color-border-strong);
  color: var(--color-text-strong);
}

.chip.is-selected,
.chip[aria-selected="true"] {
  background: var(--color-accent-soft);
  border-color: rgba(214, 216, 220, 0.28);
  color: var(--color-text-strong);
}


/* ==========================================================================
   09. FORM CONTROLS
   ========================================================================== */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field-label {
  color: var(--color-text-strong);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.field-help {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.field-error {
  color: var(--color-danger);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: var(--control-height-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  padding: 0.7rem 0.8rem;
  transition:
    border-color var(--duration-base) var(--ease-standard),
    background-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-text-subtle);
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--color-border-strong);
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: rgba(214, 216, 220, 0.52);
  background: var(--color-surface-2);
  box-shadow: 0 0 0 3px rgba(214, 216, 220, 0.06);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(240, 120, 120, 0.06);
}

.textarea {
  min-height: 8rem;
  resize: vertical;
}

.select {
  appearance: none;
  padding-right: 2.5rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 17px) 52%,
    calc(100% - 12px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.input-group .input {
  padding-right: 2.75rem;
}

.input-action {
  position: absolute;
  top: 50%;
  right: 0.4rem;
  transform: translateY(-50%);
}

/* Checkbox / radio */
.control {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  cursor: pointer;
}

.control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.control-mark {
  display: inline-flex;
  width: 1.125rem;
  height: 1.125rem;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.125rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-text-inverse);
  transition:
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}

.control input:checked + .control-mark {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.control input:focus-visible + .control-mark {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.control-radio .control-mark {
  border-radius: 50%;
}

.control-radio input:checked + .control-mark::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-text-inverse);
}

/* Switch */
.switch {
  position: relative;
  display: inline-flex;
  width: 2.75rem;
  height: 1.625rem;
}

.switch input {
  position: absolute;
  opacity: 0;
}

.switch-track {
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface-3);
  transition: background-color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}

.switch-track::after {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--color-text-muted);
  transition: transform var(--duration-base) var(--ease-standard),
              background-color var(--duration-base) var(--ease-standard);
}

.switch input:checked + .switch-track {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.switch input:checked + .switch-track::after {
  background: var(--color-text-inverse);
  transform: translateX(1.125rem);
}

.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}


/* ==========================================================================
   10. NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--header-height);
  border-bottom: 1px solid var(--color-border);
  background: rgba(11, 12, 13, 0.92);
  backdrop-filter: blur(12px);
}

.nav {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--color-text-strong);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-link {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  padding: 0.55rem 0.7rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  transition:
    background-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}

.nav-link:hover {
  background: var(--color-accent-faint);
  color: var(--color-text-strong);
}

.nav-link.is-active,
.nav-link[aria-current="page"] {
  background: var(--color-accent-soft);
  border-color: rgba(214, 216, 220, 0.12);
  color: var(--color-text-strong);
  font-weight: var(--weight-semibold);
}

.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

.breadcrumbs a:hover {
  color: var(--color-text-strong);
}

.mobile-nav {
  display: none;
}


/* ==========================================================================
   11. TABS
   ========================================================================== */

.tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  position: relative;
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 0.8rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  transition:
    color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}

.tab:hover {
  color: var(--color-text-strong);
}

.tab.is-active,
.tab[aria-selected="true"] {
  border-bottom-color: var(--color-accent);
  color: var(--color-text-strong);
}


/* ==========================================================================
   12. ALERTS / NOTICES
   ========================================================================== */

.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.alert-title {
  margin-bottom: 0.2rem;
  color: var(--color-text-strong);
  font-weight: var(--weight-semibold);
}

.alert-success {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
}

.alert-warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
}

.alert-danger {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
}

.alert-info {
  background: var(--color-info-bg);
  border-color: var(--color-info-border);
}


/* ==========================================================================
   13. TABLES
   ========================================================================== */

.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.table {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}

.table th {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.table td {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr {
  transition: background-color var(--duration-base) var(--ease-standard);
}

.table tbody tr:hover {
  background: var(--color-accent-faint);
}


/* ==========================================================================
   14. PROGRESS / METERS
   ========================================================================== */

.progress {
  width: 100%;
  height: 0.5rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-surface-3);
}

.progress > span {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
  transition: width var(--duration-slow) var(--ease-emphasis);
}

.progress-sm {
  height: 0.25rem;
}

.progress-lg {
  height: 0.75rem;
}

.progress-success > span { background: var(--color-success); }
.progress-warning > span { background: var(--color-warning); }
.progress-danger > span { background: var(--color-danger); }

.meter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.meter-value {
  color: var(--color-text-strong);
  font-weight: var(--weight-bold);
}


/* ==========================================================================
   15. DATA / READINESS PRIMITIVES
   ========================================================================== */

.score {
  display: inline-flex;
  flex-direction: column;
  gap: 0.2rem;
}

.score-value {
  color: var(--color-text-strong);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.055em;
  line-height: 0.95;
}

.score-label {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.metric {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.metric-value {
  color: var(--color-text-strong);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
}

.metric-label {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* ==========================================================================
   16. DROPDOWN / POPOVER
   ========================================================================== */

.popover {
  position: absolute;
  z-index: 500;
  min-width: 12rem;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: 0.4rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  box-shadow: var(--shadow-md);
}

.popover-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.7rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: left;
  transition:
    background-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
}

.popover-item:hover,
.popover-item.is-active {
  background: var(--color-accent-faint);
  color: var(--color-text-strong);
}


/* ==========================================================================
   17. MODAL / DIALOG
   ========================================================================== */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.70);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--duration-slow) var(--ease-standard),
    visibility var(--duration-slow) var(--ease-standard);
}

.overlay.is-open,
.overlay.on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal {
  position: fixed;
  inset: 50% auto auto 50%;
  z-index: 1100;
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: var(--space-6);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  background: var(--color-surface-2);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translate(-50%, -48%);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--duration-slow) var(--ease-emphasis),
    transform var(--duration-slow) var(--ease-emphasis),
    visibility var(--duration-slow) var(--ease-standard);
}

.modal.is-open,
.modal.on {
  opacity: 1;
  transform: translate(-50%, -50%);
  visibility: visible;
  pointer-events: auto;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.modal-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
}


/* ==========================================================================
   18. TOASTS
   ========================================================================== */

.toast-stack {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1300;
  display: flex;
  width: min(24rem, calc(100vw - 2rem));
  flex-direction: column;
  gap: 0.65rem;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  box-shadow: var(--shadow-md);
}

.toast-content {
  flex: 1;
  min-width: 0;
}

.toast-title {
  margin-bottom: 0.15rem;
  color: var(--color-text-strong);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.toast-message {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.5;
}


/* ==========================================================================
   19. LOADING / EMPTY / ERROR STATES
   ========================================================================== */

.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-surface-3);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.055),
    transparent
  );
  animation: nx-skeleton 1.35s infinite;
}

.skeleton-line {
  height: 0.7rem;
}

.skeleton-line.sm {
  width: 45%;
}

.skeleton-line.md {
  width: 70%;
}

.skeleton-line.lg {
  width: 92%;
}

.skeleton-box {
  width: 100%;
  min-height: 10rem;
}

.state {
  display: grid;
  min-height: 14rem;
  place-items: center;
  padding: var(--space-8);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  text-align: center;
  background: var(--color-surface);
}

.state-icon {
  margin-bottom: var(--space-4);
  color: var(--color-text-subtle);
}

.state-title {
  margin-bottom: 0.35rem;
  color: var(--color-text-strong);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.state-copy {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}


/* ==========================================================================
   20. TOOLTIP
   ========================================================================== */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.45rem);
  z-index: 800;
  width: max-content;
  max-width: 14rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-3);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-xs);
  line-height: 1.4;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 3px);
  transition:
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}


/* ==========================================================================
   21. NAV / SIDEBAR APPLICATION SHELL
   ========================================================================== */

.app-shell {
  min-height: 100vh;
  background: var(--color-bg);
}

.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 90;
  width: var(--sidebar-width);
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
  overflow-y: auto;
}

.app-main {
  min-width: 0;
  margin-left: var(--sidebar-width);
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  min-height: var(--header-height);
  border-bottom: 1px solid var(--color-border);
  background: rgba(11, 12, 13, 0.92);
  backdrop-filter: blur(12px);
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.5rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  transition:
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
}

.sidebar-link:hover {
  background: var(--color-accent-faint);
  color: var(--color-text-strong);
}

.sidebar-link.is-active,
.sidebar-link[aria-current="page"] {
  background: var(--color-accent-soft);
  border-color: rgba(214, 216, 220, 0.12);
  color: var(--color-text-strong);
}

.sidebar-section {
  padding: 1rem 0.75rem 0.4rem;
  color: var(--color-text-subtle);
  font-size: 0.625rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


/* ==========================================================================
   22. JOB / SKILL / ROADMAP PRIMITIVES
   ========================================================================== */

.job-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition:
    transform var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    background-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.job-card:hover {
  background: var(--color-surface-2);
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.job-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

.skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.skill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.8rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.skill-matched {
  color: var(--color-success);
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
}

.skill-missing {
  color: var(--color-danger);
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
}

.roadmap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.roadmap-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.roadmap-number {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-surface-3);
  color: var(--color-text-strong);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}


/* ==========================================================================
   23. INTERVIEW CHAT PRIMITIVES
   ========================================================================== */

.chat {
  display: flex;
  flex-direction: column;
  min-height: 36rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}

.chat-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.chat-messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  overflow: auto;
}

.chat-message {
  display: flex;
  max-width: min(78%, 46rem);
  flex-direction: column;
  gap: 0.35rem;
}

.chat-message.ai {
  align-self: flex-start;
}

.chat-message.user {
  align-self: flex-end;
}

.chat-bubble {
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
}

.chat-message.user .chat-bubble {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-inverse);
}

.chat-composer {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
}


/* ==========================================================================
   24. RESUME UPLOAD
   ========================================================================== */

.upload-zone {
  display: grid;
  min-height: 13rem;
  place-items: center;
  padding: var(--space-8);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: center;
  transition:
    background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}

.upload-zone:hover,
.upload-zone.is-dragover {
  background: var(--color-surface-2);
  border-color: rgba(214, 216, 220, 0.40);
}


/* ==========================================================================
   25. VISIBILITY + DECORATIVE UTILITIES
   ========================================================================== */

.border {
  border: 1px solid var(--color-border);
}

.border-strong {
  border-color: var(--color-border-strong);
}

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: 50%; }

.bg-surface { background: var(--color-surface); }
.bg-surface-2 { background: var(--color-surface-2); }
.bg-surface-3 { background: var(--color-surface-3); }

.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.p-12 { padding: var(--space-12); }

.px-4 { padding-inline: var(--space-4); }
.px-6 { padding-inline: var(--space-6); }
.py-4 { padding-block: var(--space-4); }
.py-6 { padding-block: var(--space-6); }

.m-0 { margin: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.aspect-square { aspect-ratio: 1; }

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

.sticky { position: sticky; }
.relative { position: relative; }
.absolute { position: absolute; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   26. SCROLLBARS
   ========================================================================== */

* {
  scrollbar-width: thin;
  scrollbar-color: #3B4046 transparent;
}

::-webkit-scrollbar {
  width: 0.55rem;
  height: 0.55rem;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background-clip: padding-box;
  background-color: #3B4046;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555B63;
}


/* ==========================================================================
   27. KEYBOARD / INTERACTION STATES
   ========================================================================== */

.is-disabled,
[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.is-hidden {
  display: none !important;
}

.is-loading {
  cursor: progress;
}

.is-selected {
  border-color: rgba(214, 216, 220, 0.34) !important;
  background: var(--color-accent-soft) !important;
}

.is-invalid {
  border-color: var(--color-danger) !important;
}

.is-success {
  border-color: var(--color-success) !important;
}

.is-open {
  visibility: visible;
}


/* ==========================================================================
   28. ANIMATION
   ========================================================================== */

@keyframes nx-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes nx-skeleton {
  100% {
    transform: translateX(100%);
  }
}

@keyframes nx-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes nx-slide-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: nx-fade-in var(--duration-slow) var(--ease-standard) both;
}

.animate-slide-up {
  animation: nx-slide-up var(--duration-slow) var(--ease-emphasis) both;
}


/* ==========================================================================
   29. REDUCED MOTION — MANDATORY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   30. RESPONSIVE BEHAVIOR
   ========================================================================== */

@media (min-width: 48rem) {
  .container {
    width: min(100% - (var(--gutter-tablet) * 2), var(--container-xl));
  }
}

@media (min-width: 64rem) {
  .container {
    width: min(100% - (var(--gutter-desktop) * 2), var(--container-xl));
  }
}

@media (max-width: 63.99rem) {
  .nav-links {
    display: none;
  }

  .mobile-nav {
    display: inline-flex;
  }

  .app-sidebar {
    width: min(18rem, calc(100vw - 4rem));
    transform: translateX(-100%);
    transition: transform var(--duration-slow) var(--ease-emphasis);
  }

  .app-sidebar.is-open {
    transform: translateX(0);
  }

  .app-main {
    margin-left: 0;
  }

  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 47.99rem) {
  .grid-2,
  .grid-3,
  .grid-4,
  .form-row {
    grid-template-columns: 1fr;
  }

  .container {
    width: min(100% - 2rem, var(--container-xl));
  }

  .section {
    padding-block: 3.5rem;
  }

  .card,
  .card-large {
    padding: var(--space-5);
  }

  .modal {
    width: min(100% - 1.5rem, 32rem);
    padding: var(--space-5);
  }

  .chat-message {
    max-width: 88%;
  }

  .chat {
    min-height: calc(100vh - 7rem);
    border-radius: var(--radius-lg);
  }

  .table {
    min-width: 38rem;
  }
}

@media (max-width: 30rem) {
  :root {
    --text-5xl: 2.75rem;
  }

  .container {
    width: min(100% - 1.25rem, var(--container-xl));
  }

  .btn {
    min-height: 2.75rem;
  }

  .btn-lg {
    width: 100%;
  }

  .cluster {
    align-items: stretch;
  }

  .cluster .btn {
    flex: 1 1 auto;
  }

  .score-value {
    font-size: 3.25rem;
  }
}


/* ==========================================================================
   31. PRINT
   ========================================================================== */

@media print {
  :root {
    color-scheme: light;
  }

  body {
    background: #fff;
    color: #111;
  }

  .site-header,
  .app-sidebar,
  .app-topbar,
  .btn,
  .icon-btn,
  .toast-stack,
  .overlay,
  .modal {
    display: none !important;
  }

  .app-main {
    margin-left: 0;
  }

  .card,
  .panel,
  .table-wrap {
    background: #fff;
    color: #111;
    border-color: #ccc;
    box-shadow: none;
  }
}


/* ==========================================================================
   32. END-OF-FILE GUARDRAIL
   ========================================================================== */

/*
 * PROJECT RULE:
 *
 * 1. Do not add a second theme to this file.
 * 2. Do not replace Syne with another font.
 * 3. Do not create page-level copies of these primitives when an existing
 *    primitive already satisfies the need.
 * 4. Keep component-specific CSS close to the component only when genuinely
 *    necessary.
 * 5. Keep animations subtle and purposeful.
 * 6. Preserve accessibility and keyboard states.
 * 7. Preserve responsive behavior.
 * 8. Never use this foundation to justify fake product metrics, fake reviews,
 *    fake client logos, or decorative UI without a product purpose.
 *
 * NexPlacify™ — Onyx & Charcoal — Syne
 * Privonix Technologies
 * Mayank Chawdhari aka BOSS294
 * Version 1.0.0
 */