/* ============================================================
   LinkUp · Documentation Hub
   ============================================================ */

.lu-docs {
  --d-bg:        #0a0d18;
  --d-bg-2:      #0d111e;
  --d-surface:   rgba(20, 26, 44, 0.55);
  --d-surface-2: rgba(26, 32, 52, 0.7);
  --d-text:      #e6ebff;
  --d-dim:       #aab1cb;
  --d-mute:      #5b6480;
  --d-border:    rgba(140, 160, 220, 0.10);
  --d-border-s:  rgba(140, 160, 220, 0.22);
  --d-acc:       #4f7df5;
  --d-acc-2:     #7aa2ff;
  --d-purple:    #a78bfa;
  --d-ok:        #4ade80;
  --d-warn:      #fbbf24;

  position: relative; isolation: isolate; overflow: hidden;
  padding: 120px 24px;
  background:
    radial-gradient(1100px 600px at 10% -10%, rgba(79,125,245,.12), transparent 60%),
    radial-gradient(900px 500px at 100% 110%, rgba(167,139,250,.10), transparent 60%),
    linear-gradient(180deg, var(--d-bg) 0%, var(--d-bg-2) 100%);
  color: var(--d-text);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
}

.lu-docs__bg { position:absolute; inset:0; z-index:0; pointer-events:none; }
.lu-docs__grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(140,160,220,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(140,160,220,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 90%);
}
.lu-docs__orb { position:absolute; border-radius:50%; filter: blur(100px); opacity:.5; animation: luDDrift 24s ease-in-out infinite alternate; }
.lu-docs__orb--a { width:520px; height:520px; top:-160px; right:-100px; background: radial-gradient(circle, rgba(79,125,245,.45), transparent 65%); }
.lu-docs__orb--b { width:480px; height:480px; bottom:-180px; left:-120px; background: radial-gradient(circle, rgba(167,139,250,.40), transparent 65%); animation-delay:-10s; }
@keyframes luDDrift { from { transform: translate(0,0); } to { transform: translate(-30px, 30px); } }

.lu-docs__container { position:relative; z-index:1; max-width: 1280px; margin: 0 auto; }

[data-lu-d-reveal] { opacity:0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
[data-lu-d-reveal].is-in { opacity:1; transform:none; }

/* Header */
.lu-docs__header { text-align:center; margin-bottom: 56px; }
.lu-docs__label {
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 14px; border:1px solid var(--d-border-s); border-radius: 999px;
  background: rgba(79,125,245,.08); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--d-acc-2); margin-bottom: 22px;
}
.lu-docs__label-pulse { width:6px; height:6px; border-radius:50%; background: var(--d-acc); box-shadow:0 0 10px var(--d-acc); animation: luDPulse 2s infinite; }
.lu-docs__label-divider { color: var(--d-mute); }
.lu-docs__label-mono { font-family:"JetBrains Mono",ui-monospace,monospace; color:var(--d-dim); letter-spacing:.05em; text-transform:none; }
@keyframes luDPulse { 0%,100% { opacity:1; transform:scale(1);} 50% { opacity:.4; transform:scale(1.4);} }

