/* 密码保险箱云端 · 共享样式（EDIY v3.1.2 令牌体系 · 三态主题）。署名：WorkBuddy
   说明：整段复用 EDIY 111 令牌，子站零重定义；无私有令牌、无第 5 色、组件内零十六进制。 */
:root{
  --c1:#2563EB; --c1-ink:#1D4ED8; --c1-weak:#EAF1FE; --c1-soft:#D9E6FD; --c1-line:#A6C8FA;
  --c2:#0E8FB8; --c2-ink:#0B7492; --c2-weak:#E3F4FA; --c2-soft:#CFECF6; --c2-line:#8ACFE4;
  --c3:#067A55; --c3-ink:#046B4A; --c3-weak:#E4F5EE; --c3-soft:#CBEBDE; --c3-line:#93D2B8;
  --c4:#D02F44; --c4-ink:#B02338; --c4-weak:#FCEAEC; --c4-soft:#F8D7DC; --c4-line:#EDAFB8;
  --cn-1:#F1F4F9; --cn-2:#E4E9F1; --cn-3:#C6D0DE; --cn-4:#66768C; --cn-5:#5F7085; --cn-6:#54657C; --cn-7:#33445C;
  --bg:var(--cn-1); --bg-2:var(--cn-2); --surface:#FFFFFF; --surface-2:var(--cn-1); --surface-3:#E8EDF5; --band:#FFFFFF; --band-line:var(--line);
  --text:var(--cn-7); --text-2:var(--cn-6); --sub:var(--cn-5); --sub-2:var(--cn-4); --sub-3:#54657C; --on-accent:#FFFFFF;
  --line:#BFC9D9; --line-2:#C9D3E2; --line-3:#B4C0D2; --edge:transparent; --sh-1:0 1px 2px rgba(15,27,45,.06); --sh-2:0 8px 24px rgba(15,27,45,.08); --sh-3:0 18px 46px rgba(15,27,45,.14);
  --grad:linear-gradient(135deg,var(--c1),var(--c2-ink));
  --grad-deep:linear-gradient(150deg,#0A1730 0%,#0F2A4D 52%,#0B3E57 100%);
  --grad-cta:linear-gradient(150deg,#0E2255 0%,#1A42B8 52%,#1D4ED8 100%);
  --acc-grad:linear-gradient(100deg,#2563EB 0%,#3B82F6 42%,#0E8FB8 100%);
  --acc-soft:linear-gradient(90deg,rgba(37,99,235,.15) 0%,rgba(14,143,184,.07) 52%,rgba(14,143,184,0) 100%);
  --acc-line:rgba(37,99,235,.20);
  --glow-1:rgba(37,99,235,.085); --glow-2:rgba(14,143,184,.070); --glow-3:rgba(6,122,85,.055);
  --hero-btn-bg:#2563EB; --hero-btn-fg:#FFFFFF; --hero-btn-bg-h:#1D4ED8;
  --deep-card:rgba(255,255,255,.045); --deep-card-2:rgba(255,255,255,.06); --deep-card-3:rgba(255,255,255,.14);
  --deep-line:rgba(148,187,233,.24); --deep-line-soft:rgba(148,187,233,.14); --deep-line-strong:rgba(148,187,233,.34);
  --deep-hd:#FFFFFF; --deep-tx:#A9C0D6; --deep-tx-2:#DCE9F5; --deep-accent:#8FD9F0;
  --deep-tag-c1-bg:rgba(91,155,255,.14); --deep-tag-c1-fg:#9AC8FF; --deep-tag-c1-line:rgba(91,155,255,.34);
  --deep-tag-c2-bg:rgba(63,201,232,.14); --deep-tag-c2-fg:#79DBEF; --deep-tag-c2-line:rgba(63,201,232,.34);
  --deep-tag-c3-bg:rgba(63,214,155,.14); --deep-tag-c3-fg:#7BE6BD; --deep-tag-c3-line:rgba(63,214,155,.34);
  --deep-tag-c4-bg:rgba(251,126,140,.14); --deep-tag-c4-fg:#FFA6AF; --deep-tag-c4-line:rgba(251,126,140,.34);
  --r-s:6px; --r-m:10px; --r-l:14px; --r-xl:20px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --ctl-xs:22px; --ctl-sm:26px; --ctl-md:32px; --ctl-lg:36px; --ctl-xl:46px;
}
html[data-theme="dark"]{
  --c1:#5B9BFF; --c1-ink:#8FC0FF; --c1-weak:#132B47; --c1-soft:#16243D; --c1-line:#3A629B;
  --c2:#3FC9E8; --c2-ink:#79DBEF; --c2-weak:#0E2A35; --c2-soft:#123543; --c2-line:#256F84;
  --c3:#3FD69B; --c3-ink:#7BE6BD; --c3-weak:#0E2A22; --c3-soft:#123429; --c3-line:#1F6B4E;
  --c4:#FB7E8C; --c4-ink:#FFA6AF; --c4-weak:#2C1418; --c4-soft:#341A1F; --c4-line:#943F4C;
  --cn-1:#16202F; --cn-2:#1B2740; --cn-3:#33455E; --cn-4:#44587A; --cn-5:#8FA1B8; --cn-6:#A9B8CC; --cn-7:#D6E0EE;
  --bg:#0B1220; --bg-2:#101A2B; --surface:#16202F; --surface-2:#1B2740; --surface-3:#0E1726; --band:#0E1727; --band-line:#35485F;
  --text:#E9F0F9; --text-2:#C8D5E6; --sub:#8FA1B8; --sub-2:#7A8CA4; --sub-3:#B3C2D6; --on-accent:#08111F;
  --line:#33455E; --line-2:#31455C; --line-3:#3A4D66; --edge:rgba(255,255,255,.10); --sh-1:0 1px 2px rgba(0,0,0,.35); --sh-2:0 8px 24px rgba(0,0,0,.42); --sh-3:0 18px 46px rgba(0,0,0,.55);
  --grad:linear-gradient(135deg,var(--c1),var(--c2));
  --grad-deep:linear-gradient(150deg,#060A12 0%,#0A1728 55%,#0A2230 100%);
  --grad-cta:linear-gradient(150deg,#12275E 0%,#1C3C90 52%,#25509E 100%);
  --acc-grad:linear-gradient(100deg,#5B9BFF 0%,#8FC0FF 42%,#3FC9E8 100%);
  --acc-soft:linear-gradient(90deg,rgba(91,155,255,.22) 0%,rgba(63,201,232,.10) 52%,rgba(63,201,232,0) 100%);
  --acc-line:rgba(91,155,255,.28);
  --glow-1:rgba(91,155,255,.130); --glow-2:rgba(63,201,232,.100); --glow-3:rgba(63,214,155,.070);
  --hero-btn-bg:#5B9BFF; --hero-btn-fg:#0A1524; --hero-btn-bg-h:#8FC0FF;
}
@media (prefers-color-scheme:dark){
  html[data-theme="auto"]{
    --c1:#5B9BFF; --c1-ink:#8FC0FF; --c1-weak:#132B47; --c1-soft:#16243D; --c1-line:#3A629B;
    --c2:#3FC9E8; --c2-ink:#79DBEF; --c2-weak:#0E2A35; --c2-soft:#123543; --c2-line:#256F84;
    --c3:#3FD69B; --c3-ink:#7BE6BD; --c3-weak:#0E2A22; --c3-soft:#123429; --c3-line:#1F6B4E;
    --c4:#FB7E8C; --c4-ink:#FFA6AF; --c4-weak:#2C1418; --c4-soft:#341A1F; --c4-line:#943F4C;
    --cn-1:#16202F; --cn-2:#1B2740; --cn-3:#33455E; --cn-4:#44587A; --cn-5:#8FA1B8; --cn-6:#A9B8CC; --cn-7:#D6E0EE;
    --bg:#0B1220; --bg-2:#101A2B; --surface:#16202F; --surface-2:#1B2740; --surface-3:#0E1726; --band:#0E1727; --band-line:#35485F;
    --text:#E9F0F9; --text-2:#C8D5E6; --sub:#8FA1B8; --sub-2:#7A8CA4; --sub-3:#B3C2D6; --on-accent:#08111F;
    --line:#33455E; --line-2:#31455C; --line-3:#3A4D66; --edge:rgba(255,255,255,.10); --sh-1:0 1px 2px rgba(0,0,0,.35); --sh-2:0 8px 24px rgba(0,0,0,.42); --sh-3:0 18px 46px rgba(0,0,0,.55);
    --grad:linear-gradient(135deg,var(--c1),var(--c2));
    --grad-deep:linear-gradient(150deg,#060A12 0%,#0A1728 55%,#0A2230 100%);
    --grad-cta:linear-gradient(150deg,#12275E 0%,#1C3C90 52%,#25509E 100%);
    --acc-grad:linear-gradient(100deg,#5B9BFF 0%,#8FC0FF 42%,#3FC9E8 100%);
    --acc-soft:linear-gradient(90deg,rgba(91,155,255,.22) 0%,rgba(63,201,232,.10) 52%,rgba(63,201,232,0) 100%);
    --acc-line:rgba(91,155,255,.28);
    --glow-1:rgba(91,155,255,.130); --glow-2:rgba(63,201,232,.100); --glow-3:rgba(63,214,155,.070);
    --hero-btn-bg:#5B9BFF; --hero-btn-fg:#0A1524; --hero-btn-bg-h:#8FC0FF;
  }
}

/* ===== 页面骨架 ===== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background .2s, color .2s;
}
a { color: var(--c1); text-decoration: none; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
header.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 0; position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); z-index: 10;
}
.brand { font-weight: 800; font-size: 18px; letter-spacing: .3px; }
.brand .dot { color: var(--c1); }
.nav-links { display: flex; align-items: center; gap: 18px; }
.nav-links a { color: var(--sub); font-size: 14px; }
.nav-links a:hover { color: var(--text); }
.theme-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.theme-switch button {
  border: 0; background: transparent; color: var(--sub); padding: 6px 12px; cursor: pointer; font-size: 13px;
}
.theme-switch button.active { background: var(--c1); color: var(--on-accent); }
.hero { padding: 72px 0 40px; text-align: center; }
.hero h1 { font-size: 44px; line-height: 1.15; margin: 0 0 14px; }
.hero .grad { background: var(--acc-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: var(--sub); font-size: 18px; max-width: 720px; margin: 0 auto 26px; }
.btn {
  display: inline-block; padding: 12px 22px; border-radius: var(--r-l); font-weight: 600; cursor: pointer; border: 1px solid transparent;
  font-size: 15px; transition: transform .08s, box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--acc-grad); color: var(--on-accent); box-shadow: var(--sh-2); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--line); }
.btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
section.block { padding: 48px 0; }
h2.title { font-size: 28px; text-align: center; margin: 0 0 8px; }
.sub { text-align: center; color: var(--sub); margin: 0 0 28px; }
.grid { display: grid; gap: 18px; }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px; box-shadow: var(--sh-2); }
.card h3 { margin: 6px 0 8px; font-size: 17px; }
.card p { color: var(--sub); font-size: 14px; margin: 0; }
.card .ic { font-size: 22px; }
.price { text-align: center; }
.price .amt { font-size: 34px; font-weight: 800; }
.price .per { color: var(--sub); font-size: 13px; }
.tag { display: inline-block; font-size: 12px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--c1-weak); color: var(--c1-ink); border: 1px solid var(--c1-line); margin-bottom: 8px; }
footer { border-top: 1px solid var(--line); padding: 28px 0; color: var(--sub); font-size: 13px; text-align: center; }
.dl { display: flex; flex-direction: column; gap: 10px; }
.dl a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); color: var(--text); }
.dl a:hover { border-color: var(--c1); }
.dl .k { font-weight: 700; }
.dl .v { color: var(--sub); font-size: 13px; margin-left: auto; }
@media (max-width: 860px) { .grid.c3, .grid.c2 { grid-template-columns: 1fr; } .hero h1 { font-size: 32px; } }

/* ===== 运维面板 / Demo 通用组件（EDIY 令牌） ===== */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 20px; box-shadow: var(--sh-2); margin-bottom: 18px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
label { font-size: 13px; color: var(--sub); display: block; margin-bottom: 4px; }
input, select, textarea { background: var(--surface); border: 1px solid var(--line); color: var(--text); border-radius: var(--r-m); padding: 9px 12px; font-size: 14px; min-width: 160px; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { color: var(--sub); font-weight: 600; font-size: 13px; }
.mini { padding: 6px 12px; font-size: 13px; border-radius: var(--r-s); }
.badge { font-size: 12px; padding: 2px 8px; border-radius: var(--r-pill); }
.b-ok { background: var(--c3-weak); color: var(--c3-ink); border: 1px solid var(--c3-line); }
.b-bad { background: var(--c4-weak); color: var(--c4-ink); border: 1px solid var(--c4-line); }
.msg { font-size: 13px; margin-top: 8px; }
.msg.ok { color: var(--c3-ink); } .msg.bad { color: var(--c4-ink); }
code.k { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--surface); padding: 2px 6px; border-radius: var(--r-s); }
.hidden { display: none; }
.note { font-size: 13px; color: var(--sub); background: var(--c1-weak); border: 1px solid var(--c1-line); border-radius: var(--r-l); padding: 12px 14px; }
.pill { font-size: 12px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--c1-weak); color: var(--c1-ink); border: 1px solid var(--c1-line); }
.entry { border: 1px solid var(--line); border-radius: var(--r-l); padding: 12px 14px; margin: 10px 0; }
.entry .t { font-weight: 700; }
.entry .meta { font-size: 13px; color: var(--sub); word-break: break-all; }