* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: "SF Mono", "Cascadia Code", Consolas, "Courier New", monospace;
  background: #020403;
  color: #c8d6e5;
  min-height: 100vh;
  overflow-x: hidden;
}
#matrix {
  position: fixed; inset:0; z-index:-1; pointer-events:none;
  opacity: .30;
}
.bg-glow {
  position: fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(600px 300px at 20% 10%, rgba(0,255,170,.10), transparent 60%),
    radial-gradient(500px 300px at 80% 30%, rgba(0,120,255,.10), transparent 60%),
    radial-gradient(700px 400px at 50% 90%, rgba(180,0,255,.08), transparent 60%);
}
.container, .disclaimer, .hero, .card, footer, .tabs { position: relative; }
/* ===== Matrix 风格（克制版） ===== */
h1 {
  color: #00ff41;
  text-shadow: 0 0 12px rgba(0,255,65,.45);
}
h2 {
  color: #00e676;
  text-shadow: none;
}
.sub { color: #9de8b2; }
.logo {
  color: #00ff41 !important;
  text-shadow: 0 0 18px rgba(0,255,65,.55) !important;
}
.tool-table td:first-child { color: #7ae8a2; }
.tool-item:hover { color: #00ff41 !important; }

.container { max-width: 960px; margin: 0 auto; padding: 24px 16px 60px; }
.hero { text-align:center; padding: 36px 0 20px; }
.logo { font-size: 56px; color: #00ffaa; text-shadow: 0 0 24px rgba(0,255,170,.6); }
h1 { font-size: 34px; letter-spacing: 6px; color:#eaf6ff; margin: 8px 0 4px; }
.sub { color:#6b7f94; font-size: 13px; letter-spacing: 2px; margin-bottom: 12px; }
.badges { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.badge { border:1px solid #173a2e; color:#00cc88; padding:2px 10px; border-radius: 20px; font-size: 12px; background: rgba(0,255,170,.05); }
.disclaimer {
  border:1px solid #5a3310; background: rgba(255,150,0,.07); color:#ffb45e;
  padding: 12px 16px; border-radius: 10px; font-size: 13px; margin: 18px 0; line-height:1.7;
}
.quick-nav { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin: 16px 0; }
.btn {
  display:inline-block; border:1px solid #00ffaa; color:#00ffaa; background: rgba(0,255,170,.06);
  padding: 8px 16px; border-radius: 8px; cursor:pointer; font-size: 14px; text-decoration:none;
  transition: .15s; font-family: inherit;
}
.btn:hover { background: rgba(0,255,170,.18); box-shadow: 0 0 14px rgba(0,255,170,.25); }
.btn.ghost { border-color:#334; color:#8899aa; background:transparent; }
.card {
  border:1px solid #12202f; background: rgba(13,20,32,.8); border-radius: 12px;
  padding: 18px 20px; margin: 18px 0;
}
.card h2 { color:#00ffaa; font-size: 18px; margin-bottom: 12px; letter-spacing:1px; }
.tool-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.tool-item {
  display:block; border:1px solid #1a2f45; padding: 12px 14px; border-radius: 8px;
  color:#c8d6e5; text-decoration:none; font-size: 14px; transition:.15s;
}
.tool-item:hover { border-color:#00ffaa; color:#00ffaa; background: rgba(0,255,170,.05); }
.tool-table { width:100%; border-collapse: collapse; font-size: 14px; }
.tool-table th { text-align:left; color:#00cc88; padding: 8px 10px; border-bottom:1px solid #173a2e; }
.tool-table td { padding: 8px 10px; border-bottom:1px solid #101a28; }
.tool-table tr:hover td { background: rgba(0,255,170,.03); }
.tool-table a { color:#4da3ff; text-decoration:none; }
.tool-table a:hover { text-decoration: underline; }
footer { text-align:center; color:#44556a; font-size:12px; margin-top: 30px; }

/* tools page */
.tabs { display:flex; gap:6px; flex-wrap:wrap; margin: 16px 0; }
.tab {
  border:1px solid #1a2f45; background: transparent; color:#8899aa; padding: 8px 14px;
  border-radius: 8px; cursor:pointer; font-size:14px; font-family:inherit;
}
.tab.active { border-color:#00ffaa; color:#00ffaa; background: rgba(0,255,170,.08); }
.panel { display:none; }
.panel.active { display:block; }
.panel h2 { color:#00ffaa; margin-bottom:12px; font-size:18px; }
textarea, input[type=text], input[type=number] {
  width:100%; background:#0a101c; border:1px solid #1a2f45; color:#eaf6ff;
  padding: 12px; border-radius: 8px; font-size: 14px; font-family: inherit; margin: 6px 0;
  min-height: 70px; outline:none;
}
textarea:focus, input:focus { border-color:#00ffaa; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin: 8px 0; }
.row label { color:#8899aa; font-size:13px; display:flex; align-items:center; gap:6px; }
.row input[type=number], .row input[type=text] { width:80px; min-height:36px; margin:0; }
.row input[type=checkbox] { width:auto; }
.output-box {
  background:#0a101c; border:1px solid #1a2f45; border-radius:8px; padding: 14px;
  font-size: 14px; white-space: pre-wrap; word-break: break-all; margin-top:10px;
  min-height: 50px; color:#eaf6ff;
}
#qr_out { margin-top: 12px; text-align:center; }
#qr_out img { background:#fff; padding:10px; border-radius:8px; }