<!-- SPEC: PJ2026-010405 云端控制台. -->
<!-- Implementation reference: draft-2026-07-13-p0-cloud-console. -->

<script setup lang="ts">
import { useRoute } from "vue-router";

const route = useRoute();
</script>

<template>
  <main class="not-found-page">
    <section class="not-found-console">
      <header><span>HW</span><strong>HWLAB ROUTER</strong></header>
      <div class="not-found-code"><small>HTTP</small><strong>404</strong><span>ROUTE NOT FOUND</span></div>
      <h1>这个控制台入口不存在。</h1>
      <p>地址没有匹配当前 Cloud Web 路由。已有 ACL 和登录 redirect 不会被 404 页面绕过。</p>
      <code>{{ route.fullPath }}</code>
      <nav><RouterLink to="/workbench">返回 Workbench</RouterLink><RouterLink to="/dashboard">平台概览</RouterLink><RouterLink to="/projects">项目</RouterLink></nav>
    </section>
  </main>
</template>

<style scoped>
.not-found-page { display: grid; width: 100%; min-height: 100dvh; place-items: center; overflow: hidden; background: radial-gradient(circle at 15% 20%, #25545a 0, #173740 28%, #10262e 70%); padding: 22px; }
.not-found-console { position: relative; display: grid; width: min(100%, 720px); gap: 18px; overflow: hidden; border: 1px solid #48757a; border-radius: 8px; background: rgba(17, 43, 51, .88); padding: clamp(26px, 5vw, 52px); color: #efffff; box-shadow: 0 26px 80px rgba(0, 0, 0, .25), inset 3px 0 #27bdb3; }
.not-found-console::before { position: absolute; inset: 0; opacity: .11; background-image: linear-gradient(rgba(126, 217, 209, .35) 1px, transparent 1px), linear-gradient(90deg, rgba(126, 217, 209, .35) 1px, transparent 1px); background-size: 32px 32px; content: ""; pointer-events: none; }
.not-found-console > * { position: relative; }
.not-found-console header { display: flex; gap: 11px; align-items: center; color: #a9e9e4; font: 800 10px/1 ui-monospace, monospace; letter-spacing: 0; }
.not-found-console header span { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #70c8c1; border-radius: 7px; }
.not-found-code { display: flex; gap: 12px; align-items: baseline; margin-top: 20px; }
.not-found-code small,
.not-found-code span { color: #7dd2cb; font: 850 9px/1 ui-monospace, monospace; letter-spacing: 0; }
.not-found-code strong { color: #f0c46c; font: 850 80px/.85 ui-monospace, monospace; letter-spacing: 0; }
.not-found-console h1 { margin: 0; font-size: 36px; letter-spacing: 0; }
.not-found-console p { max-width: 570px; margin: 0; color: #bed2d2; font-size: 13px; line-height: 1.65; }
.not-found-console > code { width: fit-content; max-width: 100%; overflow: auto; border: 1px solid #45676c; border-radius: 6px; background: #0d242b; padding: 9px 11px; color: #8edbd5; font-size: 11px; }
.not-found-console nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 7px; }
.not-found-console nav a { display: inline-flex; min-height: 34px; align-items: center; border: 1px solid #65979a; border-radius: 6px; background: #efffff; padding: 0 12px; color: #174e52; font-size: 11px; font-weight: 800; text-decoration: none; }
</style>
