@charset "UTF-8";

:root {
  --bg: #0d0e14;
  --surface: #13151e;
  --surface-2: #1a1c28;
  --ink: #ffffff;
  --muted: #8b8fa8;
  --accent: #b931fc;
  --accent-2: #22d3ee;
  --line: rgba(185, 49, 252, 0.2);
  --border: rgba(255, 255, 255, 0.08);
}

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

html {
  background: var(--bg);
  color: var(--ink);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--bg);
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body.defyne-editor,
body.defyne-profile {
  overflow-x: hidden;
}

/* Shared primitives */
.btn,
.df-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Montserrat', sans-serif;
}

.df-btn-pill {
  padding: 8px 20px;
  border-radius: 40px;
  font-size: 13px;
  font-weight: 500;
  border: none;
}

.df-btn-ghost.df-btn-ghost-bright {
  color: var(--ink);
}

.df-btn-solid-light {
  background: var(--ink);
  color: var(--bg);
}

.df-btn-solid-light:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-1px);
}

body.defyne-editor .nav,
body.defyne-profile .nav {
  position: sticky;
  top: 0;
  z-index: 200;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--gold-line);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn-ghost,
.df-btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
}

.btn-ghost:hover,
.df-btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn.primary,
.btn-primary,
.df-btn-primary,
.btn-submit {
  background: linear-gradient(135deg, var(--accent), #6b4eff);
  color: #fff;
}

.df-brand,
.logo,
.nav-logo {
  font-family: 'Montserrat', sans-serif;
  font-size: 36px;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* Cross-page visual language */
.df-overline,
.ol {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}

.df-title-display,
.df-title-section,
.df-section-title {
  letter-spacing: -0.01em;
  line-height: 1.12;
}

.df-title-hero {
  font-family: 'Montserrat', sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  color: #ffffff;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #ffffff 40%, #d89dff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.df-title-section,
.df-section-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 36px;
  font-weight: 300;
  background: linear-gradient(135deg, #ffffff 38%, #d89dff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.df-title-section.df-title-auth {
  font-size: 32px;
  margin-bottom: 6px;
}

.df-title-display {
  background: linear-gradient(135deg, #ffffff 46%, #d89dff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.df-section-title {
  margin-top: 10px;
  margin-bottom: 0;
}

.df-section-title.df-section-title-compact {
  margin-bottom: 20px;
}

.df-text-muted,
.subtitle {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.df-section-header .df-overline {
  margin-bottom: 8px;
}

.df-section-header .df-text-muted {
  margin-top: 8px;
}

.df-subtitle {
  margin-bottom: 28px;
}

.df-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--df-form-group-margin-bottom, 16px);
}

.df-form-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mu, var(--muted));
  margin-bottom: 0;
}

.df-form-label .req {
  color: var(--go, var(--accent));
  font-size: 12px;
  line-height: 1;
}

.df-form-input {
  width: 100%;
  padding: var(--df-input-padding, 12px 14px);
  background: var(--surface2, var(--surface-2));
  border: 1px solid var(--bd, var(--border));
  border-radius: 8px;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.df-form-input::placeholder {
  color: var(--mu, var(--muted));
}

.df-form-input:focus {
  border-color: var(--bd-focus, rgba(185, 49, 252, 0.6));
  box-shadow: 0 0 0 3px var(--gl, rgba(185, 49, 252, 0.12));
}

.df-form-input.error {
  border-color: var(--red, #f43f5e);
  box-shadow: 0 0 0 3px var(--red-l, rgba(244, 63, 94, 0.1));
}

.df-form-error {
  font-size: 11px;
  color: var(--red, #f43f5e);
  margin-top: var(--df-form-error-margin-top, 5px);
  display: none;
}

.df-form-error.show {
  display: block;
}

.df-form-hint {
  font-size: 11px;
  color: var(--mu, var(--muted));
  font-style: italic;
  margin-top: 3px;
  line-height: 1.5;
}

.df-form-textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.7;
}

.df-form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B8FA8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.df-form-select option {
  background: var(--surface2, var(--surface-2));
}

.df-char-counter {
  font-size: 10px;
  color: var(--mu, var(--muted));
  text-align: right;
  margin-top: 3px;
  transition: color 0.2s;
}

.df-char-counter.warn {
  color: #f59e0b;
}

.df-char-counter.over {
  color: var(--red, #f43f5e);
}

.df-btn-block {
  width: 100%;
  padding: 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: none;
  position: relative;
  overflow: hidden;
}

.df-btn-block:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-submit,
.btn.primary {
  box-shadow: 0 6px 22px rgba(185, 49, 252, 0.32);
}

.btn-submit:hover,
.btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(185, 49, 252, 0.45);
}

/* Auth page */
body.defyne-auth {
  --surface2: var(--surface-2);
  --i70: rgba(255, 255, 255, 0.7);
  --i40: rgba(255, 255, 255, 0.4);
  --mu: var(--muted);
  --go: var(--accent);
  --gl: rgba(185, 49, 252, 0.12);
  --gm: rgba(185, 49, 252, 0.28);
  --bd: var(--border);
  --bd-focus: rgba(185, 49, 252, 0.6);
  --green: #22c55e;
  --green-l: rgba(34, 197, 94, 0.12);
  --red: #f43f5e;
  --red-l: rgba(244, 63, 94, 0.1);
  --gold-line: var(--line);
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

body.defyne-auth,
body.defyne-auth * ,
body.defyne-auth *::before,
body.defyne-auth *::after {
  box-sizing: border-box;
}

body.defyne-auth * {
  margin: 0;
  padding: 0;
}

body.defyne-auth .panel-left {
  background: linear-gradient(160deg, #0d0e14 0%, #130920 60%, #0d0e14 100%);
  border-right: 1px solid var(--gold-line);
  padding: 48px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

body.defyne-auth .panel-left::before {
  content: '';
  position: absolute;
  top: -100px;
  left: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185, 49, 252, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

body.defyne-auth .logo {
  margin-bottom: auto;
}

body.defyne-auth .left-body {
  margin: auto 0;
  max-width: 360px;
}

body.defyne-auth .left-overline {
  margin-bottom: 16px;
}

body.defyne-auth .left-title {
  margin-bottom: 20px;
}

body.defyne-auth .left-title em {
  font-style: italic;
  color: rgba(255, 255, 255, 0.6);
}

body.defyne-auth .left-desc {
  margin-bottom: 36px;
}

body.defyne-auth .left-pills {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.defyne-auth .left-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--gl);
  border: 1px solid var(--gm);
}

body.defyne-auth .left-pill-ico {
  font-size: 18px;
  flex-shrink: 0;
}

body.defyne-auth .left-pill-text {
  font-size: 12px;
  color: var(--i70);
  line-height: 1.5;
}

body.defyne-auth .left-pill-text strong {
  color: var(--ink);
  display: block;
  margin-bottom: 2px;
  font-size: 13px;
}

body.defyne-auth .left-footer {
  margin-top: auto;
  font-size: 11px;
  color: var(--mu);
  border-top: 1px solid var(--bd);
  padding-top: 20px;
}

body.defyne-auth .panel-right {
  background: var(--bg);
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  min-height: 100vh;
}

body.defyne-auth .auth-box {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
}

body.defyne-auth .auth-tabs {
  display: flex;
  gap: 2px;
  background: var(--surface);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 32px;
}

body.defyne-auth .auth-tab {
  flex: 1;
  padding: 9px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  color: var(--mu);
  background: transparent;
  transition: all 0.2s;
}

body.defyne-auth .auth-tab.active {
  background: var(--go);
  color: #fff;
  box-shadow: 0 4px 16px rgba(185, 49, 252, 0.3);
}

body.defyne-auth .btn-submit .spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: defyne-spin 0.6s linear infinite;
  margin: 0 auto;
}

body.defyne-auth .btn-submit.loading .btn-text {
  display: none;
}

body.defyne-auth .btn-submit.loading .spinner {
  display: block;
}

body.defyne-auth .oauth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
}

body.defyne-auth .oauth-line {
  flex: 1;
  height: 1px;
  background: var(--bd);
}

body.defyne-auth .oauth-text {
  font-size: 11px;
  color: var(--mu);
  flex-shrink: 0;
}

body.defyne-auth .oauth-btn {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--bd);
  border-radius: 8px;
  background: var(--surface);
  font-size: 13px;
  color: var(--i70);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
  transition: border-color 0.2s, background 0.2s;
}

body.defyne-auth .oauth-btn:hover {
  border-color: var(--go);
  background: var(--gl);
  color: var(--ink);
}

body.defyne-auth .oauth-ico {
  font-size: 16px;
  font-weight: 700;
}

body.defyne-auth .pwd-strength {
  margin-top: 6px;
  height: 3px;
  background: var(--bd);
  border-radius: 2px;
  overflow: hidden;
}

body.defyne-auth .pwd-strength-bar {
  height: 100%;
  border-radius: 2px;
  width: 0;
  transition: width 0.3s, background 0.3s;
}

body.defyne-auth .pwd-hint {
  font-size: 11px;
  color: var(--mu);
  margin-top: 4px;
}

body.defyne-auth .alert {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 16px;
  display: none;
}

body.defyne-auth .alert.show {
  display: block;
}

body.defyne-auth .alert-success {
  background: var(--green-l);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: var(--green);
}

body.defyne-auth .alert-error {
  background: var(--red-l);
  border: 1px solid rgba(244, 63, 94, 0.2);
  color: var(--red);
}

body.defyne-auth .alert-info {
  background: var(--gl);
  border: 1px solid var(--gm);
  color: #d89dff;
}

body.defyne-auth .terms {
  font-size: 11px;
  color: var(--mu);
  text-align: center;
  margin-top: 14px;
  line-height: 1.6;
}

body.defyne-auth .terms a {
  color: var(--go);
  text-decoration: underline;
  cursor: pointer;
}

body.defyne-auth .auth-form {
  animation: defyne-fade-up 0.3s ease;
}

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

@keyframes defyne-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Selection page */
body.defyne-select {
  --panel: var(--surface);
  --line: rgba(185, 49, 252, 0.25);
  --text: var(--ink);
  --muted: #9aa0b7;
  background:
    radial-gradient(
      1100px 700px at -10% -20%,
      rgba(34, 211, 238, 0.12),
      transparent 60%
    ),
    radial-gradient(
      900px 700px at 120% 0%,
      rgba(185, 49, 252, 0.15),
      transparent 55%
    ),
    var(--bg);
  color: var(--text);
}
            body.defyne-select main {
width: min(1100px, 92vw);
                margin: 40px auto 56px;
            }
            body.defyne-select .header {
display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                gap: 18px;
                align-items: end;
                margin-bottom: 18px;
            }
            body.defyne-select .df-brand span {
color: var(--accent);
            }
            body.defyne-select .subtitle.df-text-muted {
                max-width: 70ch;
            }
            body.defyne-select .toolbar {
display: flex;
                gap: 10px;
                align-items: center;
                margin: 14px 0 26px;
            }
            body.defyne-select .df-btn {
border: 1px solid var(--line);
                background: rgba(255, 255, 255, 0.02);
                color: var(--text);
                border-radius: 12px;
                padding: 10px 14px;
                font-size: 13px;
                font-weight: 600;
            }
            body.defyne-select .df-btn:hover {
border-color: rgba(185, 49, 252, 0.55);
            }
            body.defyne-select .df-btn.df-btn-primary {
                border: none;
            }
            body.defyne-select .df-btn:disabled {
opacity: 0.45;
                cursor: not-allowed;
            }
            body.defyne-select .status {
color: var(--muted);
                font-size: 13px;
            }
            body.defyne-select .grid {
display: grid;
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                gap: 16px;
            }
            body.defyne-select .card {
background: var(--panel);
                border: 1px solid rgba(255, 255, 255, 0.09);
                border-radius: 14px;
                padding: 16px;
                transition:
                    0.2s border-color, 0.2s transform, 0.2s box-shadow;
                cursor: pointer;
            }
            body.defyne-select .card:hover {
border-color: rgba(185, 49, 252, 0.45);
                transform: translateY(-2px);
                box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
            }
            body.defyne-select .card.selected {
border-color: var(--accent);
                box-shadow:
                    0 0 0 1px rgba(185, 49, 252, 0.35), 0 12px 30px rgba(185, 49, 252, 0.2);
            }
            body.defyne-select .name {
font-size: 18px;
                font-weight: 700;
                margin-bottom: 4px;
            }
            body.defyne-select .role {
color: #e5e7ff;
                font-size: 14px;
                margin-bottom: 8px;
            }
            body.defyne-select .meta {
font-size: 12px;
                color: var(--muted);
                margin-bottom: 10px;
            }
            body.defyne-select .tags {
display: flex;
                flex-wrap: wrap;
                gap: 6px;
                margin-bottom: 12px;
            }
            body.defyne-select .tag {
font-size: 11px;
                padding: 3px 9px;
                border-radius: 999px;
                border: 1px solid rgba(255, 255, 255, 0.12);
                color: #d8dbff;
            }
            body.defyne-select .row {
display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 8px;
            }
            body.defyne-select .small {
font-size: 11px;
                color: var(--muted);
            }
            body.defyne-select .link-btn {
background: none;
                border: none;
                color: var(--accent-2);
                font-size: 12px;
                cursor: pointer;
                padding: 0;
            }
            body.defyne-select .empty {
                border: 1px dashed rgba(255, 255, 255, 0.25);
                background: rgba(255, 255, 255, 0.02);
                border-radius: 12px;
                padding: 18px;
                color: var(--muted);
            }

/* Editor page */
body.defyne-editor {
  --surface2: var(--surface-2);
  --i70:rgba(255, 255, 255, .70);
  --i40:rgba(255, 255, 255, .40);
  --i12:rgba(255, 255, 255, .08);
  --i04:rgba(255, 255, 255, .04);
  --mu: var(--muted);
  --go: var(--accent);
  --gl:rgba(185, 49, 252, .12);
  --gm:rgba(185, 49, 252, .28);
  --bd: var(--border);
  --bd-focus:rgba(185, 49, 252, .6);
  --green:#22C55E;
  --green-l:rgba(34, 197, 94, .12);
  --red:#F43F5E;
  --red-l:rgba(244, 63, 94, .1);
  --gold-line: var(--line);
  --df-form-group-margin-bottom: 0px;
  --df-input-padding: 11px 14px;
  --df-form-error-margin-top: 3px;
}

body.defyne-editor .nav {
  background: rgba(13, 14, 20, .94);
  padding: 0 40px;
  gap: 20px;
}
body.defyne-editor .nav-logo span {color:var(--go)}
body.defyne-editor .nav-center {display:flex;align-items:center;gap:12px;flex:1;justify-content:center}
body.defyne-editor .completion-wrap {display:flex;align-items:center;gap:10px}
body.defyne-editor .completion-bar {width:160px;height:5px;background:var(--i12);border-radius:3px;overflow:hidden}
body.defyne-editor .completion-fill {height:100%;background:linear-gradient(90deg,var(--go),#6B4EFF);border-radius:3px;transition:width .5s cubic-bezier(.4,0,.2,1)}
body.defyne-editor .completion-pct {font-size:11px;font-weight:700;color:var(--go);letter-spacing:.06em}
body.defyne-editor .nav-actions {display:flex;align-items:center;gap:8px}
body.defyne-editor .dispo-toggle {display:flex;gap:2px;background:var(--i12);border-radius:20px;padding:3px}
body.defyne-editor .dispo-btn {
padding:4px 12px;border-radius:16px;font-family:'Montserrat', sans-serif;
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border:none;cursor:pointer;color:var(--mu);background:transparent;
  transition:all .2s
}
body.defyne-editor .dispo-btn.active-now {background:var(--green-l);color:var(--green)}
body.defyne-editor .dispo-btn.active-open {background:var(--gl);color:var(--go)}
body.defyne-editor .dispo-btn.active-off {background:var(--i12);color:var(--mu)}
body.defyne-editor .autosave {font-size:11px;color:var(--mu);display:flex;align-items:center;gap:6px;transition:color .3s}
body.defyne-editor .autosave.saved {color:var(--green)}
body.defyne-editor .autosave .dot {width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
body.defyne-editor .df-btn {padding:8px 18px;border-radius:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:none;white-space:nowrap}
body.defyne-editor .df-btn-ghost {color:var(--i70)}
body.defyne-editor .df-btn-primary {box-shadow:0 4px 16px rgba(185,49,252,.3)}
body.defyne-editor .df-btn-primary:hover {transform:translateY(-1px);box-shadow:0 8px 24px rgba(185,49,252,.4)}
body.defyne-editor .nav-actions .btn-action-chip {
height: 40px;
padding: 0 16px;
border-radius: 40px;
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
border: 1px solid transparent;
box-shadow:
  inset 0 0 0 1px rgba(255,255,255,.03),
  0 6px 20px rgba(0, 0, 0, .2);
}
body.defyne-editor .nav-actions .btn-action-chip:hover {
transform: translateY(-1px);
border-color: transparent;
box-shadow:
  inset 0 0 0 1px rgba(255,255,255,.06),
  0 10px 28px rgba(0, 0, 0, .3);
}
body.defyne-editor .btn-preview {
background:
  linear-gradient(rgba(13, 14, 20, .96), rgba(13, 14, 20, .96)) padding-box,
  linear-gradient(135deg, #22d3ee 0%, #6b4eff 52%, #b931fc 100%) border-box;
color: #dbeafe;
}
body.defyne-editor .btn-preview:hover {
background:
  linear-gradient(rgba(9, 12, 24, .96), rgba(9, 12, 24, .96)) padding-box,
  linear-gradient(135deg, #67e8f9 0%, #8b5cf6 52%, #d8b4fe 100%) border-box;
color: #f0f9ff;
}
body.defyne-editor .btn-publish {
background:
  linear-gradient(rgba(13, 14, 20, .96), rgba(13, 14, 20, .96)) padding-box,
  linear-gradient(135deg, #b931fc 0%, #6b4eff 52%, #22d3ee 100%) border-box;
color: #fff;
}
body.defyne-editor .btn-publish:hover {
background:
  linear-gradient(rgba(13, 14, 20, .96), rgba(13, 14, 20, .96)) padding-box,
  linear-gradient(135deg, #d89dff 0%, #8b5cf6 52%, #67e8f9 100%) border-box;
}
body.defyne-editor .btn-logout {
background:
  linear-gradient(rgba(13, 14, 20, .96), rgba(13, 14, 20, .96)) padding-box,
  linear-gradient(135deg, #ef4444 0%, #f97316 52%, #ef4444 100%) border-box;
color: #ffd5cc;
margin-left: 16px;
}
body.defyne-editor .btn-logout:hover {
background:
  linear-gradient(rgba(26, 10, 10, .96), rgba(26, 10, 10, .96)) padding-box,
  linear-gradient(135deg, #fb7185 0%, #f97316 52%, #fb7185 100%) border-box;
color: #fff1ee;
}
body.defyne-editor .btn-danger {background:var(--red-l);color:var(--red);border:1px solid rgba(244,63,94,.2)}
body.defyne-editor .btn-danger:hover {background:rgba(244,63,94,.2)}
body.defyne-editor .btn-sm {padding:5px 12px;font-size:10px}
body.defyne-editor .btn-icon {width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:14px}
body.defyne-editor .layout {display:grid;grid-template-columns:220px 1fr 280px;min-height:calc(100vh - 60px)}
body.defyne-editor .sidebar {
background:var(--surface);border-right:1px solid var(--bd);
  padding:32px 16px;position:sticky;top:60px;height:calc(100vh - 60px);
  overflow-y:auto;display:flex;flex-direction:column;gap:4px
}
body.defyne-editor .sidebar-section {font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mu);padding:16px 10px 6px;margin-top:4px}
body.defyne-editor .sidebar-section:first-child {padding-top:0}
body.defyne-editor .nav-item {
display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:8px;
  font-size:12px;font-weight:500;color:var(--i70);
  cursor:pointer;transition:all .15s;border:none;background:transparent;
  text-align:left;width:100%
}
body.defyne-editor .nav-item:hover {background:var(--i04);color:var(--ink)}
body.defyne-editor .nav-item.active {background:var(--gl);color:var(--go);font-weight:600}
body.defyne-editor .nav-item .ni-ico {font-size:14px;flex-shrink:0;width:20px;text-align:center}
body.defyne-editor .nav-item .ni-check {margin-left:auto;font-size:10px;color:var(--green);opacity:0;transition:opacity .2s}
body.defyne-editor .nav-item.done .ni-check {opacity:1}
body.defyne-editor .main {padding:40px 48px;overflow-y:auto;max-height:calc(100vh - 60px)}
body.defyne-editor .section-block {display:none}
body.defyne-editor .section-block.active {display:block}
body.defyne-editor .sec-header {margin-bottom:32px}
body.defyne-editor .form-grid {display:grid;gap:20px}
body.defyne-editor .form-grid-2 {grid-template-columns:1fr 1fr}
body.defyne-editor .feeling-field {
background:var(--gl);border:1px solid var(--gm);border-radius:10px;
  padding:14px 16px;margin-top:4px
}
body.defyne-editor .feeling-field .feeling-label {
font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--go);margin-bottom:8px;display:flex;align-items:center;gap:8px
}
body.defyne-editor .feeling-field .feeling-label::after {content:'';flex:1;height:1px;background:linear-gradient(to right,var(--gm),transparent)}
body.defyne-editor .feeling-field textarea {
background:transparent;border:none;outline:none;width:100%;
  font-family:'Montserrat', sans-serif;font-size:15px;font-style:italic;
  color:var(--i70);line-height:1.7;resize:none;min-height:68px
}
body.defyne-editor .feeling-field textarea::placeholder {color:rgba(185,49,252,.4);font-style:italic}
body.defyne-editor .xp-list {display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
body.defyne-editor .xp-card {
background:var(--surface);border:1px solid var(--bd);border-radius:12px;
  overflow:hidden;transition:border-color .2s
}
body.defyne-editor .xp-card.editing {border-color:var(--go);box-shadow:0 0 0 3px var(--gl)}
body.defyne-editor .xp-card-header {
display:flex;align-items:center;gap:12px;
  padding:16px 20px;cursor:pointer;user-select:none
}
body.defyne-editor .xp-card-header:hover {background:var(--i04)}
body.defyne-editor .xp-drag {color:var(--mu);font-size:16px;cursor:grab;flex-shrink:0}
body.defyne-editor .xp-card-meta {flex:1;min-width:0}
body.defyne-editor .xp-card-title {font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.defyne-editor .xp-card-sub {font-size:11px;color:var(--mu);margin-top:2px}
body.defyne-editor .xp-card-actions {display:flex;gap:6px;flex-shrink:0}
body.defyne-editor .xp-chevron {color:var(--mu);transition:transform .25s;font-size:12px}
body.defyne-editor .xp-card.open .xp-chevron {transform:rotate(180deg)}
body.defyne-editor .xp-card-body {display:none;padding:0 20px 20px;border-top:1px solid var(--bd)}
body.defyne-editor .xp-card.open .xp-card-body {display:block}
body.defyne-editor .missions-list {display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
body.defyne-editor .mission-row {display:flex;align-items:flex-start;gap:8px}
body.defyne-editor .mission-bullet {
width:28px;height:36px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:var(--go);font-size:14px
}
body.defyne-editor .mission-input {flex:1}
body.defyne-editor .mission-remove {
width:28px;height:36px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--mu);cursor:pointer;font-size:14px;
  border-radius:6px;transition:all .15s;flex-shrink:0
}
body.defyne-editor .mission-remove:hover {color:var(--red);background:var(--red-l)}
body.defyne-editor .add-mission-btn {
background:none;border:1px dashed var(--bd);border-radius:8px;
  width:100%;padding:8px;font-family:'Montserrat', sans-serif;
  font-size:11px;font-weight:600;color:var(--mu);cursor:pointer;
  transition:all .2s;letter-spacing:.06em;text-transform:uppercase
}
body.defyne-editor .add-mission-btn:hover {border-color:var(--go);color:var(--go)}
body.defyne-editor .add-xp-btn {
width:100%;padding:16px;background:transparent;
  border:2px dashed var(--bd);border-radius:12px;
  font-family:'Montserrat', sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mu);
  cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:10px
}
body.defyne-editor .add-xp-btn:hover {border-color:var(--go);color:var(--go);background:var(--gl)}
body.defyne-editor .tags-input-wrap {
background:var(--surface2);border:1px solid var(--bd);border-radius:8px;
  padding:10px 12px;min-height:52px;display:flex;flex-wrap:wrap;
  gap:6px;align-items:center;cursor:text;transition:border-color .2s, box-shadow .2s
}
body.defyne-editor .tags-input-wrap:focus-within {border-color:var(--bd-focus);box-shadow:0 0 0 3px var(--gl)}
body.defyne-editor .skill-tag {
display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px 4px 12px;border-radius:20px;
  background:var(--gl);border:1px solid var(--gm);
  font-size:11px;font-weight:600;color:#D89DFF;
  animation:tagIn .2s ease
}
@keyframes tagIn{from{opacity:0;transform:scale(.85)}
to {opacity:1;transform:scale(1)}}
body.defyne-editor .skill-tag button {
background:none;border:none;color:#D89DFF;cursor:pointer;
  font-size:12px;line-height:1;padding:0;opacity:.6;transition:opacity .15s
}
body.defyne-editor .skill-tag button:hover {opacity:1}
body.defyne-editor .tags-real-input {
background:transparent;border:none;outline:none;
  font-family:'Montserrat', sans-serif;font-size:13px;color:var(--ink);
  min-width:120px;flex:1
}
body.defyne-editor .tags-real-input::placeholder {color:var(--mu)}
body.defyne-editor .tags-count {font-size:11px;color:var(--mu);margin-top:6px}
body.defyne-editor .tags-count.max {color:var(--red)}
body.defyne-editor .edu-list {display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
body.defyne-editor .edu-card {
background:var(--surface);border:1px solid var(--bd);border-radius:10px;
  padding:16px 18px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start
}
body.defyne-editor .edu-card-fields {display:grid;grid-template-columns:1fr 1fr;gap:10px}
body.defyne-editor .edu-card-fields .form-group:first-child {grid-column:1/-1}
body.defyne-editor .panel {
background:var(--surface);border-left:1px solid var(--bd);
  padding:28px 24px;position:sticky;top:60px;
  height:calc(100vh - 60px);overflow-y:auto
}
body.defyne-editor .panel-section {margin-bottom:28px}
body.defyne-editor .panel-title {font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mu);margin-bottom:14px}
body.defyne-editor .tip {
border-left:2px solid var(--go);background:var(--gl);
  border-radius:0 8px 8px 0;padding:11px 14px;margin-bottom:10px
}
body.defyne-editor .tip-label {font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--go);margin-bottom:4px}
body.defyne-editor .tip p {font-size:11.5px;color:var(--i70);line-height:1.6}
body.defyne-editor .url-block {
background:var(--surface2);border:1px solid var(--bd);border-radius:8px;
  padding:12px 14px;display:flex;align-items:center;justify-content:space-between;
  gap:8px
}
body.defyne-editor .url-text {font-size:10px;color:var(--mu);letter-spacing:.04em;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.defyne-editor .copy-btn {
background:none;border:none;color:var(--go);cursor:pointer;
  font-family:'Montserrat', sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;flex-shrink:0;transition:opacity .2s
}
body.defyne-editor .copy-btn:hover {opacity:.7}
body.defyne-editor .progress-items {display:flex;flex-direction:column;gap:6px}
body.defyne-editor .prog-item {display:flex;align-items:center;gap:8px;font-size:11px;color:var(--mu)}
body.defyne-editor .prog-item .pi-icon {font-size:12px;width:16px;text-align:center;flex-shrink:0}
body.defyne-editor .prog-item.done {color:var(--green)}
body.defyne-editor .prog-item.done .pi-icon::before {content:'✓'}
body.defyne-editor .prog-item:not(.done) .pi-icon::before {content:'â—‹'}
body.defyne-editor .preview-cta {
display:flex;flex-direction:column;gap:10px;
  padding-top:20px;border-top:1px solid var(--bd);margin-top:4px
}
body.defyne-editor .modal-overlay {
position:fixed;inset:0;z-index:500;
  background:rgba(13, 14, 20, .85);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s
}
body.defyne-editor .modal-overlay.open {opacity:1;pointer-events:auto}
body.defyne-editor .modal {
background:var(--surface);border:1px solid var(--gold-line);border-radius:16px;
  padding:32px;width:420px;max-width:90vw;
  transform:translateY(12px);transition:transform .25s
}
body.defyne-editor .modal-overlay.open .modal {transform:translateY(0)}
body.defyne-editor .modal-title {font-family:'Montserrat',sans-serif;font-size:24px;font-weight:400;margin-bottom:10px}
body.defyne-editor .modal-body {font-size:13px;color:var(--i70);line-height:1.7;margin-bottom:24px}
body.defyne-editor .modal-actions {display:flex;gap:10px;justify-content:flex-end}
body.defyne-editor .toast {
position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--surface);border:1px solid var(--bd);border-radius:8px;
  padding:12px 20px;font-size:13px;font-weight:500;
  display:flex;align-items:center;gap:10px;
  opacity:0;transition:all .3s cubic-bezier(.16, 1, .3, 1);
  z-index:600;white-space:nowrap;pointer-events:none
}
body.defyne-editor .toast.show {opacity:1;transform:translateX(-50%) translateY(0)}
body.defyne-editor .toast.success {border-color:var(--green);color:var(--green)}
body.defyne-editor .toast.error {border-color:var(--red);color:var(--red)}
body.defyne-editor .date-range {display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
body.defyne-editor .current-job-wrap {display:flex;align-items:center;gap:8px;margin-top:6px}
body.defyne-editor .current-job-wrap input[type=checkbox] {accent-color:var(--go);width:14px;height:14px;cursor:pointer}
body.defyne-editor .current-job-wrap label {font-size:12px;color:var(--mu);cursor:pointer}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}
to {opacity:1;transform:translateY(0)}}
body.defyne-editor .section-block.active {animation:fadeUp .3s ease forwards}
body.defyne-editor .form-divider {height:1px;background:var(--bd);margin:24px 0}

/* Profile page */
            body.defyne-profile {
                --w: var(--surface);
                --i60: rgba(255, 255, 255, 0.6);
                --i08: rgba(255, 255, 255, 0.06);
                --i04: rgba(255, 255, 255, 0.03);
                --mu: var(--muted);
                --go: var(--accent);
                --gl: rgba(185, 49, 252, 0.12);
                --gm: rgba(185, 49, 252, 0.3);
                --gr: #22d3ee;
                --bd: var(--border);
                --gold-line: var(--line);
                --tag-txt: #d89dff;
            }
            body.defyne-profile {
                color-scheme: dark;
            }
            body.defyne-profile .nav {
                background: rgba(13, 14, 20, 0.92);
                padding: 0 60px;
            }
            @keyframes blink{
0%, 100% {
opacity: 1;
                }
                50% {
opacity: 0.3;
                }
            }
            @keyframes spin-ring{
to {
--ring-angle: 360deg;
                }
            }
            @property --ring-angle{
syntax: '<angle>';
                inherits: false;
                initial-value: 0deg;
            }
            body.defyne-profile .chips-bar {
position: absolute;
                top: 28px;
                left: 60px;
                z-index: 20;
                pointer-events: none;
            }
            body.defyne-profile .chips {
display: flex;
                align-items: center;
                gap: 10px;
                flex-wrap: nowrap;
                pointer-events: auto;
            }
            /* Wrapper pour l'effet de contour animé (style Instagram story)
   Technique : wrapper en gradient, chip intérieur avec fond opaque
   → seule la bordure de 2px est visible avec le gradient */
            body.defyne-profile .chip-wrap {
position: relative;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border-radius: 40px;
                padding: 2px;
                background: rgba(255, 255, 255, 0.06);
            }
            body.defyne-profile .chip-wrap::before {
content: '';
                position: absolute;
                inset: 0;
                border-radius: 40px;
                background: conic-gradient(
                    from var(--ring-angle), #b931fc 0%, #6b4eff 30%, #22d3ee 55%, #6b4eff 75%, #b931fc 100%
                );
                animation: spin-ring 3s linear infinite;
                opacity: 0;
                transition: opacity 0.3s ease;
            }
            body.defyne-profile .chip-wrap:hover::before {
opacity: 1;
            }
            body.defyne-profile .chip-wrap.always-on::before {
opacity: 1;
            }
            body.defyne-profile .chip {
position: relative;
                z-index: 1;
                display: inline-flex;
                align-items: center;
                gap: 0;
                height: 48px;
                border-radius: 38px;
                border: none;
                background: var(--bg);
                font-family: 'Montserrat', sans-serif;
                font-size: 11px;
                font-weight: 700;
                letter-spacing: 0.1em;
                text-transform: uppercase;
                cursor: default;
                overflow: hidden;
                max-width: 48px;
                transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
                white-space: nowrap;
            }
            body.defyne-profile .chip-wrap:hover .chip {
max-width: 300px;
            }
            body.defyne-profile .chip-ico {
width: 44px;
                height: 44px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                font-size: 17px;
                margin: 0 2px;
            }
            body.defyne-profile .chip-label {
padding-right: 14px;
                padding-left: 5px;
                opacity: 0;
                transition: opacity 0.2s ease 0.1s;
                line-height: 1;
            }
            body.defyne-profile .chip-wrap:hover .chip-label {
opacity: 1;
            }
            body.defyne-profile .chip-avail.now {
color: #67e8f9;
            }
            body.defyne-profile .chip-avail.now .chip-ico {
background: rgba(34, 211, 238, 0.12);
            }
            body.defyne-profile .chip-avail.now .chip-ico::after {
content: '';
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #22d3ee;
                animation: blink 1.8s infinite;
                display: block;
            }
            body.defyne-profile .chip-avail.notice {
color: #d89dff;
            }
            body.defyne-profile .chip-avail.notice .chip-ico {
background: rgba(185, 49, 252, 0.12);
            }
            body.defyne-profile .chip-avail.notice .chip-ico::after {
content: '';
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #b931fc;
                display: block;
            }
            body.defyne-profile .chip-avail.off {
color: var(--mu);
            }
            body.defyne-profile .chip-avail.off .chip-ico {
background: rgba(255, 255, 255, 0.07);
            }
            body.defyne-profile .chip-avail.off .chip-ico::after {
content: '';
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: var(--mu);
                display: block;
            }
            body.defyne-profile .chip-poly {
color: #d89dff;
            }
            body.defyne-profile .chip-poly .chip-ico {
background: rgba(185, 49, 252, 0.12);
                font-size: 15px;
            }
            body.defyne-profile .hero {
padding: 28px 60px 52px;
                background:
                    radial-gradient(
                        ellipse 70% 60% at 20% 50%, rgba(185, 49, 252, 0.08) 0%, transparent 70%
                    ), var(--bg);
                border-bottom: 1px solid var(--gold-line);
                position: relative;
            }
            body.defyne-profile .hero-in {
display: grid;
                grid-template-columns: 1fr 260px;
                gap: 48px;
                align-items: start;
                max-width: 1200px;
            }
            body.defyne-profile .hero-top-row {
display: flex;
                align-items: flex-start;
                justify-content: space-between;
                gap: 40px;
                margin-bottom: 32px;
            }
            body.defyne-profile .hero-title-block {
flex: 1;
            }
            body.defyne-profile .hero-role-main {
                margin: 0 0 8px;
            }
            body.defyne-profile .hero-role-sec {
font-family: 'Montserrat', sans-serif;
                font-size: 14px;
                font-weight: 500;
                color: var(--mu);
                display: flex;
                align-items: center;
                gap: 12px;
                flex-wrap: wrap;
                letter-spacing: 0.04em;
                text-transform: uppercase;
            }
            body.defyne-profile .hero-role-sep {
color: var(--gold-line);
                font-size: 14px;
                line-height: 1;
            }
            body.defyne-profile .chip-level {
color: #a89dff;
            }
            body.defyne-profile .chip-level .chip-ico {
background: rgba(107, 78, 255, 0.12);
                font-size: 12px;
                font-weight: 700;
                font-family: 'Montserrat', sans-serif;
                letter-spacing: 0;
            }
            body.defyne-profile .chip-sector {
color: #e8baff;
                max-width: 400px !important;
                cursor: default;
            }
            body.defyne-profile .chip-sector .chip-ico {
background: rgba(185, 49, 252, 0.18);
                font-size: 10px;
                font-weight: 700;
                font-family: 'Montserrat', sans-serif;
                letter-spacing: 0;
                width: 44px;
                height: 44px;
            }
            body.defyne-profile .chip-sector .chip-label {
opacity: 1 !important;
                padding-right: 18px;
                padding-left: 5px;
            }
            body.defyne-profile .hero-stats {
display: flex;
                align-items: center;
                gap: 28px;
                margin: 28px 0 0;
                white-space: nowrap;
            }
            body.defyne-profile .hstat {
display: flex;
                flex-direction: column;
                gap: 3px;
            }
            body.defyne-profile .hstat-n {
font-family: 'Montserrat', sans-serif;
                font-size: 28px;
                font-weight: 600;
                line-height: 1;
                color: var(--ink);
            }
            body.defyne-profile .hstat-l {
font-family: 'Montserrat', sans-serif;
                font-size: 9px;
                font-weight: 700;
                letter-spacing: 0.18em;
                text-transform: uppercase;
                color: var(--mu);
            }
            body.defyne-profile .hstat-sep {
width: 1px;
                height: 28px;
                background: var(--gold-line);
            }
            body.defyne-profile .id-card {
background: #13151e;
                border: 1px solid rgba(185, 49, 252, 0.3);
                border-radius: 16px;
                padding: 28px;
                box-shadow: 0 4px 32px rgba(185, 49, 252, 0.1);
            }
            body.defyne-profile .lock-row {
display: flex;
                gap: 14px;
                align-items: center;
                background: rgba(185, 49, 252, 0.08);
                border: 1px solid rgba(185, 49, 252, 0.15);
                border-radius: 10px;
                padding: 14px 16px;
                margin-bottom: 20px;
            }
            body.defyne-profile .lock-ico {
width: 34px;
                height: 34px;
                border-radius: 50%;
                background: rgba(196, 150, 58, 0.15);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 15px;
                flex-shrink: 0;
            }
            body.defyne-profile .lock-t {
font-size: 13px;
                font-weight: 600;
                margin-bottom: 3px;
                color: var(--ink);
            }
            body.defyne-profile .lock-s {
font-size: 11.5px;
                color: var(--mu);
                line-height: 1.5;
            }
            body.defyne-profile .ucta {
                transition: all 0.3s;
                margin-bottom: 8px;
                box-shadow: 0 4px 20px rgba(185, 49, 252, 0.35);
            }
            body.defyne-profile .ucta:hover {
background: linear-gradient(135deg, #c945ff, #7b5fff);
                transform: translateY(-1px);
                box-shadow: 0 8px 28px rgba(185, 49, 252, 0.5);
            }
            body.defyne-profile .uhint {
font-size: 11px;
                color: var(--mu);
                text-align: center;
                margin-bottom: 14px;
            }
            body.defyne-profile .uhint a {
color: var(--go);
                text-decoration: underline;
                cursor: pointer;
            }
            body.defyne-profile .sep {
height: 1px;
                background: var(--gold-line);
                margin: 14px 0;
            }
            body.defyne-profile .url-r {
display: flex;
                align-items: center;
                justify-content: space-between;
            }
            body.defyne-profile .url-t {
font-family: 'Montserrat', sans-serif;
                font-size: 10px;
                letter-spacing: 0.1em;
                color: var(--mu);
            }
            body.defyne-profile .copy-b {
font-size: 11px;
                color: var(--go);
                background: none;
                border: none;
                cursor: pointer;
                font-family: 'Montserrat', sans-serif;
                font-weight: 700;
                letter-spacing: 0.08em;
                text-transform: uppercase;
            }
            body.defyne-profile .tl-wrap {
background: #0d0e14;
                position: relative;
            }
            body.defyne-profile .name-header {
display: none;
            }
            body.defyne-profile .tl-stage {
position: relative;
                width: 100%;
            }
            /* FICHES
   État par défaut = allumé (opacity:1)
   Classe .dim = éteint */
            body.defyne-profile .xp {
position: absolute;
                width: 300px;
                background: #0d0e14;
                border: 1px solid rgba(196, 150, 58, 0.25);
                border-radius: 14px;
                padding: 20px 22px 18px;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
                cursor: pointer;
                z-index: 2;
                opacity: 1;
                transform: none;
                transition:
                    opacity 0.6s ease, transform 0.6s ease, border-color 0.25s, box-shadow 0.25s;
            }
            body.defyne-profile .xp.dim {
opacity: 0;
                transform: translateY(-10px);
                pointer-events: none;
            }
            body.defyne-profile .xp:hover {
border-color: rgba(185, 49, 252, 0.5);
                box-shadow: 0 8px 32px rgba(185, 49, 252, 0.15);
            }
            body.defyne-profile .xp.on {
border-color: var(--go);
                box-shadow: 0 8px 32px rgba(185, 49, 252, 0.25);
            }
            body.defyne-profile .xp-head {
display: flex;
                align-items: flex-start;
                justify-content: space-between;
                gap: 8px;
                margin-bottom: 4px;
            }
            body.defyne-profile .xp-co {
font-family: 'Montserrat', sans-serif;
                font-size: 16px;
                font-weight: 700;
                line-height: 1.1;
                color: var(--ink);
                flex: 1;
            }
            body.defyne-profile .xp-dur {
font-family: 'Montserrat', sans-serif;
                font-size: 9px;
                font-weight: 700;
                letter-spacing: 0.08em;
                color: var(--go);
                background: var(--gl);
                border: 1px solid var(--gm);
                border-radius: 20px;
                padding: 2px 9px;
                white-space: nowrap;
                flex-shrink: 0;
                margin-top: 5px;
            }
            body.defyne-profile .xp-role {
font-size: 12px;
                font-weight: 600;
                color: var(--ink);
                margin-bottom: 2px;
                line-height: 1.35;
            }
            body.defyne-profile .xp-meta {
display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 5px;
                margin-bottom: 12px;
            }
            body.defyne-profile .xp-per {
font-family: 'Montserrat', sans-serif;
                font-size: 9.5px;
                font-weight: 500;
                letter-spacing: 0.06em;
                color: var(--mu);
            }
            body.defyne-profile .bdg {
display: inline-block;
                padding: 1px 8px;
                border-radius: 20px;
                font-size: 9.5px;
                font-family: 'Montserrat', sans-serif;
                font-weight: 700;
            }
            body.defyne-profile .bdg-g {
background: var(--gl);
                color: var(--go);
                border: 1px solid var(--gm);
            }
            body.defyne-profile .bdg-n {
background: var(--i08);
                color: var(--mu);
                border: 1px solid var(--bd);
            }
            body.defyne-profile .xp-mis {
list-style: none;
                border-top: 1px solid var(--bd);
                padding-top: 10px;
            }
            body.defyne-profile .xp-mis li {
font-size: 11.5px;
                color: var(--i60);
                line-height: 1.55;
                padding: 3px 0 3px 12px;
                position: relative;
            }
            body.defyne-profile .xp-mis li::before {
content: '';
                position: absolute;
                left: 0;
                top: 12px;
                width: 5px;
                height: 1px;
                background: var(--go);
            }
            body.defyne-profile .xp-cta {
margin-top: 12px;
                padding: 9px 12px;
                background: var(--gl);
                border-radius: 8px;
                display: flex;
                align-items: center;
                gap: 8px;
                cursor: pointer;
                transition: background 0.2s;
            }
            body.defyne-profile .xp-cta:hover {
background: var(--gm);
            }
            body.defyne-profile .xp-cta-ico {
font-size: 14px;
                flex-shrink: 0;
            }
            body.defyne-profile .xp-cta-txt {
flex: 1;
            }
            body.defyne-profile .xp-cta-lbl {
font-family: 'Montserrat', sans-serif;
                font-size: 9px;
                font-weight: 700;
                letter-spacing: 0.14em;
                text-transform: uppercase;
                color: var(--go);
                display: block;
                margin-bottom: 2px;
            }
            body.defyne-profile .xp-cta-preview {
font-size: 10.5px;
                color: var(--i60);
                line-height: 1.45;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                word-break: break-word;
            }
            body.defyne-profile .nd {
position: absolute;
                width: 11px;
                height: 11px;
                border-radius: 50%;
                background: var(--go);
                border: 2px solid var(--go);
                box-shadow: 0 0 0 4px var(--gl);
                transform: translate(-50%, -50%);
                z-index: 4;
                transition:
                    background 0.5s, border-color 0.5s, box-shadow 0.5s;
            }
            body.defyne-profile .nd.dim {
background: var(--w);
                border-color: rgba(14, 14, 14, 0.15);
                box-shadow: none;
            }
            body.defyne-profile .xp-future {
background: #13151e;
                border: 1.5px solid rgba(185, 49, 252, 0.3);
                border-radius: 16px;
                padding: 20px 22px 18px;
                box-shadow: 0 4px 32px rgba(185, 49, 252, 0.15);
            }
            body.defyne-profile .xp-future-label {
font-family: 'Montserrat', sans-serif;
                font-size: 22px;
                font-weight: 700;
                letter-spacing: -0.01em;
                background: linear-gradient(135deg, #ffffff, #d89dff);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                margin-bottom: 16px;
                line-height: 1;
                text-align: center;
            }
            body.defyne-profile .xp-future-app {
display: flex;
                flex-direction: column;
                gap: 10px;
            }
            body.defyne-profile .xp-future-item {
display: flex;
                align-items: flex-start;
                gap: 10px;
            }
            body.defyne-profile .xp-future-rank {
font-family: 'Montserrat', sans-serif;
                font-size: 9px;
                font-weight: 700;
                letter-spacing: 0.1em;
                text-transform: uppercase;
                color: var(--mu);
                padding-top: 4px;
                min-width: 60px;
                flex-shrink: 0;
            }
            body.defyne-profile .xp-future-tag {
display: inline-flex;
                align-items: center;
                gap: 6px;
                padding: 5px 12px;
                border-radius: 8px;
                font-family: 'Montserrat', sans-serif;
                font-size: 11.5px;
                font-weight: 600;
                border: 1.5px solid;
                margin-bottom: 4px;
            }
            body.defyne-profile .xp-future-tag.primary {
background: #f0f0fb;
                border-color: #8b8fd4;
                color: #4448a8;
            }
            body.defyne-profile .xp-future-tag.secondary {
background: var(--gl);
                border-color: var(--gm);
                color: #7a4a0a;
            }
            body.defyne-profile .xp-future-note {
font-size: 10.5px;
                color: var(--mu);
                font-style: italic;
                line-height: 1.5;
            }
            /* VOIES SVG — néon via filtre SVG feGaussianBlur
   .lane-glow : path flou (halo), pulsation opacité quand .lit
   .lane-core : path net (cœur blanc chaud), toujours visible quand allumé
*/
            body.defyne-profile .lane-glow {
opacity: 0;
            }
            body.defyne-profile .lane-glow.lit {
opacity: 1;
            }
            body.defyne-profile .fp {
position: absolute;
                z-index: 3;
                opacity: 0;
                transform: translateY(6px);
                transition:
                    opacity 0.5s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
                pointer-events: none;
            }
            body.defyne-profile .fp.in {
opacity: 1;
                transform: none;
                pointer-events: auto;
            }
            body.defyne-profile .fp-av {
width: 58px;
                height: 58px;
                border-radius: 50%;
                background: var(--bg);
                border: 1px solid var(--bd);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 22px;
                margin-bottom: 10px;
            }
            body.defyne-profile .fp-card {
background: #0d0e14;
                border: 1px solid rgba(185, 49, 252, 0.2);
                border-radius: 12px;
                padding: 16px 18px;
            }
            body.defyne-profile .fp-lbl {
font-family: 'Montserrat', sans-serif;
                font-size: 9px;
                font-weight: 700;
                letter-spacing: 0.3em;
                text-transform: uppercase;
                color: var(--go);
                margin-bottom: 8px;
                display: flex;
                align-items: center;
                gap: 8px;
            }
            body.defyne-profile .fp-lbl::after {
content: '';
                flex: 1;
                height: 1px;
                background: linear-gradient(to right, var(--gm), transparent);
            }
            body.defyne-profile .fp-q {
font-family: 'Montserrat', sans-serif;
                font-size: 15.5px;
                font-style: italic;
                line-height: 1.7;
                color: rgba(240, 234, 224, 0.88);
            }
            body.defyne-profile .fp-q::before {
content: '\201C';
                color: var(--go);
                opacity: 0.4;
                font-size: 22px;
                line-height: 0;
                vertical-align: -7px;
                margin-right: 2px;
                font-style: normal;
            }
            body.defyne-profile .fp-q::after {
content: '\201D';
                color: var(--go);
                opacity: 0.4;
                font-size: 22px;
                line-height: 0;
                vertical-align: -7px;
                margin-left: 2px;
                font-style: normal;
            }
            body.defyne-profile .sk-sec {
border-top: 1px solid var(--gold-line);
                padding: 80px 60px 88px;
                max-width: 1100px;
                margin: 0 auto;
                background: var(--bg);
            }
            body.defyne-profile .sk-grid {
display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 32px;
                margin-top: 36px;
            }
            body.defyne-profile .sk-cat {
font-family: 'Montserrat', sans-serif;
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 0.2em;
                text-transform: uppercase;
                color: var(--mu);
                margin-bottom: 10px;
            }
            body.defyne-profile .sk-tags {
display: flex;
                flex-wrap: wrap;
                gap: 6px;
            }
            body.defyne-profile footer {
border-top: 1px solid var(--gold-line);
                padding: 24px 60px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                background: var(--bg);
            }
            body.defyne-profile .f-logo {
font-family: 'Montserrat', sans-serif;
                font-size: 24px;
                font-weight: 500;
                color: var(--mu);
                letter-spacing: 0.01em;
            }
            body.defyne-profile .full-sec {
border-top: 1px solid var(--gold-line);
                padding: 72px 60px;
                max-width: 1100px;
                margin: 0 auto;
            }
            body.defyne-profile .full-sec + .full-sec {
padding-top: 0;
                border-top: none;
            }
            body.defyne-profile .full-grid-2 {
display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 48px;
                margin-top: 32px;
            }
            body.defyne-profile .profil-box {
margin-top: 24px;
                padding: 24px 28px;
                background: var(--w);
                border: 1px solid var(--bd);
                border-radius: 14px;
                border-left: 3px solid var(--ink);
            }
            body.defyne-profile .profil-box p {
font-size: 14.5px;
                color: var(--i60);
                line-height: 1.85;
                font-weight: 300;
            }
            body.defyne-profile .profil-box strong {
color: var(--ink);
                font-weight: 500;
            }
            body.defyne-profile .edu-item {
display: flex;
                flex-direction: column;
                gap: 4px;
                padding: 18px 20px;
                border: 1px solid var(--bd);
                border-radius: 12px;
                background: var(--w);
            }
            body.defyne-profile .edu-item + .edu-item {
margin-top: 12px;
            }
            body.defyne-profile .edu-deg {
font-family: 'Montserrat', sans-serif;
                font-size: 18px;
                font-weight: 600;
                color: var(--ink);
                line-height: 1.2;
            }
            body.defyne-profile .edu-school {
font-family: 'Montserrat', sans-serif;
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 0.16em;
                text-transform: uppercase;
                color: var(--go);
                margin-top: 2px;
            }
            body.defyne-profile .edu-detail {
font-size: 12px;
                color: var(--mu);
                margin-top: 2px;
            }
            body.defyne-profile .edu-year {
font-size: 11px;
                color: var(--mu);
                font-weight: 500;
            }
            body.defyne-profile .lang-item {
display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 14px 18px;
                border: 1px solid var(--bd);
                border-radius: 10px;
                background: var(--w);
            }
            body.defyne-profile .lang-name {
font-family: 'Montserrat', sans-serif;
                font-size: 20px;
                font-weight: 600;
                color: var(--ink);
            }
            body.defyne-profile .lang-level {
font-size: 11px;
                color: var(--mu);
                font-weight: 500;
            }
            body.defyne-profile .lang-badge {
font-family: 'Montserrat', sans-serif;
                font-size: 9px;
                font-weight: 700;
                letter-spacing: 0.12em;
                text-transform: uppercase;
                padding: 3px 10px;
                border-radius: 20px;
                background: var(--gl);
                border: 1px solid var(--gm);
                color: var(--go);
            }
            body.defyne-profile .loisir-grid {
display: flex;
                flex-wrap: wrap;
                gap: 10px;
                margin-top: 16px;
            }
            body.defyne-profile .loisir-item {
display: flex;
                align-items: center;
                gap: 8px;
                padding: 8px 16px;
                border-radius: 10px;
                border: 1px solid var(--bd);
                background: var(--w);
                font-size: 13px;
                color: var(--ink);
            }
            body.defyne-profile .loisir-item span:first-child {
font-size: 16px;
            }
            body.defyne-profile .tag {
padding: 5px 15px;
                border-radius: 20px;
                font-size: 11.5px;
                font-weight: 500;
                border: 1px solid rgba(185, 49, 252, 0.25);
                background: rgba(185, 49, 252, 0.08);
                color: #c4c2ff;
                letter-spacing: 0.02em;
            }
            body.defyne-profile .tag-g {
background: rgba(185, 49, 252, 0.18);
                border-color: rgba(185, 49, 252, 0.4);
                color: #a8a3ff;
                font-weight: 600;
            }
            body.defyne-profile .empty-state {
text-align: center;
                padding: 60px 40px;
                color: var(--mu);
                border: 1.5px dashed rgba(185, 49, 252, 0.2);
                border-radius: 16px;
                margin: 40px 0;
            }
            body.defyne-profile .empty-state a {
color: var(--go);
                text-decoration: underline;
                cursor: pointer;
            }
            body.defyne-profile .award-list {
display: flex;
                flex-direction: column;
                gap: 12px;
                margin-top: 24px;
            }
            body.defyne-profile .award-item {
display: flex;
                align-items: flex-start;
                gap: 16px;
                padding: 16px 20px;
                border-radius: 12px;
                background: linear-gradient(
                    135deg, rgba(185, 49, 252, 0.08), rgba(185, 49, 252, 0.03)
                );
                border: 1px solid rgba(185, 49, 252, 0.2);
            }
            body.defyne-profile .award-icon {
font-size: 20px;
                flex-shrink: 0;
                margin-top: 2px;
            }
            body.defyne-profile .award-title {
font-size: 13px;
                font-weight: 600;
                color: var(--ink);
                line-height: 1.4;
            }
            body.defyne-profile .award-detail {
font-size: 11.5px;
                color: var(--mu);
                margin-top: 2px;
                line-height: 1.5;
            }
            body.defyne-profile .sticky {
position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 300;
                background: rgba(13, 14, 20, 0.95);
                backdrop-filter: blur(20px);
                border-top: 1px solid var(--gold-line);
                padding: 14px 60px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                transform: translateY(100%);
                transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            }
            body.defyne-profile .sticky.show {
transform: translateY(0);
            }
            body.defyne-profile .s-name {
font-family: 'Montserrat', sans-serif;
                font-size: 20px;
            }
            body.defyne-profile .s-meta {
                font-size: 12px;
                color: var(--mu);
                margin-top: 2px;
            }