:root{--bg:#080718;--card:rgba(30,24,66,.66);--fg:#ece8ff;--dim:#a89fd8;--accent:#b388ff;--accent2:#7cf5ff;--line:rgba(150,120,255,.28)}
*{box-sizing:border-box}
body{margin:0;color:var(--fg);background:
radial-gradient(circle at 15% 10%,rgba(120,80,255,.30) 0,transparent 42%),
radial-gradient(circle at 85% 6%,rgba(0,220,255,.20) 0,transparent 40%),
radial-gradient(circle at 50% 92%,rgba(255,110,220,.18) 0,transparent 46%),
radial-gradient(1.4px 1.4px at 12% 22%,#fff 50%,transparent 51%),
radial-gradient(1.2px 1.2px at 32% 42%,#dfe 50%,transparent 51%),
radial-gradient(1.6px 1.6px at 68% 18%,#fff 50%,transparent 51%),
radial-gradient(1.2px 1.2px at 82% 52%,#cfe 50%,transparent 51%),
radial-gradient(1.3px 1.3px at 46% 74%,#fff 50%,transparent 51%),
radial-gradient(1.1px 1.1px at 24% 86%,#eef 50%,transparent 51%),var(--bg);
background-attachment:fixed;
font:16.5px/1.85 "Songti SC","Segoe UI","Microsoft YaHei",sans-serif}
a{color:#9fd8ff;text-decoration:none;text-shadow:0 0 10px rgba(120,200,255,.45)}a:hover{color:#d8f4ff}
header{padding:26px 24px;display:flex;gap:24px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--line);
background:linear-gradient(180deg,rgba(24,16,56,.75),transparent);backdrop-filter:blur(6px)}
header .brand{font-weight:700;font-size:20px;letter-spacing:.2em;color:#d9ccff;text-shadow:0 0 18px rgba(179,136,255,.7)}
header nav{display:flex;gap:20px;font-size:14.5px}
header nav a{color:var(--dim);text-shadow:none}header nav a.on{color:#e8dcff;text-shadow:0 0 14px rgba(179,136,255,.8)}
main{max-width:900px;margin:0 auto;padding:44px 24px 100px}
h1{font-size:36px;letter-spacing:.04em;margin:.3em 0 .7em;color:#f2ecff;
text-shadow:0 0 22px rgba(179,136,255,.55),0 0 60px rgba(124,245,255,.25)}
h2{font-size:22px;letter-spacing:.1em;margin:2.3em 0 .8em;color:#cbb8ff;text-shadow:0 0 16px rgba(179,136,255,.4)}
h2::before{content:"✧ ";color:#7cf5ff}h2::after{content:" ✧";color:#7cf5ff}
p,li{color:#cfc7ee}
.dim{color:var(--dim)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:20px;margin-top:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;backdrop-filter:blur(10px);
box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 12px 40px rgba(90,50,220,.28)}
.card:hover{box-shadow:0 0 0 1px rgba(255,255,255,.07) inset,0 16px 52px rgba(140,90,255,.42)}
.card h3{margin:.1em 0 .55em;font-size:18px;color:#e9e0ff;text-shadow:0 0 12px rgba(179,136,255,.45)}
.card p{font-size:14px;color:var(--dim);margin:.45em 0 0}
.tag{display:inline-block;font-size:12px;color:#8ef7ff;border:1px solid rgba(124,245,255,.4);border-radius:999px;padding:1px 10px;margin-right:6px;
background:rgba(124,245,255,.07)}
footer{border-top:1px solid var(--line);padding:26px;color:var(--dim);font-size:13px;text-align:center;letter-spacing:.08em}
textarea,input,select{width:100%;background:rgba(12,10,32,.8);color:var(--fg);border:1px solid var(--line);border-radius:14px;padding:11px 13px;
font:15px/1.6 ui-monospace,Consolas,monospace}
textarea:focus,input:focus{outline:none;border-color:#b388ff;box-shadow:0 0 0 3px rgba(179,136,255,.22)}
button{background:linear-gradient(180deg,#8f5bff,#6a35e0);color:#fff;border:0;border-radius:999px;padding:11px 20px;font-weight:700;cursor:pointer;
box-shadow:0 0 22px rgba(140,80,255,.55)}
button.ghost{background:transparent;color:#d9ccff;border:1px solid var(--line);box-shadow:none}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
pre{background:rgba(10,8,28,.85);border:1px solid var(--line);border-radius:14px;padding:13px;overflow:auto;font-size:13.5px;color:#d7cfff}
.ok{color:#7cf5c8}.bad{color:#ff9ab5}.warn{color:#ffd98a}