:root {
    --surface: #23133a;
    --surface2: #1f1232;
    --border: #3a1c63;
    --border-glow: #5e309d;
    --accent: #883CF0;
    --accent2: #d9c8f071;
    --accent-glow: #1f1232;
    --green: #d18ce7;
    --green-dim: rgba(34,211,165,0.12);
    --orange: #fb923c;
    --red: #f87171;
    --text: #e8edf5;
    --text-muted: #d6d6d6;
    --text-dim: #d6d6d6;
    --badge-bg: #291a3e;
    --step-done: #22d3a5;
    --step-active: #883CF0;
    --step-inactive: #1f1232;
  }

  * { margin:0; padding:0; box-sizing:border-box; }

  .delinea-vendor-training-1 {
    position: relative;
    background: #191127;
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    height:100vh;
    overflow-y: auto;
  }

  /* Grid bg */
  .delinea-vendor-training-1::before {
    content:'';
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(rgba(59,130,246,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(59,130,246,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events:none;
  }

  .delinea-vendor-training-1::after {
    content:'';
    position:absolute;
    top:-200px; right:-200px;
    width:600px; height:600px;
    background: radial-gradient(circle, rgba(169, 73, 214, 0.155) 0%, transparent 70%);
    pointer-events:none;
  }

  /* ── HEADER ── */
  .delinea-vendor-training-1 header {
    position:relative;
    z-index:1;
    padding: 28px 48px 24px;
    border-bottom: 1px solid var(--border);
    background: #180f26;
    backdrop-filter: blur(12px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
  }

  .logo-area {
    display:flex;
    align-items:center;
    gap:14px;
  }

  .logo-icon {
    width:42px; height:42px;
    background: linear-gradient(135deg, #3a1c63, #684895);
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-size:20px;
    box-shadow: 0 0 20px #be52e50f;
    flex-shrink:0;
  }

  .logo-text {
    
    font-weight:700;
    font-size:17px;
    
    line-height:1.25;
  }

  .logo-text span {
    display:block;
    font-size:11px;
    font-weight:400;
    color: var(--text-muted);
    
    
    text-transform:uppercase;
    margin-top:1px;
  }

  .header-badge {
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 14px;
    border-radius:20px;
    border:1px solid var(--border-glow);
    background: var(--badge-bg);
    
    font-size:11px;
    color: var(--accent2);
    
  }

  .header-badge::before {
    content:'';
    width:6px; height:6px;
    border-radius:50%;
    background: var(--green);
    box-shadow: 0 0 6px var(--green);
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0%,100%{ opacity:1; } 50%{ opacity:0.4; }
  }

  /* ── HERO ── */
  .hero {
    position:relative;
    padding: 56px 48px 48px;
    max-width:1100px;
    margin:0 auto;
  }

  .breadcrumb {
    
    font-size:11px;
    color: var(--text-dim);
    
    margin-bottom:24px;
    display:flex;
    align-items:center;
    gap:8px;
  }

  .breadcrumb span { color: var(--accent); }

  .hero h1 {
    
    font-size:clamp(28px, 4vw, 46px);
    font-weight:800;
    line-height:1.1;
    
    margin-bottom:16px;
  }

  .hero h1 em {
    font-style:normal;
    background: linear-gradient(90deg, var(--accent), var(--green));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
  }

  .hero-sub {
    font-size:16px;
    color: var(--text-muted);
    line-height:1.6;
    max-width:620px;
    margin-bottom:32px;
    font-weight:300;
  }

  .meta-row {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:0;
  }

  .meta-chip {
    display:flex;
    align-items:center;
    gap:6px;
    padding:5px 12px;
    border-radius:6px;
    border:1px solid var(--border);
    background: var(--surface);
    font-size:12px;
    color: var(--text-muted);
    
  }

  .meta-chip .dot {
    width:5px; height:5px;
    border-radius:50%;
    background: var(--accent);
  }

  /* ── LAYOUT ── */
  .main-layout {
    position:relative;
    max-width:1100px;
    margin:0 auto;
    padding:0 48px 80px;
    display:grid;
    grid-template-columns:260px 1fr;
    gap:32px;
    align-items:start;
  }

  /* ── SIDEBAR ── */
  .sidebar {
    position:sticky;
    top:24px;
  }

  .sidebar-title {
    
    font-size:10px;
    
    text-transform:uppercase;
    color: var(--text-dim);
    margin-bottom:16px;
    padding-bottom:10px;
    border-bottom:1px solid var(--border);
  }

  .progress-track {
    display:flex;
    flex-direction:column;
    gap:0;
  }

  .progress-item {
    display:flex;
    align-items:flex-start;
    gap:14px;
    cursor:pointer;
    padding:10px 0;
    position:relative;
    transition: all 0.2s;
  }

  .progress-item:not(:last-child)::after {
    content:'';
    position:absolute;
    left:15px;
    top:36px;
    bottom:0;
    width:2px;
    background: var(--step-inactive);
    transition: background 0.3s;
  }

  .progress-item.done:not(:last-child)::after {
    background: var(--step-done);
  }

  .step-dot {
    width:30px; height:30px;
    border-radius:50%;
    border:2px solid var(--step-inactive);
    display:flex; align-items:center; justify-content:center;
    font-size:12px;
    font-weight:600;
    color: var(--text-dim);
    background: var(--surface);
    flex-shrink:0;
    transition: all 0.3s;
    position:relative;
  }

  .progress-item.done .step-dot {
    border-color: var(--step-done);
    background: var(--green-dim);
    color: var(--step-done);
  }

  .progress-item.active .step-dot {
    border-color: var(--step-active);
    background: var(--accent-glow);
    color: var(--accent2);
    box-shadow: 0 0 14px rgba(59,130,246,0.35);
  }

  .step-label {
    font-size:13px;
    color: var(--text-dim);
    font-weight:400;
    line-height:1.4;
    padding-top:5px;
    transition: color 0.2s;
  }

  .progress-item.active .step-label {
    color: var(--text);
    font-weight:500;
  }

  .progress-item.done .step-label {
    color: var(--text-muted);
  }

  .progress-item:hover .step-label {
    color: var(--text);
  }

  .overall-progress {
    margin-top:24px;
    padding:16px;
    border-radius:10px;
    border:1px solid var(--border);
    background: var(--surface);
  }

  .progress-label {
    display:flex;
    justify-content:space-between;
    
    font-size:11px;
    color: var(--text-muted);
    margin-bottom:10px;
  }

  .progress-bar-track {
    height:4px;
    background: var(--surface2);
    border-radius:4px;
    overflow:hidden;
  }

  .progress-bar-fill {
    height:100%;
    background: linear-gradient(90deg, var(--accent), var(--green));
    border-radius:4px;
    transition: width 0.5s ease;
    width:0%;
  }

  /* ── CONTENT ── */
  .content-area {
    display:flex;
    flex-direction:column;
    gap:0;
  }

  /* ── STEP CARD ── */
  .step-card {
    border:1px solid var(--border);
    border-radius:14px;
    background: var(--surface);
    margin-bottom:16px;
    overflow:hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
  }

  .step-card.active {
    border-color: var(--border-glow);
    box-shadow: 0 0 0 1px rgba(59,130,246,0.1), 0 8px 40px rgba(0,0,0,0.4);
  }

  .step-card.done {
    border-color: #684895;
  }

  .step-header {
    padding:20px 24px;
    display:flex;
    align-items:center;
    gap:16px;
    cursor:pointer;
    user-select:none;
    transition: background 0.2s;
  }

  .step-header:hover {
    background: rgba(255,255,255,0.02);
  }

  .step-num {
    width:36px; height:36px;
    border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    
    font-weight:600;
    font-size:13px;
    flex-shrink:0;
    transition: all 0.3s;
  }

  .step-card .step-num { background: var(--surface2); color: var(--text-dim); border:1px solid var(--border); }
  .step-card.active .step-num { background: var(--accent-glow); color: var(--accent2); border-color: var(--border-glow); }
  .step-card.done .step-num { background: #3a1c6393; color: var(--green); border-color: #684895; }

  .step-title-group { flex:1; }

  .step-phase {
    
    font-size:10px;
    
    text-transform:uppercase;
    color: var(--text-dim);
    margin-bottom:3px;
  }

  .step-card.active .step-phase { color: var(--accent); }
  .step-card.done .step-phase { color: var(--green); }

  .step-title {
    
    font-size:16px;
    font-weight:700;
    color: var(--text);
  }

  .step-chevron {
    font-size:18px;
    color: var(--text-dim);
    transition: transform 0.3s;
    font-weight:300;
  }

  .step-card.active .step-chevron {
    transform: rotate(90deg);
    color: var(--accent2);
  }

  .step-body {
    display:none;
    padding:0 24px 24px;
    animation: fadeIn 0.25s ease;
  }

  .step-card.active .step-body { display:block; }

  @keyframes fadeIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }

  .step-divider {
    height:1px;
    background: var(--border);
    margin-bottom:20px;
  }

  .step-description {
    font-size:14px;
    color: var(--text-muted);
    line-height:1.7;
    margin-bottom:20px;
    font-weight:300;
  }

  /* ── SCREEN MOCK ── */
  .screen-mock {
    border-radius:10px;
    border:1px solid var(--border);
    overflow:hidden;
    margin-bottom:20px;
    background: #23133a;
    box-shadow: 0 4px 30px #be52e50f;
  }

  .screen-bar {
    padding:9px 14px;
    background: #1f1232;
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    gap:10px;
  }

  .screen-dots {
    display:flex;
    gap:5px;
  }

  .screen-dots span {
    width:8px; height:8px;
    border-radius:50%;
  }

  .screen-dots span:nth-child(1){ background:#f87171; }
  .screen-dots span:nth-child(2){ background:#fbbf24; }
  .screen-dots span:nth-child(3){ background:#34d399; }

  .screen-url {
    flex:1;
    background:#23133a;
    border-radius:5px;
    padding:4px 10px;
    
    font-size:11px;
    color: var(--text-dim);
  }

  .screen-content {
    padding:24px;
  }

  /* ── FORM MOCK ── */
  .form-section-title {
    
    font-size:15px;
    font-weight:700;
    color: var(--text);
    margin-bottom:16px;
    padding-bottom:10px;
    border-bottom:1px solid var(--border);
  }

  .form-row {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
    margin-bottom:12px;
  }

  .form-row.single { grid-template-columns:1fr; }

  .form-field {
    display:flex;
    flex-direction:column;
    gap:5px;
  }

  .form-label {
    font-size:11px;
    
    color: var(--text-muted);
    
    text-transform:uppercase;
    display:flex;
    align-items:center;
    gap:5px;
  }

  .req { color: var(--red); font-size:13px; }
  .highlight-field .form-label { color: var(--accent2); }

  .form-input-mock {
    padding:9px 12px;
    border-radius:7px;
    border:1px solid var(--border);
    background: var(--surface2);
    font-size:13px;
    color: var(--text-muted);
    display:flex;
    align-items:center;
    gap:8px;
  }

  .form-input-mock.filled {
    color: var(--text);
    border-color: #5e309d;
    background: rgba(149, 59, 246, 0.05);
  }

  .form-input-mock.highlight {
    border-color: var(--accent);
    background: #3a1c6350;
    color: var(--accent2);
    box-shadow: 0 0 0 2px #be52e50f;
    animation: glowPulse 2s infinite;
  }

  .form-input-mock.vendor-selected {
    border-color: var(--green);
    background: #1f1232;
    color: var(--green);
    box-shadow: 0 0 0 2px #be52e50f;
  }

  @keyframes glowPulse {
    0%,100%{box-shadow:0 0 0 2px #3a1c63}
    50%{box-shadow:0 0 0 4px #95909C1A}
  }

  .form-select-arrow {
    margin-left:auto;
    color: var(--text-dim);
    font-size:10px;
  }

  /* ── DROPDOWN MOCK ── */
  .dropdown-mock {
    margin-top:-4px;
    border:1px solid var(--accent);
    border-top:none;
    border-radius:0 0 8px 8px;
    background: var(--surface2);
    overflow:hidden;
    margin-bottom:12px;
  }

  .dropdown-option {
    padding:9px 14px;
    font-size:13px;
    color: var(--text-muted);
    
    cursor:pointer;
    transition: background 0.15s;
    display:flex;
    align-items:center;
    gap:10px;
  }

  .dropdown-option:hover { background: #23133a; }

  .dropdown-option.selected {
    background: #23133a;
    color: var(--green);
  }

  .dropdown-option .check { color: var(--green); font-size:14px; }

  /* ── CALLOUT ── */
  .callout {
    padding:14px 16px;
    border-radius:8px;
    border-left:3px solid;
    margin-bottom:16px;
    font-size:13px;
    line-height:1.6;
    display:flex;
    gap:12px;
    align-items:flex-start;
  }

  .callout.info { background: #1f1232; border-color: var(--accent); color: #e5e8ed; }
  .callout.warn { background: rgba(251,146,60,0.07); border-color: var(--orange); color: #fdba74; }
  .callout.success { background: #1f1232; border-color: #3a1c63; color: #e5e8ed; }

  .callout-icon { font-size:16px; flex-shrink:0; margin-top:1px; }

  /* ── INSTRUCTION LIST ── */
  .instruction-list {
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:16px;
  }

  .instruction-list li {
    display:flex;
    align-items:flex-start;
    gap:12px;
    font-size:13px;
    color: var(--text-muted);
    line-height:1.6;
    padding:10px 14px;
    border-radius:8px;
    background: var(--surface2);
    border:1px solid var(--border);
    transition: border-color 0.2s;
  }

  .instruction-list li:hover { border-color: var(--border-glow); }

  .li-num {
    width:22px; height:22px;
    border-radius:50%;
    background: var(--accent-glow);
    border:1px solid var(--border-glow);
    color: var(--accent2);
    font-size:11px;
    
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    margin-top:1px;
  }

  code {
    
    background: #0f0818;
    color: var(--accent2);
    padding:2px 7px;
    border-radius:4px;
    font-size:12px;
    border:1px solid #3a1c63;
  }

  /* ── NAV BUTTONS ── */
  .nav-buttons {
    display:flex;
    gap:12px;
    margin-top:20px;
  }

  .btn {
    padding:10px 22px;
    border-radius:8px;
    font-size:13px;
    
    font-weight:600;
    cursor:pointer;
    border:none;
    transition: all 0.2s;
    display:flex;
    align-items:center;
    gap:8px;
    
  }

  .btn-primary {
    background: linear-gradient(135deg, #883CF0, #3a1c63);
    color:#fff;
    box-shadow: 0 4px 16px #b959dc0f;
  }

  .btn-primary:hover {
    background: linear-gradient(135deg, #883cf0e0, #684895);
    transform:translateY(-1px);
    box-shadow: 0 6px 22px #be52e50f;
  }

  .btn-secondary {
    background: var(--surface2);
    color: var(--text-muted);
    border:1px solid var(--border);
  }

  .btn-secondary:hover { color:var(--text); border-color: var(--border-glow); }

  .btn-success {
    background: linear-gradient(135deg, #883CF0, #3a1c63);
    color:#fff;
    box-shadow: 0 4px 16px #1f1232
  }

  .btn-success:hover {
    transform:translateY(-1px);
    box-shadow: 0 6px 22px #be52e50f;
  }

  /* ── FIELD HIGHLIGHT LEGEND ── */
  .legend {
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:16px;
  }

  .legend-item {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    color: var(--text-dim);
    
  }

  .legend-dot {
    width:8px; height:8px;
    border-radius:2px;
  }

  /* ── COMPLETION ── */
  .completion-banner {
    display:none;
    border-radius:14px;
    border:1px solid #3a1c63;
    background: linear-gradient(135deg, #1f1232, #2a1647);
    padding:40px;
    text-align:center;
    position:relative;
    overflow:hidden;
    margin-bottom:16px;
  }

  .completion-banner::before {
    content:'';
    position:absolute;
    inset:0;
    background: radial-gradient(circle at 50% 0%, #af84eb50, transparent 60%);
    pointer-events:none;
  }

  .completion-banner.visible { display:block; animation: fadeIn 0.5s ease; }

  .completion-icon {
    font-size:48px;
    margin-bottom:16px;
    display:block;
  }

  .completion-banner h2 {
    font-size:28px;
    font-weight:800;
    margin-bottom:10px;
    background: linear-gradient(90deg, var(--green), var(--accent2));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
  }

  .completion-banner p {
    color: var(--text-muted);
    font-size:14px;
    max-width:500px;
    margin:0 auto 24px;
    line-height:1.6;
    font-weight:300;
  }

  .completion-checklist {
    display:inline-flex;
    flex-direction:column;
    gap:8px;
    text-align:left;
    margin:0 auto 24px;
    padding:16px 24px;
    border-radius:10px;
    border:1px solid var(--border);
    background: rgba(0,0,0,0.2);
  }

  .completion-checklist li {
    list-style:none;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    color: var(--text-muted);
  }

  .completion-checklist li::before {
    content:'✓';
    color: var(--green);
    font-weight:700;
    width:16px;
  }

  .reset-btn {
    background: transparent;
    border:1px solid var(--border);
    color: var(--text-muted);
    padding:8px 20px;
    border-radius:7px;
    cursor:pointer;
    font-size:12px;
    
    transition: all 0.2s;
    margin-top:8px;
  }

  .reset-btn:hover { border-color: var(--border-glow); color: var(--text); }

  /* ── PATH MOCK (navigation) ── */
  .nav-path {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:4px;
    padding:10px 14px;
    background: var(--surface2);
    border-radius:8px;
    margin-bottom:16px;
    
    font-size:11px;
    border:1px solid var(--border);
  }

  .nav-path-item {
    color: var(--text-muted);
    cursor:pointer;
    transition: color 0.2s;
    padding:2px 6px;
    border-radius:4px;
  }

  .nav-path-item:hover { color: var(--accent2); background: var(--accent-glow); }

  .nav-path-item.active { color: var(--text); }

  .nav-path-sep { color: var(--text-dim); }

  /* ── RESPONSIVE ── */
  @media(max-width:800px){
    .delinea-vendor-training-1 header { padding:20px 24px; }
    .hero { padding:36px 24px 32px; }
    .main-layout { padding:0 24px 60px; grid-template-columns:1fr; }
    .sidebar { position:static; }
    .form-row { grid-template-columns:1fr; }
  }

  /* tag badge */
  .tag {
    display:inline-block;
    padding:2px 8px;
    border-radius:4px;
    font-size:10px;
    
    
    text-transform:uppercase;
    border:1px solid;
  }

  .tag-blue { background: #1f1232; color: var(--accent2); border-color: #3a1c63; }
  .tag-green { background: rgba(34,211,165,0.1); color: var(--green); border-color: rgba(34,211,165,0.25); }
  .tag-orange { background: rgba(251,146,60,0.1); color: var(--orange); border-color: rgba(251,146,60,0.25); }

  .directory-selector {
    padding:12px 16px;
    border-radius:8px;
    border:2px solid var(--accent);
    background: #3a1c6350;
    margin-bottom:16px;
  }

  .dir-title {
    font-size:12px;
    color: var(--accent2);
    margin-bottom:10px;
  }

  .dir-option {
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border-radius:6px;
    font-size:13px;
    color: var(--text-muted);
    background: var(--surface2);
    margin-bottom:6px;
    border:1px solid var(--border);
    cursor:pointer;
    transition: all 0.2s;
  }

  .dir-option:hover { border-color: var(--border-glow); color: var(--text); }

  .dir-option.selected {
    border-color: var(--accent);
    color: var(--accent2);
    background: #3a1c6350;
  }

  .dir-option .radio {
    width:14px; height:14px;
    border-radius:50%;
    border:2px solid currentColor;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }

  .dir-option.selected .radio::before {
    content:'';
    width:6px; height:6px;
    border-radius:50%;
    background: currentColor;
  }


  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: #873cf015; }
  ::-webkit-scrollbar-thumb { background: #873cf015; border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: #873cf015; }