graph LR
    classDef default fill:#1e293b,stroke:#94a3b8,stroke-width:1px,color:#fff
    classDef external fill:#000,stroke:#fff,stroke-width:2px,color:#fff
    classDef gateway fill:#b45309,stroke:#fcd34d,stroke-width:2px,color:#fff
    classDef app fill:#065f46,stroke:#34d399,stroke-width:2px,color:#fff
    classDef agent fill:#581c87,stroke:#c084fc,stroke-width:2px,color:#fff
    classDef ai_engine fill:#312e81,stroke:#818cf8,stroke-width:2px,color:#fff
    classDef infra fill:#334155,stroke:#64748b,stroke-width:1px,color:#e2e8f0

    User((User / Internet)):::external

    subgraph Home_Server ["🏠 Home Server (Main Host)"]
        direction TB
        subgraph Service_Layer ["Service & Logic Layer"]
            direction LR
            NPM[/"Nginx Proxy Manager"/]:::gateway
            subgraph Apps ["Web Services"]
                direction TB
                BlogApp["Gats Lab Logs"]:::app
                Portfolio["Portfolio"]:::app
            end
            GatsAI["🤖 Gats AI Agent<br/>(Orchestrator)"]:::agent
        end
        subgraph Infra_Layer ["Infrastructure (Docker)"]
            direction LR
            Portainer["Portainer"]:::infra
            Prometheus["Prometheus"]:::infra
            Grafana["Grafana"]:::infra
        end
    end

    subgraph Mac_Studio ["🍎 Mac Studio (AI Brain)"]
        direction TB
        LLM_Engine["Local LLM Engine<br/>(Qwen 2.5 / vLLM)"]:::ai_engine
        AI_Workflow["Hybrid Workflow<br/>(Local + Cloud API)"]:::ai_engine
    end

    User ==> NPM
    NPM --> BlogApp
    NPM --> Portfolio
    GatsAI <== "Inference API" ==> LLM_Engine
    linkStyle default stroke:#22d3ee,stroke-width:2px