:root {
  color-scheme: light;
  font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --accent: #0056b8;
  --accent-bright: #0874d1;
  --ink: #002b5c;
  --muted: #657b91;
  --canvas: #edf4fb;
  --panel: #ffffff;
  --line: #d8e4f0;
  --line-strong: #c7d8e8;
  --night: #00172f;
  background: var(--canvas);
  color: var(--ink);
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background:
    linear-gradient(rgba(0, 86, 184, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 86, 184, .035) 1px, transparent 1px),
    radial-gradient(circle at 15% 10%, rgba(53, 151, 220, .13), transparent 28rem),
    var(--canvas);
  background-size: 32px 32px, 32px 32px, auto, auto;
}

.topbar {
  min-height: 5.15rem;
  padding: .75rem clamp(1.1rem, 3vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: 3px solid var(--accent);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 6px 24px rgba(0, 61, 128, .08);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  color: var(--ink);
  text-decoration: none;
}

.brand-mark {
  width: 2.9rem;
  height: 2.9rem;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: .48rem;
  background: linear-gradient(145deg, #0874d1, #004b9d);
  box-shadow: 0 7px 15px rgba(0, 86, 184, .22);
  transform: rotate(45deg) scale(.82);
}

.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  width: 70%;
  height: 1px;
  background: rgba(255, 255, 255, .62);
}

.brand-mark::after { transform: rotate(90deg); }
.brand-mark span {
  width: .36rem;
  height: .36rem;
  border: 1px solid white;
  border-radius: 50%;
  background: #7fe3df;
}

.brand-copy { display: grid; line-height: 1.1; }
.brand-copy strong { color: var(--accent); font-size: 1.12rem; letter-spacing: .16em; }
.brand-copy small { margin-top: .36rem; color: var(--ink); font-size: .68rem; font-weight: 700; letter-spacing: .08em; }

.system-state {
  min-height: 2.8rem;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  background: rgba(248, 251, 254, .84);
}

.state-item {
  min-width: 7.5rem;
  padding: .5rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid #e8eff6;
  font-size: .72rem;
}

.state-item:first-child { flex-direction: row; align-items: center; gap: .5rem; border-left: 0; }
.state-item i { width: .48rem; height: .48rem; border-radius: 50%; background: #20cbb2; box-shadow: 0 0 0 .24rem rgba(32, 203, 178, .12); }
.state-item small { color: #7990a6; font-family: Consolas, monospace; font-size: .58rem; letter-spacing: .12em; }
.state-item b { margin-top: .12rem; color: var(--ink); font-size: .72rem; }

.workspace {
  width: min(76rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(3rem, 7vh, 5.5rem) 0 3.5rem;
}

.hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.1rem;
}

.section-label {
  margin: 0 0 .5rem;
  color: var(--accent-bright);
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
}

h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.5rem, 5vw, 4.7rem);
  letter-spacing: -.055em;
  line-height: 1;
}

.intro {
  max-width: 38rem;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.18rem);
}

.hero-status {
  min-width: 14rem;
  padding: .8rem 1rem;
  display: grid;
  border-left: 3px solid var(--accent);
  background: rgba(255, 255, 255, .62);
}

