#view-docs .docs-subnav {
            width: 250px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px;
            height: 100%; overflow-y: auto; padding-right: 10px;
          }
          #view-docs .docs-item {
            padding: 12px 14px; border-radius: 8px; background: rgba(17, 24, 39, 0.4);
            border: 1px solid transparent; color: var(--text-muted); text-decoration: none;
            font-size: 13px; transition: 0.2s ease; display: flex; align-items: center; gap: 10px; cursor: pointer;
          }
          #view-docs .docs-item:hover, #view-docs .docs-item.active {
            background: rgba(0, 229, 255, 0.05); border-color: rgba(0, 229, 255, 0.15); color: #00e5ff; transform: translateX(4px);
          }
          #view-docs .docs-num {
            font-size: 10px; background: rgba(255, 255, 255, 0.1); padding: 3px 6px; border-radius: 4px; color: var(--text-main); font-family: monospace;
          }
          #view-docs .docs-item:hover .docs-num, #view-docs .docs-item.active .docs-num { background: #00e5ff; color: #000; }
          
          #view-docs .docs-content {
            flex: 1; display: flex; flex-direction: column; gap: 30px; overflow-y: auto; height: 100%; padding-bottom: 40px; padding-right: 15px; scroll-behavior: smooth;
          }
          #view-docs .instruction-card {
            background: rgba(17, 24, 39, 0.6); border: 1px solid rgba(0, 229, 255, 0.15); border-radius: 12px; padding: 30px;
            position: relative; overflow: hidden;
          }
          #view-docs .instruction-card::before {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
            background: linear-gradient(90deg, #00e5ff, transparent); opacity: 0.5;
          }
          #view-docs .card-title { font-size: 18px; font-weight: 600; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; color: var(--text-main); }
          #view-docs .step-list { list-style: none; counter-reset: steps; display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0;}
          #view-docs .step-list li { position: relative; padding-left: 40px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
          #view-docs .step-list li::before {
            counter-increment: steps; content: counter(steps); position: absolute; left: 0; top: 0;
            width: 24px; height: 24px; background: rgba(124, 58, 237, 0.15); border: 1px solid rgba(124, 58, 237, 0.3);
            color: #a78bfa; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold;
          }
          #view-docs .highlight-box { margin-top: 15px; padding: 12px 16px; background: rgba(0, 229, 255, 0.05); border-left: 3px solid #00e5ff; border-radius: 0 6px 6px 0; font-size: 13px; color: var(--text-main); line-height: 1.5; }
          #view-docs strong { color: var(--text-main); font-weight: 600; }
          #view-docs code { font-family: monospace; background: rgba(255,255,255,0.1); padding: 2px 6px; border-radius: 4px; color: #00e5ff; }
        </style>