.apidoc-wrap { max-width: 1400px; margin: 0 auto; width: 100%; }

    /* Header */
    .apidoc-hero { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 32px 36px; margin-bottom: 24px; }
    .apidoc-hero h1 { font-size: 22px; font-weight: 700; color: #1e293b; margin-bottom: 6px; }
    .apidoc-hero p { color: #64748b; font-size: 14px; }
    .apidoc-hero .back-link { color: #475569; font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: color .2s; }
    .apidoc-hero .back-link:hover { color: #0f172a; }

    /* Key Card */
    .key-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 24px; margin-bottom: 24px; }

    /* Tabs */
    .apidoc-tabs { display: flex; gap: 6px; margin-bottom: 24px; }
    .apidoc-tab { padding: 8px 20px; font-size: 13px; font-weight: 600; color: #64748b; cursor: pointer; border-radius: 6px; border: 1.5px solid #e2e8f0; background: #fff; transition: all .2s; user-select: none; display: inline-flex; align-items: center; gap: 6px; }
    .apidoc-tab:hover { border-color: #cbd5e1; color: #334155; }
    .apidoc-tab.active { border-color: #1e293b; color: #1e293b; background: #f8fafc; }

    /* Endpoint Cards */
    .endpoint-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 20px; overflow: hidden; }
    .endpoint-card:hover { border-color: #cbd5e1; }
    .endpoint-header { padding: 16px 24px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; gap: 10px; }
    .endpoint-header h3 { font-size: 15px; font-weight: 600; color: #1e293b; margin: 0; }
    .endpoint-body { padding: 20px 24px; }
    .endpoint-desc { color: #64748b; font-size: 13px; margin-bottom: 14px; line-height: 1.6; }

    /* Method badges */
    .badge-get { background: #f0fdf4; color: #16a34a; padding: 3px 10px; border-radius: 4px; font-weight: 700; font-size: 11px; letter-spacing: .5px; border: 1px solid #bbf7d0; }
    .badge-post { background: #fffbeb; color: #d97706; padding: 3px 10px; border-radius: 4px; font-weight: 700; font-size: 11px; letter-spacing: .5px; border: 1px solid #fde68a; }
    .badge-err { background: #fef2f2; color: #dc2626; padding: 3px 10px; border-radius: 4px; font-weight: 700; font-size: 11px; letter-spacing: .5px; border: 1px solid #fecaca; }

    /* URL block */
    .url-block { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 10px 14px; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 12.5px; color: #334155; margin-bottom: 14px; word-break: break-all; }

    /* Param table */
    .param-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden; margin-bottom: 14px; }
    .param-table th { background: #f8fafc; text-align: left; padding: 8px 14px; font-weight: 600; color: #334155; border-bottom: 1px solid #e2e8f0; font-size: 12px; }
    .param-table td { padding: 8px 14px; border-bottom: 1px solid #f1f5f9; color: #475569; }
    .param-table tr:last-child td { border-bottom: none; }
    .param-table code { background: #f1f5f9; padding: 2px 6px; border-radius: 3px; font-size: 12px; color: #334155; font-family: 'JetBrains Mono', monospace; }
    .badge-required { background: #fef2f2; color: #dc2626; padding: 2px 6px; border-radius: 3px; font-size: 11px; font-weight: 600; }
    .badge-optional { background: #f0fdf4; color: #16a34a; padding: 2px 6px; border-radius: 3px; font-size: 11px; font-weight: 600; }

    /* Code block */
    .code-block { background: #1e293b; color: #cbd5e1; padding: 16px; border-radius: 8px; font-size: 12.5px; overflow-x: auto; font-family: 'JetBrains Mono', 'Fira Code', monospace; line-height: 1.7; position: relative; margin-bottom: 14px; white-space: pre; }
    .code-block .copy-btn { position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #94a3b8; cursor: pointer; padding: 4px 12px; border-radius: 4px; font-size: 11px; transition: all .2s; display: flex; align-items: center; gap: 4px; }
    .code-block .copy-btn:hover { background: rgba(255,255,255,.12); color: #e2e8f0; }

    /* Response block */
    .response-block { background: #f8fafc; border: 1px solid #e2e8f0; padding: 16px; border-radius: 8px; font-size: 12.5px; overflow-x: auto; font-family: 'JetBrains Mono', monospace; line-height: 1.6; color: #334155; }

    /* Section label */
    .section-label { font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 6px; display: flex; align-items: center; gap: 5px; text-transform: uppercase; letter-spacing: .3px; }
    .section-label i { color: #94a3b8; font-size: 13px; }

    /* Overview card for agency */
    .overview-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 24px; margin-bottom: 24px; }

    /* Info box */
    .info-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px 18px; margin-bottom: 18px; }
    .info-box p { font-size: 13px; color: #475569; margin: 0; }

    /* Sticky nav */
    .apidoc-nav { position: sticky; top: 70px; z-index: 10; background: rgba(255,255,255,.97); backdrop-filter: blur(6px); border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 16px; margin-bottom: 24px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
    .apidoc-nav-label { font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; margin-right: 6px; }
    .apidoc-nav a { font-size: 12px; color: #64748b; text-decoration: none; padding: 4px 10px; border-radius: 4px; transition: all .2s; white-space: nowrap; }
    .apidoc-nav a:hover { background: #f1f5f9; color: #334155; }

    /* Key input */
    .key-input { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 8px 12px; color: #1e293b; font-family: 'JetBrains Mono', monospace; font-size: 12px; width: 100%; transition: border-color .2s; }
    .key-input:focus { outline: none; border-color: #94a3b8; }

    /* Endpoint table */
    .endpoint-table { width: 100%; font-size: 13px; border-collapse: separate; border-spacing: 0; border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden; }
    .endpoint-table th { background: #f8fafc; padding: 8px 14px; text-align: left; font-weight: 600; color: #334155; border-bottom: 1px solid #e2e8f0; font-size: 12px; }
    .endpoint-table td { padding: 8px 14px; border-bottom: 1px solid #f1f5f9; }
    .endpoint-table tr:last-child td { border-bottom: none; }
    .endpoint-table code { background: #f1f5f9; padding: 2px 6px; border-radius: 3px; font-size: 12px; }

    @media (max-width: 768px) {
        .apidoc-hero { padding: 20px 16px; }
        .apidoc-hero h1 { font-size: 18px; }
        .endpoint-header { padding: 14px 16px; }
        .endpoint-body { padding: 14px 16px; }
        .apidoc-nav { flex-wrap: nowrap; overflow-x: auto; gap: 3px; }
        .key-card { padding: 16px; }
    }

    /* Custom toast */
    .apidoc-toast { position: fixed; top: 20px; right: 20px; z-index: 99999; background: #fff; color: #1e293b; padding: 10px 20px; border-radius: 6px; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(-10px); transition: all .3s ease; pointer-events: none; border: 1px solid #e2e8f0; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
    .apidoc-toast.show { opacity: 1; transform: translateY(0); }
    .apidoc-toast i { font-size: 16px; color: #16a34a; }

    /* Try API */
    .apidoc-tryit { margin-top: 18px; padding-top: 18px; border-top: 1px dashed #e2e8f0; }
    .endpoint-header { flex-wrap: wrap; }
    .apidoc-status-btn { margin-left: auto; background: #ecfdf5; color: #059669; border: 1px solid #6ee7b7; padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: all .2s; }
    .apidoc-status-btn:hover { background: #d1fae5; border-color: #34d399; }
    .apidoc-tryit-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
    .apidoc-tryit-btns { display: flex; flex-wrap: wrap; gap: 8px; }
    .apidoc-tryit-btn { background: #1e293b; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .2s; }
    .apidoc-tryit-btn-test { background: #059669; }
    .apidoc-tryit-btn-test:hover:not(:disabled) { background: #047857; }
    .apidoc-tryit-btn-real { background: #fff; color: #b45309; border: 1px solid #fcd34d; }
    .apidoc-tryit-btn-real:hover:not(:disabled) { background: #fffbeb; }
    .apidoc-tryit-btn:hover:not(:disabled) { filter: brightness(1.05); }
    .apidoc-tryit-btn:disabled { opacity: .65; cursor: wait; }
    .apidoc-tryit-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 12px; }
    .apidoc-tryit-field label { display: block; font-size: 11px; font-weight: 600; color: #64748b; margin-bottom: 4px; }
    .apidoc-tryit-req { color: #dc2626; }
    .apidoc-tryit-warn { font-size: 12px; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 8px 12px; margin-bottom: 12px; display: flex; align-items: flex-start; gap: 6px; }
    .apidoc-tryit-meta { font-size: 11px; font-family: 'JetBrains Mono', monospace; margin-bottom: 6px; color: #64748b; }
    .apidoc-tryit-meta.is-ok { color: #16a34a; }
    .apidoc-tryit-meta.is-error { color: #dc2626; }
    .apidoc-tryit-meta.is-test { color: #059669; }
    .apidoc-tryit-response { background: #0f172a; color: #94a3b8; border-radius: 8px; padding: 14px; font-size: 11.5px; line-height: 1.55; max-height: 320px; overflow: auto; margin: 0; white-space: pre-wrap; word-break: break-word; font-family: 'JetBrains Mono', monospace; border: 1px solid #1e293b; }
    .apidoc-tryit-response.is-error { border-color: #7f1d1d; color: #fecaca; }
    .apidoc-tryit-response.is-test-ok { border-color: #065f46; }

