/* ==========================================================================
   云宇科技 · 运维控制台设计系统 (Operations Console Design System)
   共享样式：首页 index.html 与 在线购买 purchase.html
   ========================================================================== */

:root {
    /* 蓝图墨色 (engineering navy) */
    --ink-900: #07151f;
    --ink-800: #0b2030;
    --ink-700: #102c42;
    --ink-600: #1b4163;
    --ink-500: #2c577e;

    /* 信号绿 (operational / online) — 功能与主行动色 */
    --signal: #12c98a;
    --signal-bright: #34e0a1;
    --signal-deep: #0a9d6b;

    /* 仪表琥珀 (instrument amber) — 第二强调色 */
    --amber: #f6a82c;
    --amber-bright: #ffc15e;

    /* 蓝图纸 (cool paper) 与文字 */
    --paper: #e9eef1;
    --paper-2: #eff3f5;
    --line: #d4dde2;
    --line-soft: #e2e9ec;
    --ink-text: #0d2233;
    --mist: #5b6b78;
    --mist-2: #8595a0;

    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --display: 'Space Grotesk', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --sans: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--sans);
    color: var(--ink-text);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: var(--signal); color: #04140d; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   排版工具
   -------------------------------------------------------------------------- */
.font-display { font-family: var(--display); }
.font-mono { font-family: var(--mono); }

/* 日志行式眼标 (the signature "log-line" eyebrow) */
.eyebrow {
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--signal-deep);
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 500;
}
.eyebrow::before { content: "›_"; color: var(--amber); font-weight: 700; }
.eyebrow.on-dark { color: var(--signal-bright); }
.eyebrow.on-dark::before { color: var(--amber-bright); }

/* --------------------------------------------------------------------------
   蓝图网格底纹 (blueprint grid)
   -------------------------------------------------------------------------- */
.bp {
    background-image:
        linear-gradient(rgba(120, 165, 200, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 165, 200, .07) 1px, transparent 1px);
    background-size: 42px 42px;
}
.bp-light {
    background-image:
        linear-gradient(rgba(27, 65, 99, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27, 65, 99, .045) 1px, transparent 1px);
    background-size: 42px 42px;
}

/* --------------------------------------------------------------------------
   按钮
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-weight: 600; font-size: .92rem; line-height: 1; cursor: pointer;
    border-radius: 13px; padding: .95rem 1.5rem; border: 1px solid transparent;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
    white-space: nowrap;
}
.btn-signal {
    background: var(--signal); color: #04140d;
    box-shadow: 0 14px 34px -14px rgba(18, 201, 138, .65);
}
.btn-signal:hover { background: var(--signal-bright); transform: translateY(-2px); }
.btn-ink { background: var(--ink-800); color: #fff; border-color: var(--ink-600); }
.btn-ink:hover { background: var(--ink-700); transform: translateY(-2px); }
.btn-ghost { background: rgba(255, 255, 255, .04); color: #d8e4ec; border-color: rgba(255, 255, 255, .14); }
.btn-ghost:hover { background: rgba(255, 255, 255, .09); }
.btn-light { background: #fff; color: var(--ink-900); border-color: var(--line); }
.btn-light:hover { border-color: #b6c4cc; box-shadow: 0 10px 26px -18px rgba(8, 21, 31, .45); transform: translateY(-2px); }
.btn-block { width: 100%; }

/* --------------------------------------------------------------------------
   卡片 / 面板
   -------------------------------------------------------------------------- */
.card {
    background: #fff; border: 1px solid var(--line-soft); border-radius: 20px;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.card-hover:hover {
    border-color: #c4d2d9;
    box-shadow: 0 24px 50px -34px rgba(11, 32, 48, .35);
    transform: translateY(-4px);
}
.panel-dark {
    background: linear-gradient(160deg, var(--ink-800), var(--ink-900));
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 22px;
}

