* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background: #0f1115; color: #e6e8eb; }
.hidden { display: none !important; }
.sub { color: #8b9099; margin: 4px 0 18px; }
.login-box { max-width: 320px; margin: 12vh auto; background: #181b21; padding: 28px; border-radius: 14px; border: 1px solid #262b33; }
.login-box h1 { font-size: 18px; margin: 0; }
.login-box input { display: block; width: 100%; margin: 10px 0; padding: 11px; border-radius: 9px; border: 1px solid #2c323c; background: #0f1115; color: #e6e8eb; }
.login-box button { width: 100%; padding: 11px; border: 0; border-radius: 9px; background: #2f6bff; color: #fff; font-weight: 600; cursor: pointer; }
.err { color: #ff6b6b; min-height: 16px; font-size: 13px; }

header { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: #181b21; border-bottom: 1px solid #262b33; }
header strong { font-size: 15px; }
header #who { color: #8b9099; font-size: 13px; flex: 1; }
.ghost { background: transparent; border: 1px solid #2c323c; color: #c9ced6; padding: 7px 14px; border-radius: 8px; cursor: pointer; }

nav { display: flex; gap: 6px; padding: 10px 18px 0; background: #181b21; border-bottom: 1px solid #262b33; flex-wrap: wrap; }
.tab { background: transparent; border: 0; border-bottom: 2px solid transparent; color: #9aa0aa; padding: 9px 12px; cursor: pointer; font-size: 14px; }
.tab.active { color: #fff; border-bottom-color: #2f6bff; }

main { padding: 18px; max-width: 1100px; margin: 0 auto; }
.pane { display: none; } .pane.active { display: block; }
.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.toolbar input { padding: 8px; border-radius: 8px; border: 1px solid #2c323c; background: #0f1115; color: #e6e8eb; }
.toolbar button { padding: 8px 14px; border: 0; border-radius: 8px; background: #2f6bff; color: #fff; cursor: pointer; }
.toolbar button.active { background: #1f4fd6; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid #232830; }
th { color: #8b9099; font-weight: 500; }
.cards { display: flex; gap: 14px; flex-wrap: wrap; }
.card { background: #181b21; border: 1px solid #262b33; border-radius: 12px; padding: 18px 22px; min-width: 150px; }
.card .n { font-size: 24px; font-weight: 700; }
.card .l { color: #8b9099; margin-top: 4px; font-size: 13px; }
.ckresult { white-space: pre-wrap; background: #0f1115; border: 1px solid #262b33; border-radius: 8px; padding: 10px; margin-bottom: 12px; font-family: monospace; font-size: 12px; color: #7fd1a0; max-height: 200px; overflow: auto; }
button.act { padding: 5px 10px; border: 0; border-radius: 7px; cursor: pointer; margin-right: 6px; }
button.ok { background: #1f9d57; color: #fff; }
button.no { background: #3a3f48; color: #c9ced6; }