:root{--bg:#0a0f18;--card:#121c2b;--line:#24344d;--text:#eef4ff;--muted:#9cb0cc;--cyan:#59f0ff;--blue:#5ab0ff;--green:#2be6a7;--orange:#ffb454;--violet:#8b7dff;--red:#ff6b6b}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;padding:24px;color:var(--text);font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at top left,rgba(90,176,255,.12),transparent 30%),radial-gradient(circle at top right,rgba(89,240,255,.08),transparent 20%),linear-gradient(180deg,#0a0f18,#0b1320 60%,#0a111c)}
.container{max-width:1220px;margin:auto}
.nav{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;margin-bottom:24px;border-radius:18px;background:rgba(18,28,43,.92);border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.nav a{color:var(--muted);text-decoration:none;margin-left:14px;font-weight:bold}
.nav a:hover{color:var(--text)}
.card{background:linear-gradient(180deg,rgba(18,28,43,.98),rgba(12,20,33,.98));border:1px solid var(--line);border-radius:22px;padding:24px;margin-bottom:22px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:start}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
h1{font-size:44px;margin:0 0 12px;line-height:1.04}h2{font-size:28px;color:var(--cyan);margin:0 0 10px}h3{font-size:20px;margin:0 0 10px}
p,li{color:var(--muted);line-height:1.6}
.button{display:inline-block;padding:12px 18px;border-radius:10px;background:linear-gradient(135deg,#2b7fff,#50c8ff);color:white;text-decoration:none;font-weight:bold;margin-top:10px;margin-right:10px;border:none;cursor:pointer}
.button.secondary{background:transparent;border:1px solid var(--line);color:var(--text)}
.button.danger{background:linear-gradient(135deg,#e24c4c,#ff6b6b)}
.button.warn{background:linear-gradient(135deg,#d88a22,#ffb454)}
.notice{border-left:4px solid var(--cyan);background:rgba(89,240,255,.08);padding:12px 14px;border-radius:10px}
.member-card,.part{background:#0f1724;border:1px solid var(--line);border-radius:16px;overflow:hidden;padding:18px}
.tag{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;margin-bottom:10px}
.role-admin{background:rgba(255,107,107,.12);color:var(--red)}
.role-hangaround{background:rgba(90,176,255,.1);color:var(--blue)}
.role-prospect{background:rgba(255,180,84,.12);color:var(--orange)}
.role-fullmember{background:rgba(139,125,255,.12);color:var(--violet)}
.tok{background:rgba(43,230,167,.12);color:var(--green)}
.tblock{background:rgba(255,107,107,.12);color:var(--red)}
.tpending{background:rgba(255,180,84,.12);color:var(--orange)}
input,select{width:100%;padding:12px 14px;margin:6px 0 10px;border-radius:10px;border:1px solid var(--line);background:#0b1220;color:var(--text)}
.flash{padding:12px 14px;border-radius:12px;margin-bottom:16px}
.flash.error{background:rgba(255,107,107,.12);color:#ffd3d3;border:1px solid rgba(255,107,107,.35)}
.flash.ok{background:rgba(43,230,167,.12);color:#d7ffef;border:1px solid rgba(43,230,167,.35)}
.flash.warn{background:rgba(255,180,84,.12);color:#ffe6c3;border:1px solid rgba(255,180,84,.35)}
.status-panel{border:1px solid rgba(255,180,84,.35);background:linear-gradient(180deg,rgba(255,180,84,.10),rgba(255,180,84,.04));border-radius:22px;padding:22px;box-shadow:0 0 24px rgba(255,180,84,.10);margin-bottom:22px}
.status-ok{border:1px solid rgba(43,230,167,.35);background:linear-gradient(180deg,rgba(43,230,167,.10),rgba(43,230,167,.04));border-radius:22px;padding:22px;box-shadow:0 0 24px rgba(43,230,167,.10);margin-bottom:22px}
.avatar{width:130px;height:130px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.2);box-shadow:0 0 25px rgba(255,0,0,.6);animation:pulse 2s infinite}
.avatar-wrap{text-align:center;min-width:150px}.avatar-name{font-size:22px;font-weight:bold;margin-top:10px}.avatar-role{color:#ff4d4d;font-weight:bold;letter-spacing:1px}
.gallery img{width:100%;border-radius:14px;border:1px solid var(--line)}
@keyframes pulse{0%{box-shadow:0 0 15px rgba(255,0,0,.4)}50%{box-shadow:0 0 35px rgba(255,0,0,.9)}100%{box-shadow:0 0 15px rgba(255,0,0,.4)}}
@media (max-width:900px){.hero,.form-grid{grid-template-columns:1fr}.nav{display:block}h1{font-size:34px}}