:root{--pink:#fc9eaa;--pink2:#ffe0e5;--ink:#2d161c;--bg:#111;--card:#1b1b1b;--line:#3a2a2e}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#fff;font-family:Inter,system-ui,sans-serif;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:40px 40px;min-height:100vh}
header{height:64px;display:flex;align-items:center;justify-content:center;background:#181818;border-bottom:1px solid var(--line)}
.logo{width:36px;height:36px;border-radius:8px;background:var(--pink);color:#000;font-weight:900;display:grid;place-items:center;font-size:22px}
main{max-width:720px;margin:0 auto;padding:40px 16px;text-align:center}
h1{font-size:44px;line-height:1.1;margin:10px 0}h1 span{color:var(--pink)}
.sub{color:#bbb;max-width:560px;margin:0 auto 28px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;text-align:left;position:relative}
.card h3{text-align:center;margin:0 0 12px}
pre{background:#232323;border-radius:10px;padding:14px;margin:0;overflow:auto;font-size:12px;color:#8fd;white-space:pre;user-select:all}
.copy{position:absolute;right:30px;top:62px;background:var(--pink);color:#000;border:0;border-radius:6px;padding:6px 10px;font-weight:700;cursor:pointer}
.thead{display:flex;justify-content:space-between;margin:18px 4px 8px;padding-bottom:8px;border-bottom:1px solid var(--line);font-weight:600}
#keys{background:#232323;border-radius:10px;padding:10px;min-height:110px}
.empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px 0;color:#aaa}.empty b{color:#fff}
.krow{display:flex;align-items:center;gap:10px;padding:8px;border-bottom:1px solid #2c2c2c}
.krow code{background:#111;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;color:var(--pink);overflow:auto}
.ico{background:#333;color:#fff;border:0;border-radius:6px;padding:5px 9px;cursor:pointer}
.left{margin-left:auto;background:#3a1d24;color:var(--pink);border-radius:999px;padding:4px 12px;font-size:13px;white-space:nowrap}
.hint{text-align:center;color:#bbb;margin:18px 0 10px}
.main{display:block;margin:0 auto;background:var(--pink);color:#000;border:0;border-radius:8px;padding:12px 22px;font-weight:800;cursor:pointer}
.main:disabled{opacity:.45;cursor:not-allowed}#ts{display:flex;justify-content:center}
footer{margin-top:36px;display:flex;flex-direction:column;gap:10px;align-items:center;color:#888;font-size:13px}footer a{background:var(--pink);color:#000;padding:10px 26px;border-radius:8px;font-weight:800;text-decoration:none}
#toast{position:fixed;left:50%;top:20px;transform:translate(-50%,-80px);background:var(--pink2);color:var(--ink);padding:10px 18px;border-radius:10px;font-weight:600;transition:.3s;z-index:99}#toast.show{transform:translate(-50%,0)}
.modal{position:fixed;inset:0;background:#000c;display:grid;place-items:center;z-index:50;padding:16px}.modal[hidden]{display:none}
.mbox{background:#222;border:1px solid var(--line);border-radius:14px;padding:18px;max-width:640px;width:100%;text-align:left}
.mbox h2{margin:0 0 6px}.mbox p{color:#bbb;margin:0 0 12px}
.pimg{height:220px;border-radius:10px;background:linear-gradient(135deg,#2a0f16,#fc9eaa55);background-size:cover;background-position:center;cursor:pointer;display:grid;place-items:center;font-size:26px;font-weight:900;color:var(--pink)}
.pcount{margin:12px 0 6px}.bar{height:6px;background:#333;border-radius:9px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:var(--pink);transition:width 1s linear}
.mbtn{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}.mbtn button{border:1px solid var(--line);background:#2a2a2a;color:#fff;border-radius:8px;padding:9px 16px;font-weight:700;cursor:pointer}.mbtn .pink{background:var(--pink);color:#000;border:0}.mbtn button:disabled{opacity:.4}
@media(max-width:520px){h1{font-size:32px}.copy{top:56px}}