:root{
  --bg:#07121a;
  --panel:#0c1520;
  --card:#0b1b25;
  --text:#e5f2e5;
  --muted:#99b2a3;
  --lime:#84cc16;
  --lime-2:#a3e635;
  --border:#0f2430;
  --danger:#ef4444;
}
*{box-sizing:border-box;font-family:Inter,system-ui,Segoe UI,Roboto,Ubuntu,Arial,sans-serif}
html,body{margin:0;padding:0;background:transparent}
#wrap{position:fixed;inset:0;background:linear-gradient(135deg, rgba(5,12,18,.92) 0%, rgba(8,20,26,.92) 50%, rgba(10,24,18,.92) 100%);display:flex;align-items:center;justify-content:center;overflow:hidden}
.hidden{display:none}
#wrap.hidden{display:none}

#wrap::after{content:"";position:absolute;right:8%;top:10%;width:280px;height:280px;border:2px solid rgba(132,204,22,.25);border-radius:24px;transform:rotate(35deg);filter:blur(.2px)}
#wrap::before{content:"";position:absolute;right:2%;bottom:8%;width:220px;height:220px;border:2px solid rgba(132,204,22,.15);border-radius:24px;transform:rotate(20deg)}

.panel{width:920px;max-width:94vw;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border)}
.title{font-weight:600;display:flex;align-items:center;gap:10px}
.title .dot{width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime)}
.panel-body{padding:18px}
.row{margin-bottom:16px}
.row.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.col{min-width:0}
.label{font-size:12px;color:var(--muted);margin-bottom:8px;letter-spacing:.3px}
.input-row{display:flex;gap:10px}
input{flex:1;background:#07121a;border:1px solid var(--border);color:var(--text);padding:12px 12px;border-radius:10px;outline:none}
input:focus{border-color:var(--lime)}
.btn{border:none;border-radius:10px;padding:11px 14px;color:var(--text);cursor:pointer;transition:.15s ease-in-out;user-select:none}
.btn.lime{background:linear-gradient(180deg, var(--lime-2), var(--lime));color:#0a1605}
.btn.lime:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--text)}
.btn.danger{background:var(--danger)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;color:#d9ffb3}

.grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));gap:14px;max-height:380px;overflow:auto;padding:2px}
.card{position:relative;background:linear-gradient(180deg, #0c1f2a, #0b1822);border:1px solid var(--border);border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 6px 16px rgba(0,0,0,.35);padding:16px;display:flex;flex-direction:column;align-items:center;gap:12px;min-height:210px}
.card:hover{border-color:rgba(132,204,22,.35);box-shadow:0 10px 26px rgba(0,0,0,.45), 0 0 0 1px rgba(132,204,22,.15) inset;transform:translateY(-1px)}
.card .corner{position:absolute;width:10px;height:10px;border-top:2px solid rgba(255,255,255,.14);border-left:2px solid rgba(255,255,255,.14);opacity:.9}
.card .corner.tl{top:8px;left:8px}
.card .corner.tr{top:8px;right:8px;transform:scaleX(-1)}
.card .corner.bl{bottom:8px;left:8px;transform:scaleY(-1)}
.card .corner.br{bottom:8px;right:8px;transform:scale(-1)}
.avatar{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%, rgba(132,204,22,.25), rgba(12,20,28,.9));border:1px solid rgba(132,204,22,.35)}
.avatar svg{width:46px;height:46px;fill:#cbd5e1;opacity:.9}
.cid{font-weight:600;letter-spacing:.2px}
.meta{font-size:12px;color:var(--muted)}
.card .actions{margin-top:auto;width:100%;display:flex;gap:10px}
.pill{flex:1;text-align:center;background:linear-gradient(180deg, rgba(132,204,22,.9), rgba(101,163,13,.95));color:#0b1306;border:none;border-radius:8px;padding:10px 0;font-weight:600;cursor:pointer}
.trash{position:absolute;top:10px;right:10px;background:transparent;border:none;color:#99aab5;cursor:pointer}
.trash:hover{color:#fff}

.grid{scrollbar-width:thin;scrollbar-color: var(--lime) transparent}
.grid::-webkit-scrollbar{width:10px;height:10px}
.grid::-webkit-scrollbar-track{background:transparent}
.grid::-webkit-scrollbar-thumb{background:linear-gradient(180deg, var(--lime-2), var(--lime));border-radius:8px}
.grid::-webkit-scrollbar-corner{background:transparent}
