/* ════════════════════════════════════════════════════════════════
   INR Narratief — tool-stijlen
   Volledig .nx-root-gescoped. Embeddings-overrides staan onderaan.
   Alle declaraties met !important: het dashboard draait in Elementor en
   het thema overschrijft anders.
   ════════════════════════════════════════════════════════════════ */
.nx-root *, .nx-root *::before, .nx-root *::after {box-sizing: border-box !important; margin: 0 !important; padding: 0 !important;}
.nx-root {font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important; color: #0F172A !important; -webkit-font-smoothing: antialiased !important;}
.nx-root button {font-family: inherit !important;}
/* ─────────── ROOT WRAPPER (gedraagt zich als zelfstandig canvas, ook in Elementor) ─────────── */
.nx-root { position: relative !important; width: 100% !important; min-height: 760px !important; overflow: visible !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 30%, #F9FBFD 100%) !important; }
/* ─────────── BACKGROUND GLASS BLOBS ─────────── */
.nx-root .nx-bg {position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; overflow: hidden !important; background:
    radial-gradient(900px 600px at 12% -10%, rgba(0,123,255,.08), transparent 60%),
    radial-gradient(700px 500px at 95% 10%, rgba(99,102,241,.06), transparent 65%),
    radial-gradient(600px 500px at 50% 110%, rgba(56,189,248,.05), transparent 65%) !important;}
.nx-root .nx-blob {position: absolute !important; border-radius: 50% !important; filter: blur(60px) !important; opacity: .4 !important;}
.nx-root .nx-blob.b1 {width: 340px !important; height: 340px !important; top: -80px !important; right: 18% !important; background: radial-gradient(circle, rgba(0,123,255,.5), transparent 70%) !important;}
.nx-root .nx-blob.b2 {width: 280px !important; height: 280px !important; bottom: 8% !important; left: 32% !important; background: radial-gradient(circle, rgba(56,189,248,.35), transparent 70%) !important;}
/* ─────────── APP SHELL ─────────── */
.nx-root .nx-app {position: relative !important; z-index: 1 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; display: none !important;}
.nx-root .nx-app.ready {display: block !important;}
/* De Narratief-tool integreert in de dashboard-werkruimte (zoals INR Align): geen
   eigen kopbalk en geen ingelijst paneel. De canvas leeft direct in de ruimte. */
.nx-root .nx-canvas {background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important;}
.nx-root .nx-view {display: none !important;}
.nx-root .nx-view.active {display: block !important;}
/* Actiebalk binnen de oefening (vervangt de oude kopbalk-knop). Staat los
   bovenaan, met ruimte eronder zodat de voortgangsbalk er niet tegenaan botst. */
.nx-root .narr-actiebalk {display: flex !important; justify-content: flex-end !important; padding: 0 !important; margin: 0 0 20px 0 !important;}
.nx-root .narr-actiebalk .narr-btn-ghost {display: inline-flex !important; align-items: center !important; gap: 7px !important;}
.nx-root .narr-actiebalk svg {width: 16px !important; height: 16px !important;}
/* ─────────── NARRATIEF OEFENING ─────────── */
.nx-root #view-oefening {padding: 36px 44px 48px !important;}
.nx-root .narr-wrap {display: flex !important; gap: 22px !important; align-items: flex-start !important;}
.nx-root .narr-main {flex: 1 1 auto !important; min-width: 0 !important;}
.nx-root .narr-side {flex: 0 0 460px !important; position: sticky !important; top: 16px !important;}
.nx-root .narr-has-side .narr-main {max-width: 560px !important;}
.nx-root .narr-progress {margin-bottom: 18px !important;}
.nx-root .narr-progress-bar {height: 5px !important; border-radius: 99px !important; background: rgba(15,23,42,.07) !important; overflow: hidden !important;}
.nx-root .narr-progress-fill {height: 100% !important; border-radius: 99px !important; background: linear-gradient(90deg, #007BFF, #0EA5E9) !important; transition: width .35s ease !important;}
.nx-root .narr-scene-eyebrow {font-size: 11px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: #007BFF !important; margin-bottom: 6px !important;}
.nx-root .narr-scene-title {font-size: 26px !important; font-weight: 700 !important; letter-spacing: -.02em !important; color: #0F172A !important; margin: 0 0 16px 0 !important; line-height: 1.15 !important;}
.nx-root .narr-prompt {background: rgba(0,123,255,.05) !important; border: 1px solid rgba(0,123,255,.12) !important; border-radius: 13px !important; padding: 16px 18px !important; font-size: 15px !important; line-height: 1.6 !important; color: #1E293B !important; margin-bottom: 14px !important;}
.nx-root .narr-note {display: flex !important; gap: 9px !important; align-items: flex-start !important; font-size: 13px !important; line-height: 1.5 !important; color: #92660A !important; background: #FEF6E7 !important; border-radius: 10px !important; padding: 11px 14px !important; margin-bottom: 16px !important; font-style: italic !important;}
.nx-root .narr-note::before {content: '!' !important; flex: 0 0 auto !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; background: #F0B429 !important; color: #fff !important; font-style: normal !important; font-weight: 700 !important; font-size: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-top: 1px !important;}
.nx-root .narr-hint {font-size: 14px !important; color: #64748B !important; margin-bottom: 16px !important;}
.nx-root .narr-field {width: 100% !important; min-height: 140px !important; padding: 15px 16px !important; border: 1.5px solid rgba(15,23,42,.14) !important; border-radius: 12px !important; font-size: 15px !important; line-height: 1.6 !important; font-family: inherit !important; color: #0F172A !important; outline: none !important; resize: vertical !important; background: #fff !important; transition: border-color .15s ease !important;}
.nx-root .narr-field:focus {border-color: #007BFF !important; box-shadow: 0 0 0 3px rgba(0,123,255,.10) !important;}
.nx-root .narr-summary {margin-top: 13px !important; font-size: 14px !important; line-height: 1.6 !important; color: #0F172A !important; white-space: pre-wrap !important;}
.nx-root .narr-summary:not(:empty) {background: #F1F5F9 !important; border-left: 3px solid #007BFF !important; border-radius: 0 10px 10px 0 !important; padding: 12px 15px !important;}
.nx-root .narr-opbouw {font-size: 14px !important; line-height: 1.65 !important; color: #334155 !important; background: #F8FAFC !important; border: 1px solid rgba(15,23,42,.08) !important; border-radius: 12px !important; padding: 14px 16px !important; margin-bottom: 14px !important; white-space: pre-wrap !important;}
.nx-root .narr-needs {display: flex !important; gap: 10px !important; flex-wrap: wrap !important; margin-top: 4px !important;}
.nx-root .narr-need-btn {padding: 13px 22px !important; border-radius: 12px !important; border: 1.5px solid rgba(15,23,42,.14) !important; background: #fff !important; font-size: 15px !important; font-weight: 600 !important; color: #334155 !important; cursor: pointer !important; font-family: inherit !important; transition: all .15s ease !important;}
.nx-root .narr-need-btn:hover {border-color: #007BFF !important; color: #007BFF !important;}
.nx-root .narr-need-btn.active {background: linear-gradient(135deg, #007BFF, #0EA5E9) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 4px 14px rgba(0,123,255,.30) !important;}
.nx-root .narr-nav {display: flex !important; gap: 12px !important; margin-top: 24px !important;}
.nx-root .narr-btn-primary {padding: 13px 26px !important; border-radius: 12px !important; border: none !important; background: linear-gradient(135deg, #007BFF, #0EA5E9) !important; color: #fff !important; font-size: 15px !important; font-weight: 600 !important; cursor: pointer !important; font-family: inherit !important; box-shadow: 0 4px 14px rgba(0,123,255,.28) !important; transition: all .15s ease !important;}
.nx-root .narr-btn-primary:hover {transform: translateY(-1px) !important; box-shadow: 0 6px 18px rgba(0,123,255,.36) !important;}
.nx-root .narr-btn-ghost {padding: 13px 24px !important; border-radius: 12px !important; border: 1.5px solid rgba(15,23,42,.14) !important; background: #fff !important; color: #475569 !important; font-size: 15px !important; font-weight: 600 !important; cursor: pointer !important; font-family: inherit !important; transition: all .15s ease !important;}
.nx-root .narr-btn-ghost:hover {background: rgba(15,23,42,.04) !important;}
/* Contract list */
.nx-root .narr-contract {list-style: none !important; padding: 0 !important; margin: 0 0 22px 0 !important; counter-reset: narr-c !important;}
.nx-root .narr-contract li {position: relative !important; padding: 0 0 14px 40px !important; font-size: 15px !important; line-height: 1.55 !important; color: #1E293B !important; counter-increment: narr-c !important;}
.nx-root .narr-contract li::before {content: counter(narr-c) !important; position: absolute !important; left: 0 !important; top: 0 !important; width: 26px !important; height: 26px !important; border-radius: 8px !important; background: rgba(0,123,255,.10) !important; color: #007BFF !important; font-weight: 700 !important; font-size: 13px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;}
/* Quadrant */
.nx-root .narr-quad-title {font-size: 11px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: #64748B !important; margin-bottom: 10px !important; text-align: center !important;}
.nx-root .narr-quad {position: relative !important; display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: 1fr 1fr !important; gap: 16px !important;}
.nx-root .narr-cell {border-radius: 14px !important; padding: 17px !important; min-height: 150px !important; transition: box-shadow .2s ease, transform .2s ease !important;}
.nx-root .narr-cell-active {box-shadow: 0 0 0 2.5px #007BFF, 0 8px 22px rgba(0,123,255,.16) !important; transform: translateY(-1px) !important;}
.nx-root .narr-cell-label {font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; margin-bottom: 7px !important;}
.nx-root .narr-cell-text {font-size: 13.5px !important; line-height: 1.5 !important; color: #0F172A !important; white-space: pre-wrap !important; word-break: break-word !important;}
.nx-root .narr-cell-empty {color: #94A3B8 !important; font-style: italic !important;}
.nx-root .narr-quad-center {position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%,-50%) !important; width: 50px !important; height: 50px !important; border-radius: 50% !important; background: #fff !important; box-shadow: 0 4px 14px rgba(15,23,42,.16) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #007BFF !important; z-index: 2 !important;}
.nx-root .narr-quad-center svg {width: 24px !important; height: 24px !important;}
.nx-root .narr-quad-caption {font-size: 12px !important; line-height: 1.5 !important; color: #64748B !important; text-align: center !important; margin-top: 12px !important;}
/* big quadrant */
.nx-root .narr-quad-lg {gap: 16px !important; max-width: 660px !important;}
.nx-root .narr-quad-lg .narr-cell {min-height: 190px !important; padding: 22px !important;}
.nx-root .narr-quad-lg .narr-cell-label {font-size: 11.5px !important; margin-bottom: 10px !important;}
.nx-root .narr-quad-lg .narr-cell-text {font-size: 15px !important; line-height: 1.55 !important;}
.nx-root .narr-quad-lg .narr-quad-center {width: 58px !important; height: 58px !important;}
.nx-root .narr-quad-lg .narr-quad-center svg {width: 27px !important; height: 27px !important;}
.nx-root .narr-loop-quad {max-width: 660px !important; margin-top: 6px !important;}
/* Result */
.nx-root .narr-zin-label {font-size: 11px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: #007BFF !important; margin-bottom: 8px !important;}
.nx-root .narr-zin {font-size: 25px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: -.02em !important; color: #0F172A !important; margin-bottom: 14px !important; white-space: pre-wrap !important;}
.nx-root .narr-behoefte {display: inline-block !important; font-size: 14px !important; color: #475569 !important; background: #F1F5F9 !important; border-radius: 99px !important; padding: 7px 16px !important; margin-bottom: 24px !important;}
.nx-root .narr-behoefte strong {color: #007BFF !important;}
.nx-root .narr-result-quad {max-width: 660px !important; margin: 0 0 24px 0 !important;}
.nx-root .narr-result-btns {display: flex !important; gap: 12px !important; flex-wrap: wrap !important;}
/* ─────────── MIJN SESSIES ─────────── */
.nx-root #view-sessies {padding: 38px 44px 48px !important;}
.nx-root .nx-sess-header {margin-bottom: 28px !important;}
.nx-root .nx-sess-eyebrow {font-weight: 600 !important; font-size: 11px !important; letter-spacing: .18em !important; text-transform: uppercase !important; color: #007BFF !important; margin: 0 0 10px 0 !important;}
.nx-root .nx-sess-title {font-weight: 700 !important; font-size: 30px !important; line-height: 1.15 !important; letter-spacing: -.022em !important; margin: 0 0 10px 0 !important;}
.nx-root .nx-sess-lead {font-weight: 400 !important; font-size: 15px !important; line-height: 1.6 !important; color: #475569 !important; margin: 0 !important; max-width: 640px !important;}
.nx-root .nx-sess-grid {display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: 14px !important;}
.nx-root .nx-sess-card {position: relative !important; background: #fff !important; border: 1px solid rgba(15,23,42,.08) !important; border-radius: 14px !important; padding: 20px 22px 18px !important; cursor: pointer !important; transition: all .2s ease !important; text-align: left !important; font-family: inherit !important; display: flex !important; flex-direction: column !important; gap: 10px !important;}
.nx-root .nx-sess-card:hover {transform: translateY(-2px) !important; box-shadow: 0 14px 32px rgba(15,23,42,.08) !important; border-color: rgba(0,123,255,.18) !important;}
.nx-root .nx-sess-card-name {font-weight: 700 !important; font-size: 15px !important; line-height: 1.3 !important; letter-spacing: -.005em !important; word-break: break-word !important;}
.nx-root .nx-sess-card-date {font-weight: 500 !important; font-size: 12px !important; color: #64748B !important;}
.nx-root .nx-sess-card-zin {font-weight: 400 !important; font-size: 13.5px !important; line-height: 1.5 !important; color: #334155 !important; padding-top: 8px !important; border-top: 1px solid rgba(15,23,42,.06) !important; font-style: italic !important;}
.nx-root .nx-sess-card-zin.empty {color: #94A3B8 !important;}
.nx-root .nx-sess-card-tag {display: inline-flex !important; align-self: flex-start !important; padding: 3px 10px !important; background: rgba(0,123,255,.07) !important; border-radius: 99px !important; font-weight: 600 !important; font-size: 10.5px !important; letter-spacing: .04em !important; color: #007BFF !important;}
.nx-root .nx-sess-card-menu {position: absolute !important; top: 14px !important; right: 14px !important; opacity: 0 !important; transition: opacity .15s ease !important;}
.nx-root .nx-sess-card:hover .nx-sess-card-menu {opacity: 1 !important;}
.nx-root .nx-sess-menu-btn {background: #fff !important; border: 1px solid rgba(15,23,42,.08) !important; border-radius: 8px !important; padding: 6px !important; cursor: pointer !important; color: #64748B !important; transition: all .15s ease !important;}
.nx-root .nx-sess-menu-btn:hover {color: #0F172A !important; border-color: rgba(15,23,42,.20) !important;}
.nx-root .nx-sess-menu-dropdown {position: absolute !important; top: 42px !important; right: 0 !important; background: #fff !important; border: 1px solid rgba(15,23,42,.08) !important; border-radius: 10px !important; padding: 6px !important; box-shadow: 0 12px 32px rgba(15,23,42,.12) !important; min-width: 160px !important; z-index: 10 !important; display: none !important;}
.nx-root .nx-sess-menu-dropdown.open {display: block !important;}
.nx-root .nx-sess-menu-item {display: block !important; width: 100% !important; padding: 8px 12px !important; background: transparent !important; border: none !important; border-radius: 6px !important; text-align: left !important; font-family: inherit !important; font-weight: 500 !important; font-size: 13px !important; color: #334155 !important; cursor: pointer !important; transition: background .12s ease !important;}
.nx-root .nx-sess-menu-item:hover {background: rgba(15,23,42,.05) !important; color: #0F172A !important;}
.nx-root .nx-sess-menu-item.danger {color: #DC2626 !important;}
.nx-root .nx-sess-menu-item.danger:hover {background: rgba(220,38,38,.06) !important; color: #B91C1C !important;}
.nx-root .nx-sess-empty {padding: 60px 30px !important; text-align: center !important; background: rgba(255,255,255,.5) !important; border: 2px dashed rgba(15,23,42,.10) !important; border-radius: 16px !important;}
.nx-root .nx-sess-empty-icon {width: 54px !important; height: 54px !important; border-radius: 14px !important; background: linear-gradient(135deg, rgba(0,123,255,.10), rgba(14,165,233,.06)) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #007BFF !important; margin-bottom: 16px !important;}
.nx-root .nx-sess-empty-title {font-weight: 700 !important; font-size: 18px !important; letter-spacing: -.012em !important; margin: 0 0 8px 0 !important;}
.nx-root .nx-sess-empty-desc {font-weight: 400 !important; font-size: 14px !important; line-height: 1.55 !important; color: #64748B !important; margin: 0 auto 18px !important; max-width: 400px !important;}
.nx-root .nx-sess-footer {margin-top: 30px !important; padding-top: 20px !important; border-top: 1px solid rgba(15,23,42,.06) !important; display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important;}
.nx-root .nx-sess-foot-text {font-weight: 400 !important; font-size: 12px !important; color: #94A3B8 !important; margin: 0 !important; line-height: 1.5 !important;}
.nx-root .nx-sess-wipe {background: transparent !important; border: none !important; color: #94A3B8 !important; font-family: inherit !important; font-size: 12px !important; font-weight: 600 !important; cursor: pointer !important; padding: 6px 10px !important; border-radius: 6px !important; transition: all .15s ease !important;}
.nx-root .nx-sess-wipe:hover {color: #DC2626 !important; background: rgba(220,38,38,.06) !important;}
/* View banner */
.nx-root .nx-view-banner {display: flex !important; align-items: center !important; gap: 14px !important; padding: 14px 28px !important; background: linear-gradient(135deg, rgba(0,123,255,.06), rgba(14,165,233,.04)) !important; border-bottom: 1px solid rgba(0,123,255,.15) !important;}
.nx-root .nx-view-banner-icon {width: 32px !important; height: 32px !important; border-radius: 9px !important; background: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #007BFF !important; flex-shrink: 0 !important; box-shadow: 0 2px 6px rgba(0,123,255,.12) !important;}
.nx-root .nx-view-banner-text {flex: 1 !important;}
.nx-root .nx-view-banner-eyebrow {font-weight: 600 !important; font-size: 10px !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: #007BFF !important; margin: 0 0 2px 0 !important;}
.nx-root .nx-view-banner-name {font-weight: 700 !important; font-size: 14px !important; letter-spacing: -.005em !important; margin: 0 !important;}
.nx-root .nx-view-banner-close {background: transparent !important; border: 1px solid rgba(15,23,42,.12) !important; border-radius: 8px !important; padding: 7px 14px !important; font-family: inherit !important; font-weight: 600 !important; font-size: 13px !important; color: #475569 !important; cursor: pointer !important; transition: all .15s ease !important; flex-shrink: 0 !important;}
.nx-root .nx-view-banner-close:hover {color: #0F172A !important; border-color: rgba(15,23,42,.25) !important; background: rgba(15,23,42,.04) !important;}
/* Ontvangen sessie: read-only weergave */
.nx-root .nx-view-banner.readonly {background: linear-gradient(135deg, rgba(124,92,246,.07), rgba(124,92,246,.03)) !important; border-bottom: 1px solid rgba(124,92,246,.18) !important;}
.nx-root .nx-view-banner.readonly .nx-view-banner-icon {color: #7C5CF6 !important;}
.nx-root .nx-view-banner.readonly .nx-view-banner-eyebrow {color: #7C5CF6 !important;}
.nx-root .nx-view-banner-herkomst {font-size: 12px !important; font-weight: 500 !important; color: #6A6A77 !important; margin: 3px 0 0 0 !important;}
.nx-root .narr-field.readonly {background: #F7F8FA !important; color: #475569 !important; cursor: default !important; resize: none !important; border-color: rgba(15,23,42,.10) !important;}
.nx-root .narr-field.readonly:focus {border-color: rgba(15,23,42,.10) !important; box-shadow: none !important;}
/* Hervat banner */
.nx-root .nx-hervat {display: flex !important; align-items: center !important; gap: 14px !important; margin: 0 0 18px 0 !important; padding: 14px 18px !important; background: linear-gradient(135deg, rgba(0,123,255,.06), rgba(14,165,233,.05)) !important; border: 1px solid rgba(0,123,255,.18) !important; border-radius: 12px !important;}
.nx-root .nx-hervat-icon {width: 36px !important; height: 36px !important; border-radius: 10px !important; background: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #007BFF !important; flex-shrink: 0 !important; box-shadow: 0 2px 6px rgba(0,123,255,.12) !important;}
.nx-root .nx-hervat-text {flex: 1 !important;}
.nx-root .nx-hervat-title {font-weight: 700 !important; font-size: 14px !important; margin: 0 0 2px 0 !important; letter-spacing: -.005em !important;}
.nx-root .nx-hervat-sub {font-weight: 400 !important; font-size: 13px !important; color: #475569 !important; margin: 0 !important; line-height: 1.4 !important;}
.nx-root .nx-hervat-actions {display: flex !important; gap: 8px !important; flex-shrink: 0 !important;}
.nx-root .nx-hervat-btn {display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 8px 14px !important; border-radius: 8px !important; font-family: inherit !important; font-weight: 600 !important; font-size: 13px !important; cursor: pointer !important; transition: all .15s ease !important; border: none !important;}
.nx-root .nx-hervat-btn.primary {background: #007BFF !important; color: #fff !important;}
.nx-root .nx-hervat-btn.primary:hover {background: #0066D9 !important;}
.nx-root .nx-hervat-btn.ghost {background: transparent !important; color: #64748B !important; border: 1px solid rgba(15,23,42,.10) !important;}
.nx-root .nx-hervat-btn.ghost:hover {color: #0F172A !important; border-color: rgba(15,23,42,.20) !important; background: rgba(15,23,42,.03) !important;}
/* ─────────── MODAL ─────────── */
.nx-root .nx-modal-overlay {position: fixed !important; inset: 0 !important; background: rgba(15,23,42,.45) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; z-index: 9999 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 20px !important; opacity: 0 !important; transition: opacity .2s ease !important; pointer-events: none !important;}
.nx-root .nx-modal-overlay.open {opacity: 1 !important; pointer-events: auto !important;}
.nx-root .nx-modal {background: #fff !important; border-radius: 16px !important; padding: 32px 30px 28px !important; max-width: 440px !important; width: 100% !important; box-shadow: 0 25px 60px rgba(15,23,42,.30) !important; transform: translateY(8px) scale(.98) !important; transition: transform .2s ease !important;}
.nx-root .nx-modal-overlay.open .nx-modal {transform: translateY(0) scale(1) !important;}
.nx-root .nx-modal-eyebrow {font-weight: 600 !important; font-size: 10px !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: #007BFF !important; margin: 0 0 10px 0 !important;}
.nx-root .nx-modal-title {font-weight: 700 !important; font-size: 22px !important; line-height: 1.25 !important; letter-spacing: -.018em !important; margin: 0 0 8px 0 !important;}
.nx-root .nx-modal-help {font-weight: 400 !important; font-size: 14px !important; line-height: 1.55 !important; color: #475569 !important; margin: 0 0 20px 0 !important;}
.nx-root .nx-modal-input {width: 100% !important; padding: 13px 14px !important; font-family: inherit !important; font-size: 15px !important; font-weight: 400 !important; border: 1.5px solid rgba(15,23,42,.14) !important; border-radius: 10px !important; color: #0F172A !important; background: #fff !important; outline: none !important; transition: border-color .15s ease, box-shadow .15s ease !important;}
.nx-root .nx-modal-input:focus {border-color: #007BFF !important; box-shadow: 0 0 0 3px rgba(0,123,255,.10) !important;}
.nx-root .nx-modal-actions {display: flex !important; justify-content: flex-end !important; gap: 8px !important; margin-top: 22px !important;}
.nx-root .nx-modal-btn {padding: 10px 18px !important; border-radius: 8px !important; font-family: inherit !important; font-weight: 600 !important; font-size: 14px !important; cursor: pointer !important; transition: all .15s ease !important; border: none !important;}
.nx-root .nx-modal-btn.primary {background: #007BFF !important; color: #fff !important;}
.nx-root .nx-modal-btn.primary:hover {background: #0066D9 !important;}
.nx-root .nx-modal-btn.ghost {background: transparent !important; color: #64748B !important; border: 1px solid rgba(15,23,42,.10) !important;}
.nx-root .nx-modal-btn.ghost:hover {color: #0F172A !important; border-color: rgba(15,23,42,.20) !important;}
/* Toast */
.nx-root .nx-toast {position: absolute !important; bottom: 24px !important; left: 50% !important; transform: translateX(-50%) translateY(20px) !important; background: #0F172A !important; color: #fff !important; padding: 12px 20px !important; border-radius: 99px !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: -.005em !important; box-shadow: 0 12px 32px rgba(15,23,42,.30) !important; z-index: 9998 !important; opacity: 0 !important; transition: all .25s ease !important; pointer-events: none !important; display: flex !important; align-items: center !important; gap: 8px !important;}
.nx-root .nx-toast.show {opacity: 1 !important; transform: translateX(-50%) translateY(0) !important;}
/* ─────────── RESPONSIVE ─────────── */
@media (max-width: 900px) {
.nx-root .narr-wrap {flex-direction: column !important;}
.nx-root .narr-side {flex: 1 1 auto !important; width: 100% !important; position: static !important; margin-top: 8px !important;}
.nx-root .narr-has-side .narr-main {max-width: 100% !important;}
.nx-root .narr-scene-title {font-size: 22px !important;}
.nx-root .narr-zin {font-size: 21px !important;}
}
@media (max-width: 768px) {
.nx-root .nx-app {padding: 10px !important;}
.nx-root .nx-header {padding: 12px 16px !important; flex-wrap: wrap !important;}
.nx-root .nx-header-btn span {display: none !important;}
.nx-root .nx-header-btn {padding: 9px 11px !important;}
.nx-root #view-oefening {padding: 22px 18px 36px !important;}
.nx-root #view-sessies {padding: 24px 18px 36px !important;}
.nx-root .nx-sess-title {font-size: 24px !important;}
.nx-root .nx-sess-grid {grid-template-columns: 1fr !important;}
.nx-root .nx-sess-card-menu {opacity: 1 !important;}
.nx-root .narr-nav {flex-direction: column !important;}
.nx-root .narr-nav button {width: 100% !important;}
.nx-root .narr-result-btns {flex-direction: column !important;}
.nx-root .narr-result-btns button {width: 100% !important;}
.nx-root .nx-modal {padding: 24px 22px 22px !important; max-width: calc(100vw - 30px) !important;}
}