:root {
  --bg0:#070b14; --bg1:#0b1120; --card:rgba(255,255,255,.045); --line:rgba(148,180,255,.14);
  --ink:#e8eefc; --sub:#8b9bb8; --cyan:#22d3ee; --violet:#a78bfa; --mint:#34d399; --amber:#fbbf24; --red:#fb7185;
  --grad:linear-gradient(135deg,#22d3ee 0%,#818cf8 55%,#a78bfa 100%);
}
* { box-sizing:border-box; }
body {
  margin:0; color:var(--ink); font:15px/1.7 "Segoe UI","Microsoft YaHei",sans-serif;
  background:
    radial-gradient(1200px 520px at 12% -10%, rgba(34,211,238,.15), transparent 60%),
    radial-gradient(1000px 480px at 88% -12%, rgba(167,139,250,.17), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0) 420px);
  min-height:100vh;
}
nav { display:flex; align-items:center; gap:18px; padding:18px 34px; }
nav .logo {
  font-size:19px; font-weight:800; letter-spacing:1px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-decoration:none;
}
nav .sp { flex:1; }
nav a.link { color:var(--sub); text-decoration:none; font-size:14px; }
nav a.link:hover { color:var(--ink); }
main { max-width:1020px; margin:0 auto 80px; padding:0 22px; }
.card {
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px 26px;
  backdrop-filter:blur(14px); box-shadow:0 10px 40px rgba(3,8,20,.45);
}
h2.sec { font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--cyan); margin:34px 0 14px; }
button, .btn {
  display:inline-block; padding:10px 26px; border:0; border-radius:10px; font:inherit; font-weight:600;
  cursor:pointer; background:var(--grad); color:#081018; text-decoration:none; text-align:center;
  transition:transform .15s, box-shadow .2s;
}
button:hover, .btn:hover { transform:translateY(-1px); box-shadow:0 8px 26px rgba(99,160,255,.35); }
.btn.ghost, button.ghost { background:rgba(148,180,255,.1); color:var(--ink); border:1px solid var(--line); }
button:disabled { opacity:.4; cursor:default; }
input, select {
  padding:9px 12px; border:1px solid var(--line); border-radius:9px; font:inherit;
  background:rgba(10,16,30,.6); color:var(--ink); outline:none; width:100%;
}
input:focus, select:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(34,211,238,.12); }
label { display:block; font-size:12.5px; color:var(--sub); margin:12px 0 5px; }
.muted { color:var(--sub); font-size:13px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.app-card { position:relative; transition:transform .16s, box-shadow .2s; }
.app-card:hover { transform:translateY(-3px); box-shadow:0 14px 44px rgba(34,211,238,.14); }
.app-card h3 { margin:0 0 8px; font-size:17px; }
.app-card p { margin:0 0 16px; color:var(--sub); font-size:13.5px; min-height:60px; }
.tag { display:inline-block; padding:2px 10px; border-radius:999px; font-size:11.5px; margin-right:6px; }
.tag.good { background:rgba(52,211,153,.14); color:var(--mint); border:1px solid rgba(52,211,153,.3); }
.tag.warn { background:rgba(251,191,36,.12); color:var(--amber); border:1px solid rgba(251,191,36,.3); }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th, td { text-align:left; padding:9px 10px; border-bottom:1px dashed rgba(148,180,255,.12); }
th { color:var(--sub); font-weight:600; font-size:12.5px; letter-spacing:.5px; }
.banner { padding:10px 14px; border-radius:9px; font-size:13px; margin:10px 0; }
.banner.err { background:rgba(251,113,133,.09); border:1px solid rgba(251,113,133,.3); color:#ffb4c0; }
.banner.ok { background:rgba(52,211,153,.09); border:1px solid rgba(52,211,153,.3); color:#9ff0cf; }
.bar { height:8px; border-radius:99px; background:rgba(148,180,255,.12); overflow:hidden; margin-top:8px; }
.bar > i { display:block; height:100%; background:var(--grad); border-radius:99px; }
footer { text-align:center; color:var(--sub); font-size:12.5px; padding:30px 0 40px; }
.hero { padding:56px 26px 40px; text-align:center; }
.hero h1 {
  margin:0 0 14px; font-size:40px; letter-spacing:1px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p { color:var(--sub); max-width:620px; margin:0 auto 26px; }
.contact-row { display:flex; gap:26px; flex-wrap:wrap; }
.contact-row div { font-size:14.5px; }
.contact-row b { color:var(--cyan); margin-right:8px; }