:root {
  --bg: #080b12;
  --card: rgba(255,255,255,.065);
  --card2: rgba(255,255,255,.095);
  --line: rgba(255,255,255,.12);
  --text: #eef3ff;
  --muted: #9ba8c7;
  --primary: #7c5cff;
  --primary2: #18d5ff;
  --danger: #ff5570;
  --ok: #35d07f;
  --warn: #ffbd4a;
  --radius: 22px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(124,92,255,.35), transparent 35%),
    radial-gradient(circle at top right, rgba(24,213,255,.18), transparent 35%),
    var(--bg);
  color:var(--text);
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
.topbar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px clamp(16px,4vw,52px);
  background:rgba(8,11,18,.72);
  backdrop-filter: blur(18px);
  border-bottom:1px solid var(--line);
}
.brand{font-weight:800;font-size:20px;letter-spacing:.2px;display:flex;gap:10px;align-items:center}
.brand-icon{color:var(--primary2);filter:drop-shadow(0 0 16px var(--primary2))}
nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
nav a{color:var(--muted);padding:9px 11px;border-radius:999px;font-size:14px}
nav a:hover{background:var(--card);color:var(--text)}
.container{width:min(1180px, calc(100% - 28px));margin:30px auto 70px}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:stretch}
.card{
  background:linear-gradient(180deg, var(--card2), var(--card));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:0 24px 80px rgba(0,0,0,.22);
}
h1,h2,h3{margin:0 0 14px} h1{font-size:clamp(30px,5vw,54px);line-height:1.02} h2{font-size:24px} h3{font-size:18px}
p{color:var(--muted);line-height:1.65}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.grid.two{grid-template-columns:repeat(2,1fr)}
.stat{padding:18px;border-radius:18px;background:rgba(255,255,255,.055);border:1px solid var(--line)}
.stat .label{color:var(--muted);font-size:13px}.stat .value{font-weight:800;font-size:26px;margin-top:6px}
.btn,button,input[type=submit]{
  border:0;border-radius:999px;padding:12px 18px;background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:white;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:8px;justify-content:center;
  box-shadow:0 14px 30px rgba(124,92,255,.22);
}
.btn.secondary,button.secondary{background:rgba(255,255,255,.09);box-shadow:none;border:1px solid var(--line);color:var(--text)}
.btn.danger,button.danger{background:var(--danger);box-shadow:none}.btn.small,button.small{padding:8px 12px;font-size:13px}
.btn:disabled,button:disabled{opacity:.45;cursor:not-allowed}
.form{display:grid;gap:14px}.field{display:grid;gap:7px}.field label{font-size:13px;color:var(--muted)}
input,select,textarea{
  width:100%;border:1px solid var(--line);background:rgba(0,0,0,.22);color:var(--text);
  border-radius:14px;padding:13px 14px;outline:none;font:inherit;
}
textarea{min-height:96px;resize:vertical} input:focus,select:focus,textarea:focus{border-color:rgba(24,213,255,.7)}
.help{font-size:13px;color:var(--muted)}
.alert{padding:13px 16px;border-radius:16px;margin-bottom:14px;border:1px solid var(--line)}
.alert.success{background:rgba(53,208,127,.12);border-color:rgba(53,208,127,.35)}
.alert.error{background:rgba(255,85,112,.12);border-color:rgba(255,85,112,.35)}
.alert.info{background:rgba(24,213,255,.12);border-color:rgba(24,213,255,.35)}
.table-wrap{overflow:auto;border-radius:18px;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;min-width:760px;background:rgba(255,255,255,.04)}
th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle} th{color:var(--muted);font-size:13px;font-weight:700} tr:last-child td{border-bottom:0}
.badge{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.1);color:var(--text);font-size:12px;font-weight:800}
.badge.admin{background:rgba(124,92,255,.25)}.badge.member{background:rgba(53,208,127,.2)}.badge.user{background:rgba(255,255,255,.1)}
.progress{height:12px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}.progress > span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--primary2));border-radius:999px}
.recorder{display:grid;gap:16px;text-align:center}.mic{
  width:150px;height:150px;border-radius:50%;margin:10px auto;background:radial-gradient(circle,rgba(24,213,255,.9),rgba(124,92,255,.8));
  display:grid;place-items:center;font-size:58px;box-shadow:0 0 0 18px rgba(124,92,255,.08),0 0 80px rgba(24,213,255,.25);
}
.mic.recording{animation:pulse 1.2s infinite}.timer{font-size:44px;font-weight:900;letter-spacing:1px}.actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
audio{width:100%;margin-top:10px}.footer{color:var(--muted);text-align:center;border-top:1px solid var(--line);padding:24px}
.empty{text-align:center;padding:36px;color:var(--muted)}
@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,85,112,.45)}70%{transform:scale(1.03);box-shadow:0 0 0 24px rgba(255,85,112,0)}100%{transform:scale(1)}}
@media (max-width: 860px){.hero,.grid,.grid.two{grid-template-columns:1fr}.topbar{align-items:flex-start;flex-direction:column}.container{margin-top:18px}table{min-width:680px}}