.lu-docs__title { font-size: clamp(34px, 4.4vw, 56px); line-height:1.05; letter-spacing:-.02em; font-weight:600; margin: 0 0 16px; }
.lu-docs__title-accent { background: linear-gradient(120deg, var(--d-acc), var(--d-acc-2) 50%, var(--d-purple)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lu-docs__sub { color: var(--d-dim); font-size: 16px; line-height:1.65; max-width: 620px; margin: 0 auto; }

/* Shell */
.lu-docs__shell {
  display:grid; grid-template-columns: 320px 1fr; gap: 24px;
  border:1px solid var(--d-border-s); border-radius: 24px;
  background: linear-gradient(180deg, var(--d-surface-2), var(--d-surface));
  backdrop-filter: blur(20px);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  overflow: hidden;
}
@media (max-width: 1024px) { .lu-docs__shell { grid-template-columns: 1fr; } }

/* Index */
.lu-docs__index {
  padding: 22px;
  border-right: 1px solid var(--d-border);
  background: linear-gradient(180deg, rgba(255,255,255,.015), transparent);
  display:flex; flex-direction:column; gap: 18px;
}
@media (max-width: 1024px) { .lu-docs__index { border-right:0; border-bottom: 1px solid var(--d-border); } }

.lu-docs__search {
  display:flex; align-items:center; gap:10px;
  padding: 11px 13px; border:1px solid var(--d-border-s); border-radius: 11px;
  background: rgba(255,255,255,.02); transition: border-color .25s, background .25s;
}
.lu-docs__search:focus-within { border-color: var(--d-acc); background: rgba(79,125,245,.06); box-shadow: 0 0 0 4px rgba(79,125,245,.12); }
.lu-docs__search svg { width:15px; height:15px; color: var(--d-mute); flex-shrink:0; }
.lu-docs__search input { flex:1; background:transparent; border:0; outline:0; color: var(--d-text); font-size:13px; font-family:inherit; }
.lu-docs__search input::placeholder { color: var(--d-mute); }
.lu-docs__kbd { font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px; padding:3px 7px; border-radius:5px; background: rgba(140,160,220,.10); color: var(--d-dim); border:1px solid var(--d-border); }

.lu-docs__index-title {
  font-size: 10px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--d-mute); padding: 0 4px;
}

.lu-docs__nav { display:flex; flex-direction:column; gap: 4px; }
.lu-docs__item {
  position:relative;
  display:flex; align-items:center; gap:12px;
  padding: 12px 14px; border-radius: 11px; cursor:pointer;
  background: transparent; border:1px solid transparent; color: var(--d-dim);
  text-align:left; font-family: inherit;
  transition: all .25s ease;
}
.lu-docs__item:hover { background: rgba(255,255,255,.025); color: var(--d-text); }
.lu-docs__item.is-active {
  background: linear-gradient(135deg, rgba(79,125,245,.14), rgba(79,125,245,.04));
  border-color: rgba(79,125,245,.30);
  color: var(--d-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.lu-docs__item.is-active::before {
  content:""; position:absolute; left:-1px; top:10px; bottom:10px; width:3px;
  background: linear-gradient(180deg, var(--d-acc), var(--d-purple));
  border-radius: 0 3px 3px 0; box-shadow: 0 0 12px var(--d-acc);
}
.lu-docs__item-num {
  width:34px; flex-shrink:0; font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size: 11px; color: var(--d-mute); letter-spacing:.05em;
}
.lu-docs__item.is-active .lu-docs__item-num { color: var(--d-acc-2); }
.lu-docs__item-body { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.lu-docs__item-title { font-size: 13px; font-weight:500; }
.lu-docs__item-meta { font-size: 10px; color: var(--d-mute); font-family:"JetBrains Mono",ui-monospace,monospace; letter-spacing:.04em; }
.lu-docs__item-arrow { font-size: 14px; color: var(--d-mute); opacity: 0; transform: translateX(-4px); transition: all .25s; }
.lu-docs__item:hover .lu-docs__item-arrow,
.lu-docs__item.is-active .lu-docs__item-arrow { opacity:1; transform: translateX(0); color: var(--d-acc-2); }
.lu-docs__item.is-hidden { display:none; }

.lu-docs__index-foot { margin-top:auto; padding-top: 14px; border-top: 1px solid var(--d-border); }
.lu-docs__index-progress-head { display:flex; justify-content:space-between; font-size: 11px; color: var(--d-dim); margin-bottom: 8px; }
.lu-docs__index-progress-head b { color: var(--d-acc-2); font-family:"JetBrains Mono",ui-monospace,monospace; }
.lu-docs__index-progress-bar { height:5px; border-radius:3px; background: rgba(255,255,255,.06); overflow:hidden; }
.lu-docs__index-progress-bar i { display:block; height:100%; width: var(--p,20%); background: linear-gradient(90deg, var(--d-acc), var(--d-purple)); border-radius:inherit; transition: width .5s ease; box-shadow: 0 0 12px rgba(79,125,245,.5); }

/* Content */
.lu-docs__content {
  padding: 36px 40px;
  position:relative;
  min-height: 560px;
}
@media (max-width: 700px) { .lu-docs__content { padding: 28px 22px; } }

.lu-docs__pane { display:none; animation: luDFade .4s ease; }
.lu-docs__pane.is-active { display:block; }
@keyframes luDFade { from { opacity:0; transform: translateY(8px);} to { opacity:1; transform:none; } }

.lu-docs__crumbs {
  display:flex; align-items:center; gap:8px;
  font-size: 11px; color: var(--d-mute);
  font-family:"JetBrains Mono",ui-monospace,monospace; letter-spacing:.06em;
  margin-bottom: 16px;
}
.lu-docs__crumbs i { color: var(--d-mute); font-style:normal; opacity:.5; }
.lu-docs__crumbs b { color: var(--d-acc-2); font-weight:500; }

.lu-docs__pane-head { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom: 10px; }
.lu-docs__pane-head h3 { font-size: 28px; font-weight:600; letter-spacing:-.01em; margin:0; }
.lu-docs__pane-tag {
  font-size: 10px; padding: 4px 10px; border-radius: 999px;
  background: rgba(79,125,245,.10); color: var(--d-acc-2);
  border:1px solid rgba(79,125,245,.25);
  text-transform:uppercase; letter-spacing:.12em; font-weight:600;
}
.lu-docs__pane-tag--adv { background: rgba(167,139,250,.10); color: var(--d-purple); border-color: rgba(167,139,250,.25); }
.lu-docs__pane-lead { color: var(--d-dim); font-size: 14.5px; line-height: 1.65; max-width: 640px; margin: 0 0 28px; }

/* Steps */
.lu-docs__steps { display:flex; flex-direction:column; gap: 10px; margin-bottom: 28px; }
.lu-docs__step {
  display:flex; align-items:center; gap: 16px;
  padding: 14px 16px;
  border:1px solid var(--d-border); border-radius: 12px;
  background: rgba(255,255,255,.015);
  transition: all .3s ease;
}
.lu-docs__step:hover { border-color: var(--d-border-s); transform: translateX(3px); background: rgba(255,255,255,.03); }
.lu-docs__step-num {
  width:36px; height:36px; flex-shrink:0;
  display:grid; place-items:center; border-radius: 9px;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size: 12px;
  background: rgba(140,160,220,.08); color: var(--d-dim);
  border:1px solid var(--d-border);
}
.lu-docs__step:not(.lu-docs__step--todo) .lu-docs__step-num {
  background: linear-gradient(135deg, rgba(74,222,128,.18), rgba(74,222,128,.05));
  color: var(--d-ok); border-color: rgba(74,222,128,.25);
}
.lu-docs__step--current .lu-docs__step-num {
  background: linear-gradient(135deg, rgba(79,125,245,.20), rgba(79,125,245,.05));
  color: var(--d-acc-2); border-color: rgba(79,125,245,.30);
  animation: luDStepPulse 2s infinite;
}
@keyframes luDStepPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(79,125,245,.4);} 50% { box-shadow: 0 0 0 6px rgba(79,125,245,0);} }
.lu-docs__step h4 { font-size: 14px; font-weight:600; margin: 0 0 3px; }
.lu-docs__step p { font-size: 12.5px; color: var(--d-dim); margin: 0; }
.lu-docs__step > div { flex:1; min-width:0; }
.lu-docs__step-state {
  font-size: 10px; padding: 4px 10px; border-radius: 999px;
  background: rgba(74,222,128,.10); color: var(--d-ok); border:1px solid rgba(74,222,128,.25);
  text-transform: uppercase; letter-spacing:.1em; font-weight:600;
  font-family:"JetBrains Mono",ui-monospace,monospace;
}
.lu-docs__step--todo .lu-docs__step-state { background: rgba(140,160,220,.06); color: var(--d-mute); border-color: var(--d-border); }
.lu-docs__step-state--now { background: rgba(79,125,245,.10) !important; color: var(--d-acc-2) !important; border-color: rgba(79,125,245,.25) !important; }

/* Code block */
.lu-docs__code {
  border:1px solid var(--d-border-s); border-radius: 12px; overflow:hidden;
  background: #07090f;
}
.lu-docs__code-head {
  display:flex; align-items:center; gap:12px;
  padding: 9px 14px; border-bottom: 1px solid var(--d-border);
  background: rgba(255,255,255,.02);
  font-size: 11px; color: var(--d-mute);
  font-family:"JetBrains Mono",ui-monospace,monospace;
}
.lu-docs__code-dots { display:flex; gap:5px; }
.lu-docs__code-dots i { width:9px; height:9px; border-radius:50%; background: rgba(255,255,255,.12); }
.lu-docs__code-dots i:nth-child(1) { background: #ff5f57; }
.lu-docs__code-dots i:nth-child(2) { background: #febc2e; }
.lu-docs__code-dots i:nth-child(3) { background: #28c840; }
.lu-docs__code-title { flex:1; }
.lu-docs__code-copy { padding: 3px 8px; border-radius: 5px; background: rgba(140,160,220,.08); color: var(--d-dim); cursor:pointer; transition: background .2s, color .2s; }
.lu-docs__code-copy:hover { background: rgba(79,125,245,.15); color: var(--d-acc-2); }
.lu-docs__code pre {
  margin:0; padding: 16px 18px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size: 12.5px; line-height: 1.7; color: var(--d-dim);
  white-space: pre-wrap;
}
.lu-docs__c-prompt { color: var(--d-acc-2); }
.lu-docs__c-arg { color: var(--d-purple); }
.lu-docs__c-out { color: var(--d-mute); }
.lu-docs__c-ok { color: var(--d-ok); }

/* Cards (2.2) */
.lu-docs__cards { display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 700px) { .lu-docs__cards { grid-template-columns: 1fr; } }
.lu-docs__card {
  padding: 18px; border:1px solid var(--d-border); border-radius: 12px;
  background: rgba(255,255,255,.015);
  transition: all .3s ease;
}
.lu-docs__card:hover { border-color: var(--d-border-s); transform: translateY(-2px); background: rgba(255,255,255,.03); }
.lu-docs__card-icon {
  width:36px; height:36px; display:grid; place-items:center; border-radius: 9px;
  background: linear-gradient(135deg, rgba(79,125,245,.18), rgba(79,125,245,.05));
  color: var(--d-acc-2); border:1px solid rgba(79,125,245,.20); margin-bottom: 12px;
}
.lu-docs__card-icon svg { width:18px; height:18px; }
.lu-docs__card h4 { font-size: 14px; font-weight:600; margin: 0 0 4px; }
.lu-docs__card p { font-size: 13px; color: var(--d-dim); line-height:1.55; margin: 0 0 12px; }
.lu-docs__card-meta { font-size: 10px; color: var(--d-mute); font-family:"JetBrains Mono",ui-monospace,monospace; letter-spacing:.06em; }

/* List */
.lu-docs__list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.lu-docs__list li {
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding: 14px 16px; border:1px solid var(--d-border); border-radius: 11px;
  background: rgba(255,255,255,.015);
  transition: all .25s ease;
}
.lu-docs__list li:hover { border-color: var(--d-border-s); transform: translateX(3px); }
.lu-docs__list b { font-size: 13.5px; font-weight:600; }
.lu-docs__list span { font-size: 12px; color: var(--d-dim); font-family:"JetBrains Mono",ui-monospace,monospace; letter-spacing:.04em; }

/* Pager */
.lu-docs__pager {
  display:grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--d-border);
}
.lu-docs__pager-btn {
  display:flex; flex-direction:column; gap:4px;
  padding: 14px 16px; border:1px solid var(--d-border); border-radius: 12px;
  background: rgba(255,255,255,.015); cursor:pointer;
  font-family: inherit; color: var(--d-text); text-align:left;
  transition: all .25s ease;
}
.lu-docs__pager-btn:hover:not(:disabled) { border-color: var(--d-border-s); background: rgba(79,125,245,.06); transform: translateY(-2px); }
.lu-docs__pager-btn:disabled { opacity:.4; cursor: not-allowed; }
.lu-docs__pager-btn--next { text-align:right; }
.lu-docs__pager-dir { font-size: 10px; letter-spacing:.14em; text-transform:uppercase; color: var(--d-acc-2); font-family:"JetBrains Mono",ui-monospace,monospace; }
.lu-docs__pager-name { font-size: 13px; font-weight:500; color: var(--d-text); }