:root{
    --bg:#05060a;
    --fg:rgba(255,255,255,.92);
    --muted:rgba(255,255,255,.58);
    --hair:rgba(255,255,255,.12);
    --accent:#7cf7ff;
    --accent2:#a78bfa;
    --shadow: 0 18px 60px rgba(0,0,0,.55);
    --radius: 18px;
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    background: var(--bg);
    color:var(--fg);
    font-family:var(--sans);
    overflow:hidden;
}

/* 背景 */
#bg{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    display:block;
    z-index:0;
    pointer-events:none;
}

/* Core 网状图（主视觉） */
#core{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    display:block;
    z-index:1;
    pointer-events:auto;
}

/* TopNav */
.topnav{
    position:fixed;
    top:16px;
    left:16px;
    right:16px;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:12px 14px;
    border:1px solid rgba(255,255,255,.08);
    background: rgba(6,7,10,.45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 999px;
    box-shadow: var(--shadow);
}
.brand{display:flex;align-items:center;gap:10px;min-width:190px}
.brand .dot{
    width:10px;height:10px;border-radius:50%;
    background: radial-gradient(circle at 30% 30%, var(--accent), rgba(124,247,255,.1));
    box-shadow: 0 0 18px rgba(124,247,255,.35);
}
.brand .name{font-weight:600;letter-spacing:.2px;font-size:13px;color:rgba(255,255,255,.86);white-space:nowrap}
.brand .sub{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.36);margin-left:8px;white-space:nowrap}

.navlinks{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.navlinks a{
    text-decoration:none;
    color:rgba(255,255,255,.70);
    font-size:12px;
    padding:9px 12px;
    border-radius:999px;
    border:1px solid transparent;
    transition:.25s ease;
}
.navlinks a:hover{
    color:rgba(255,255,255,.92);
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
}
.navlinks a.active{
    color:rgba(255,255,255,.92);
    border-color: rgba(124,247,255,.26);
    background: linear-gradient(180deg, rgba(124,247,255,.10), rgba(124,247,255,.03));
    box-shadow: 0 0 0 1px rgba(124,247,255,.08) inset;
}

.topActions{display:flex;align-items:center;gap:10px;flex:0 0 auto}

.langToggle{
    appearance:none;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    border-radius: 999px;
    padding: 0;
    cursor: pointer;
    transition: .22s ease;
}
.langToggle:hover{
    border-color: rgba(124,247,255,.22);
    background: rgba(124,247,255,.06);
    box-shadow: 0 0 0 1px rgba(124,247,255,.06) inset;
}
.langTrack{position:relative;display:flex;align-items:center;padding:3px;min-width:132px;height:32px}
.langOpt{
    position:relative;z-index:2;width:50%;
    text-align:center;font-family:var(--mono);font-size:11px;
    color:rgba(255,255,255,.62);user-select:none;line-height:26px
}
.langKnob{
    position:absolute;z-index:1;top:3px;left:3px;bottom:3px;
    width: calc(50% - 3px);
    border-radius:999px;
    background: linear-gradient(180deg, rgba(124,247,255,.14), rgba(124,247,255,.06));
    border: 1px solid rgba(124,247,255,.18);
    box-shadow: 0 0 0 1px rgba(124,247,255,.06) inset;
    transition: transform .22s ease;
}
.langToggle[data-lang="ja"] .langKnob{ transform: translateX(100%); }
.langToggle[data-lang="zh"] .langOpt.zh{ color: rgba(255,255,255,.88); }
.langToggle[data-lang="ja"] .langOpt.ja{ color: rgba(255,255,255,.88); }

.pillBtn{
    display:flex;align-items:center;gap:10px;
    padding:9px 12px;border-radius:999px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    color:rgba(255,255,255,.72);
    font-size:12px;font-family:var(--mono);
    white-space:nowrap;text-decoration:none;
    transition:.22s ease;
}
.pillBtn:hover{
    border-color: rgba(124,247,255,.22);
    background: rgba(124,247,255,.06);
    color: rgba(255,255,255,.86);
    box-shadow: 0 0 0 1px rgba(124,247,255,.06) inset;
}
.pulseDot{
    width:8px;height:8px;border-radius:50%;
    background: rgba(124,247,255,.85);
    box-shadow: 0 0 18px rgba(124,247,255,.28);
    position:relative;
}
.pulseDot::after{
    content:"";position:absolute;inset:-6px;border-radius:50%;
    border:1px solid rgba(124,247,255,.25);
    animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
    0%{transform:scale(.78);opacity:.35}
    60%{transform:scale(1.12);opacity:.10}
    100%{transform:scale(1.25);opacity:0}
}

/* Flow Panel */
.flowPanel{
    position:fixed;
    right:16px;
    bottom:16px;
    z-index:12;

    width:min(720px, calc(100vw - 32px));
    height:min(460px, calc(100vh - 110px));

    border-radius: 24px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(6,7,10,.46);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

/* ✅ AaaS explain block (inside flowPanel, top-aligned) */
.aaasExplain{
    padding: 12px 18px 12px 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(124,247,255,.07), rgba(255,255,255,.02));
}
.aaasExplainTitle{
    font-family: var(--mono);
    font-size: 12px;
    color: rgba(255,255,255,.86);
    letter-spacing: .2px;
}
.aaasExplainSub{
    margin-top: 6px;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.35;
    color: rgba(255,255,255,.60);
    word-break: break-word;
}

.flowHead{
    padding:14px 18px 12px 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.flowTitle{
    font-family: var(--mono);
    font-size: 14px;
    letter-spacing: .6px;
    color: rgba(255,255,255,.84);
}
.flowSub{
    margin-top:8px;
    font-size: 13px;
    color: rgba(255,255,255,.56);
    font-family: var(--mono);
}
.flowSvgWrap{
    flex:1;
    padding: 8px 10px 10px 10px;
}

/* SVG styling */
#flowSvg{ width:100%; height:100%; }
#flowSvg .line{
    fill:none;
    stroke-width: 3.0;
    stroke-linecap: round;
    stroke-dasharray: 12 12;
    animation: dash 10s linear infinite;
}
#flowSvg .line.api{ stroke: rgba(124,247,255,.42); }
#flowSvg .line.rpa{ stroke: rgba(167,139,250,.42); }
#flowSvg .line.pipe{
    stroke: rgba(255,255,255,.22);
    stroke-dasharray: 14 14;
}
@keyframes dash{
    to { stroke-dashoffset: -220; }
}
#flowSvg .node circle{
    fill: rgba(6,7,10,.35);
    stroke-width: 2.2;
    stroke: rgba(124,247,255,.26);
}
#flowSvg .node.rpaNode circle{ stroke: rgba(167,139,250,.28); }
#flowSvg .node.sysNode circle{ stroke: rgba(255,255,255,.28); }
#flowSvg .node.strong circle{ stroke-width: 2.6; }
#flowSvg text{
    font-family: var(--mono);
    font-size: 13px;
    fill: rgba(255,255,255,.84);
}

@media (max-width: 720px){
    .brand .sub{display:none}
    .flowPanel{
        height:min(420px, calc(100vh - 120px));
        width:min(720px, calc(100vw - 24px));
        right:12px;
        bottom:12px;
    }
}