:root{--bg:#0b1020;--card:#111735;--text:#eef1ff;--muted:#9aa3c7;--brand:#5ea0ff;--accent:#34d399;}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,#0b1020, #10162e);color:var(--text);font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji"}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:24px}
.flex{display:flex;justify-content:space-between;align-items:center;gap:16px}
.grid{display:grid;gap:16px}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.site-header{position:sticky;top:0;background:rgba(10,15,35,.7);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06);z-index:50}
.logo{font-weight:800;font-size:1.25rem;color:var(--text)}
.hero{padding:48px 0 12px;margin-bottom: 20px;}
.hero h1{font-size:2.2rem;line-height:1.2;margin:.2em 0}
.hero p{color:var(--muted);max-width:70ch}
.card{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card h3{margin:.2em 0 .4em}
.badge{display:inline-block;background:rgba(94,160,255,.15);border:1px solid rgba(94,160,255,.4);color:var(--text);padding:.2em .6em;border-radius:999px;font-size:.8rem}
.meta{color:var(--muted);font-size:.9rem}
.site-footer{border-top:1px solid rgba(255,255,255,.06);margin-top:40px;padding:24px 0;background:rgba(10,15,35,.5)}
.article{max-width:760px;margin:0 auto}
.article h1{font-size:2rem;margin:.2em 0}
.article h2{margin-top:1.2em}
.article p{margin:.8em 0}
ul{padding-left:20px}
input,textarea{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:#0c1330;color:var(--text)}
button{padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:linear-gradient(180deg,#142050,#0e1a40);color:var(--text);cursor:pointer;}
button:hover{transform:translateY(-1px)}
.notice{padding:12px 14px;border:1px dashed rgba(255,255,255,.25);border-radius:12px;background:rgba(255,255,255,.03)}
table{width:100%;border-collapse:collapse;background:rgba(255,255,255,.02);border-radius:12px;overflow:hidden}
td,th{padding:10px;border-bottom:1px solid rgba(255,255,255,.06);text-align:left}