/* ARCHITECTURE */
#architecture{background:var(--bg)}
.arch-diagram{margin-top:56px;display:flex;flex-direction:column;gap:0;position:relative}
/* layer connector lines */
.arch-connector{display:flex;justify-content:center;align-items:center;height:36px;position:relative;z-index:1}
.arch-connector::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,var(--gb),transparent)}
.arch-dots{display:flex;flex-direction:column;gap:5px;align-items:center}
.arch-dot{width:3px;height:3px;border-radius:50%;background:var(--gold);opacity:.5;animation:adot 2s ease-in-out infinite}
.arch-dot:nth-child(2){animation-delay:.3s}.arch-dot:nth-child(3){animation-delay:.6s}
@keyframes adot{0%,100%{opacity:.2;transform:scaleY(.7)}50%{opacity:.9;transform:scaleY(1)}}
/* layer wrapper */
.arch-layer{border-radius:20px;border:1px solid var(--gb);background:var(--gl);backdrop-filter:blur(8px);padding:18px 24px;position:relative;overflow:hidden}
.arch-layer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,var(--gb) 30%,var(--gb) 70%,transparent 95%)}
.arch-layer-label{font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--tm);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.arch-layer-label::after{content:'';flex:1;height:1px;background:var(--gb)}
.arch-layer-label span{white-space:nowrap}
/* color accents per layer */
.arch-layer.remote{border-color:rgba(56,189,248,.18);background:rgba(56,189,248,.03)}
.arch-layer.remote .arch-layer-label{color:#38BDF8}
.arch-layer.remote .arch-layer-label::after{background:rgba(56,189,248,.15)}
.arch-layer.core{border-color:rgba(201,168,76,.25);background:rgba(201,168,76,.03);box-shadow:0 0 60px rgba(201,168,76,.04),0 20px 40px rgba(0,0,0,.15)}
.arch-layer.core .arch-layer-label{color:var(--gold)}
.arch-layer.core .arch-layer-label::after{background:rgba(201,168,76,.2)}
.arch-layer.bridges{border-color:rgba(167,139,250,.18);background:rgba(167,139,250,.02)}
.arch-layer.bridges .arch-layer-label{color:#a78bfa}
.arch-layer.bridges .arch-layer-label::after{background:rgba(167,139,250,.15)}
.arch-layer.devices{border-color:rgba(74,144,217,.18);background:rgba(74,144,217,.02)}
.arch-layer.devices .arch-layer-label{color:#38BDF8}
.arch-layer.devices .arch-layer-label::after{background:rgba(74,144,217,.15)}
/* node grid inside layer */
.arch-nodes{display:flex;flex-wrap:wrap;gap:10px}
.an{display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:12px;background:var(--mw-bg);border:1px solid var(--mw-bd);transition:all .3s var(--eo);cursor:default;flex-shrink:0}
.an:hover{border-color:rgba(201,168,76,.25);background:var(--gs);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.15)}
.an-ic{font-size:18px;flex-shrink:0;line-height:1}
.an-body{min-width:0}
.an-name{font-size:11px;font-weight:700;color:var(--tp);white-space:nowrap}
.an-sub{font-size:9px;color:var(--tm);font-weight:300;white-space:nowrap;margin-top:1px}
.an-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.an-dot.grn{background:#4caf50;box-shadow:0 0 6px rgba(76,175,80,.5);animation:dp 2s ease-in-out infinite}
.an-dot.blu{background:#38BDF8;box-shadow:0 0 6px rgba(56,189,248,.4);animation:dp 2.5s ease-in-out infinite}
.an-dot.gld{background:var(--gold);box-shadow:0 0 6px rgba(201,168,76,.4);animation:dp 3s ease-in-out infinite}
/* CORE special styling */
.arch-layer.core .an{border-color:rgba(201,168,76,.15)}
.arch-layer.core .an.main{border-color:rgba(201,168,76,.35);background:linear-gradient(145deg,rgba(30,24,12,.9),rgba(15,12,6,.95))}
html[data-theme="light"] .arch-layer.core .an.main{background:linear-gradient(145deg,rgba(255,248,235,.95),rgba(250,240,220,.98))}
/* mobile responsive */
@media(max-width:768px){.an-sub{display:none}.arch-nodes{gap:7px}.an{padding:8px 10px}}
@media(max-width:480px){.arch-nodes{gap:6px}.an{padding:7px 9px}.an-name{font-size:10px}}