/* ============ 设计令牌 ============ */
:root {
    --bg: #060b13;
    --bg-2: #08111d;
    --panel: #0c1625;
    --panel-2: #101d30;
    --panel-3: #14243b;
    --line: rgba(122, 162, 214, .14);
    --line-strong: rgba(122, 162, 214, .28);
    --text: #e3edfa;
    --text-2: #b9c9dd;
    --muted: #7f92ab;
    --dim: #5b6c84;
    --cyan: #3fe4cf;
    --cyan-deep: #1bb9ad;
    --blue: #5b93ff;
    --amber: #f0b45c;
    --red: #ff7373;
    --green: #45d492;
    --violet: #a78bfa;
    --radius: 14px;
    --radius-sm: 9px;
    --shadow: 0 24px 60px rgba(0, 0, 0, .45);
    --font: "Inter", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    --mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
svg { display: block; }

::selection { background: rgba(63, 228, 207, .28); color: #fff; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(110, 148, 199, .22);
    border-radius: 20px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(110, 148, 199, .38); background-clip: content-box; }

/* ============ 蓝图底纹 ============ */
.bg-blueprint {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(900px 520px at 12% -8%, rgba(46, 120, 255, .16), transparent 62%),
        radial-gradient(760px 480px at 96% 2%, rgba(46, 224, 207, .09), transparent 60%),
        linear-gradient(rgba(96, 146, 214, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(96, 146, 214, .045) 1px, transparent 1px),
        linear-gradient(rgba(96, 146, 214, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(96, 146, 214, .03) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px, 200px 200px, 200px 200px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .45) 60%, rgba(0, 0, 0, .2));
}

/* ============ 通用 ============ */
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-xs { width: 14px; height: 14px; }
.ic-sm { width: 16px; height: 16px; }
.ic-lg { width: 22px; height: 22px; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.text-cyan { color: var(--cyan); }
.text-amber { color: var(--amber); }
.text-red { color: var(--red); }
.text-green { color: var(--green); }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }

@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideIn {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes pop {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(63, 228, 207, .5); }
    70% { box-shadow: 0 0 0 7px rgba(63, 228, 207, 0); }
}
@keyframes shimmer {
    from { background-position: -240px 0; }
    to { background-position: 240px 0; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}