.hero-status span { color: #7690a7; font-family: Consolas, monospace; font-size: .62rem; letter-spacing: .14em; }
.hero-status strong { margin-top: .25rem; font-size: .84rem; }

.access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.workspace-card {
  min-width: 0;
  padding: 1.45rem;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 14px 38px rgba(10, 67, 124, .13);
}

.card-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.card-head h2 { margin: 0; color: var(--ink); font-size: 1.55rem; letter-spacing: -.025em; }

.status-badge {
  flex: 0 0 auto;
  padding: .38rem .58rem;
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  border-radius: 99rem;
  background: #e8f3fd;
  color: var(--accent);
  font-size: .68rem;
  font-weight: 700;
}

.status-badge i { width: .38rem; height: .38rem; border-radius: 50%; background: currentColor; }
.status-badge.public { background: #e9f8f4; color: #087f70; }

.card-preview {
  height: 12.5rem;
  margin: 1.4rem 0 1.2rem;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.notes-preview {
  padding: 1rem;
  background:
    linear-gradient(90deg, transparent 28%, #dfeaf4 28%, #dfeaf4 calc(28% + 1px), transparent calc(28% + 1px)),
    #f6f9fc;
}

.preview-search {
  width: 62%;
  height: 2rem;
  padding: 0 .72rem;
  display: flex;
  align-items: center;
  gap: .48rem;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: white;
  color: #7890a6;
  font-size: .7rem;
  box-shadow: 0 4px 12px rgba(0, 61, 128, .06);
}

.preview-search span { width: .58rem; height: .58rem; border: 2px solid var(--accent); border-radius: 50%; position: relative; }
.preview-search span::after { content: ""; width: .3rem; height: 2px; position: absolute; right: -.28rem; bottom: -.12rem; background: var(--accent); transform: rotate(45deg); }
.document-lines { width: 58%; margin: 1.15rem 0 0 34%; display: grid; gap: .65rem; }
.document-lines i { height: .48rem; border-radius: 1rem; background: #d5e3ef; }
.document-lines i:nth-child(2) { width: 84%; }
.document-lines i:nth-child(3) { width: 92%; }
.document-lines i:nth-child(4) { width: 65%; background: #b8d8f1; }
.preview-index { position: absolute; left: 1rem; bottom: 1rem; color: var(--accent); font: 700 1.55rem Consolas, monospace; }
.preview-index small { display: block; margin-top: .12rem; color: #7890a6; font-size: .52rem; letter-spacing: .1em; }

.l2c-preview {
  background:
    linear-gradient(rgba(54, 118, 177, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 118, 177, .16) 1px, transparent 1px),
    var(--night);
  background-size: 26px 26px;
  border-color: #0d355d;
}

.axis { position: absolute; top: .8rem; left: .85rem; display: flex; gap: .55rem; font: 700 .65rem Consolas, monospace; }
.axis b:nth-child(1) { color: #ff6961; }
.axis b:nth-child(2) { color: #6ed69a; }
.axis b:nth-child(3) { color: #6ea9ff; }
.camera-frame { width: 4.8rem; height: 3.2rem; position: absolute; top: 44%; left: 48%; border: 1px solid #ffb54a; transform: perspective(100px) rotateY(-18deg) rotateZ(-4deg); box-shadow: 0 0 18px rgba(255, 181, 74, .12); }
.camera-frame::before, .camera-frame::after { content: ""; position: absolute; left: -2.5rem; top: 50%; width: 2.5rem; height: 1px; background: #ffb54a; transform-origin: right; transform: rotate(26deg); }
.camera-frame::after { transform: rotate(-26deg); }
.lidar-cloud { position: absolute; inset: 28% 8% 18%; transform: skewX(-13deg); }
.lidar-cloud i { width: .22rem; height: .22rem; position: absolute; border-radius: 50%; background: #77c8f3; box-shadow: 18px 8px #77c8f3, 35px -6px #4f99cc, 62px 14px #77c8f3, 88px -2px #4f99cc, 112px 18px #77c8f3, 140px 4px #4f99cc, 168px 22px #77c8f3, 205px 8px #4f99cc, 236px 18px #77c8f3, 270px 0 #4f99cc, 304px 26px #77c8f3; }
.lidar-cloud i:nth-child(2) { top: 24%; left: 8%; }
.lidar-cloud i:nth-child(3) { top: 48%; left: 2%; }
.lidar-cloud i:nth-child(4) { top: 70%; left: 12%; }
.lidar-cloud i:nth-child(5) { top: 90%; left: 5%; }
.preview-caption { position: absolute; right: .85rem; bottom: .7rem; color: #b9d9f2; font: 600 .58rem Consolas, monospace; letter-spacing: .09em; }

.card-description { min-height: 3.3rem; margin: 0 0 1.25rem; color: var(--muted); line-height: 1.7; }

.button {
  min-height: 2.8rem;
  padding: .72rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--accent);
  border-radius: 5px;
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.button:hover, .button:focus-visible { transform: translateY(-2px); outline: 2px solid rgba(0, 86, 184, .18); outline-offset: 2px; }
.primary-button { color: white; background: var(--accent); box-shadow: 0 7px 16px rgba(0, 86, 184, .22); }
.primary-button:hover { background: #004c9f; }
.secondary-button:hover { background: #edf6ff; box-shadow: 0 7px 16px rgba(0, 86, 184, .1); }

footer { padding: 1.2rem; color: #8196a9; text-align: center; font: 600 .62rem Consolas, monospace; letter-spacing: .08em; }
footer span { color: var(--accent); }

@media (max-width: 780px) {
  .topbar { min-height: 4.5rem; }
  .system-state { display: none; }
  .workspace { padding-top: 2.6rem; }
  .hero { align-items: start; flex-direction: column; }
  .hero-status { display: none; }
  .access-grid { grid-template-columns: 1fr; }
  .card-preview { height: 11rem; }
}

@media (max-width: 430px) {
  .workspace { width: min(100% - 1.2rem, 76rem); }
  .workspace-card { padding: 1.05rem; }
  .card-head { align-items: start; }
  .status-badge { padding: .32rem .45rem; font-size: .62rem; }
  .brand-copy small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}