/* 标签 / 状态码 */
.tag {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
    padding: .3rem .6rem; border-radius: 7px; font-weight: 500;
}
.tag-signal { background: rgba(18, 201, 138, .12); color: var(--signal-deep); }
.tag-amber { background: rgba(246, 168, 44, .14); color: #b9791a; }
.tag-ink { background: rgba(27, 65, 99, .1); color: var(--ink-600); }

/* 细线分隔 */
.hairline { height: 1px; background: var(--line-soft); border: 0; }
.hairline-dark { height: 1px; background: rgba(255, 255, 255, .08); border: 0; }

/* --------------------------------------------------------------------------
   实时状态点 (live status dot)
   -------------------------------------------------------------------------- */
.dot {
    width: 9px; height: 9px; border-radius: 99px; background: var(--signal);
    position: relative; display: inline-block; flex: none;
}
.dot::after {
    content: ""; position: absolute; inset: -3px; border-radius: 99px;
    border: 1.5px solid var(--signal); animation: ping 2.1s ease-out infinite;
}
.dot-amber { background: var(--amber); }
.dot-amber::after { border-color: var(--amber); }
@keyframes ping {
    0% { transform: scale(.65); opacity: .8; }
    100% { transform: scale(2); opacity: 0; }
}

/* --------------------------------------------------------------------------
   控制台仪表 (gauge ring + latency sparkline)
   -------------------------------------------------------------------------- */
.gauge-ring {
    stroke-dasharray: 264; stroke-dashoffset: 264;
    animation: gauge 2.1s cubic-bezier(.22, 1, .36, 1) .3s forwards;
}
@keyframes gauge { to { stroke-dashoffset: 9; } }

.spark {
    stroke-dasharray: 600; stroke-dashoffset: 600;
    animation: spark 2.6s ease .45s forwards;
}
@keyframes spark { to { stroke-dashoffset: 0; } }

/* --------------------------------------------------------------------------
   载入升起 (subtle on-load reveal)
   -------------------------------------------------------------------------- */
.rise { opacity: 0; transform: translateY(18px); animation: rise .85s cubic-bezier(.22, 1, .36, 1) forwards; }
.rise-1 { animation-delay: .06s; }
.rise-2 { animation-delay: .16s; }
.rise-3 { animation-delay: .26s; }
.rise-4 { animation-delay: .36s; }
.rise-5 { animation-delay: .46s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   表单
   -------------------------------------------------------------------------- */
.input {
    width: 100%; background: #fff; border: 1px solid var(--line);
    border-radius: 12px; padding: .85rem 1rem; font-size: .92rem;
    color: var(--ink-text); transition: border-color .2s ease, box-shadow .2s ease;
    font-family: var(--sans);
}
.input::placeholder { color: var(--mist-2); }
.input:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(18, 201, 138, .16); }

.input-dark {
    width: 100%; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px; padding: .85rem 1rem; font-size: .92rem; color: #fff;
    transition: border-color .2s ease, box-shadow .2s ease; font-family: var(--sans);
}
.input-dark::placeholder { color: rgba(255, 255, 255, .4); }
.input-dark:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(18, 201, 138, .2); }

.field-label {
    display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--mist); font-weight: 600; margin-bottom: .55rem;
}

/* 控制台条纹滚动 (telemetry ticker) — gap:0 keeps the -50% loop seamless */
.ticker-track { display: inline-flex; gap: 0; white-space: nowrap; animation: ticker 26s linear infinite; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* 选择态卡片 (selectable order cards) */
.pick {
    cursor: pointer; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.pick[data-on="true"] {
    border-color: var(--signal);
    box-shadow: 0 0 0 1px var(--signal), 0 18px 40px -28px rgba(18, 201, 138, .55);
}

/* 滚动条细节 (dark scroll areas) */
.thin-scroll::-webkit-scrollbar { width: 6px; }
.thin-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 99px; }

/* --------------------------------------------------------------------------
   降低动态 (respect reduced motion)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .rise { opacity: 1; transform: none; }
    .gauge-ring { stroke-dashoffset: 9; }
    .spark { stroke-dashoffset: 0; }
    .dot::after { display: none; }
}