:root{font-family:Plus Jakarta Sans,sans-serif;color:#f8fafc;background:#081a2f}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#071426;color:#f8fafc}.page{position:relative;min-height:100vh;display:grid;place-items:center;padding:28px;overflow:hidden}.bg-layer,.grid-layer,.vignette-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.app-bg-base{z-index:0;background:radial-gradient(1200px 600px at 50% 100%,#061c528c,#061c5200 65%),linear-gradient(180deg,#0a2134,#081a2f 52%,#071426)}.app-bg-grid{z-index:1;background-image:linear-gradient(to right,rgba(148,163,184,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(148,163,184,.06) 1px,transparent 1px);background-size:20px 20px;background-position:0 0,0 0;animation:gridDrift 28s linear infinite;opacity:.35}.app-bg-vignette{z-index:2;background:radial-gradient(circle at 50% 40%,#040c1c00,#030a1873 70%,#020812b8)}.blob{position:absolute;width:340px;height:340px;border-radius:999px;filter:blur(110px) saturate(1.15);mix-blend-mode:screen;animation:moveBlob 16s ease-in-out infinite;will-change:transform;pointer-events:none;z-index:3}.blob-primary{background:radial-gradient(circle at 35% 35%,#65d43a,#2e9a2a 52%,#1e6f22);opacity:.34}.blob-secondary{background:radial-gradient(circle at 40% 40%,#8de64f,#4eb33a,#1f7028);opacity:.3;animation-duration:20s;animation-delay:1.2s}.blob-tertiary{background:radial-gradient(circle at 35% 35%,#78dc43,#3ea237 48%,#1c6a28);opacity:.34;animation-duration:18s;animation-delay:2s}.blob-a{top:-60px;right:6%}.blob-b{bottom:-90px;left:12%}.blob-c{top:42%;right:28%}.container{position:relative;z-index:4;width:100%;max-width:680px}.preview-image-wrap{margin-top:14px;display:flex;justify-content:center}.lanyard{position:relative;padding-top:40px;transform-origin:top center;animation:lanyardSwing 4.4s ease-in-out infinite}.lanyard-pin{position:absolute;top:0;left:50%;width:14px;height:14px;transform:translate(-50%);border-radius:999px;border:1px solid rgba(148,163,184,.5);background:radial-gradient(circle at 35% 35%,#f8fafc,#94a3b8 70%);box-shadow:0 0 0 2px #0f172a66;z-index:3}.lanyard-strap{position:absolute;top:10px;left:50%;width:2px;height:34px;transform:translate(-50%);background:linear-gradient(180deg,#cbd5e1f2,#94a3b84d);box-shadow:0 1px 3px #0208124d;z-index:2}.preview-image-button{border:0;background:transparent;min-height:0;padding:0;border-radius:10px;cursor:pointer;line-height:0;transform-origin:top center}.preview-image{width:176px;height:218px;object-fit:contain;background:#0f172a80;border-radius:10px;border:1px solid rgba(148,163,184,.3);box-shadow:0 8px 20px #02081259;animation:previewFloat 3.2s ease-in-out infinite}.lanyard.is-active{animation:lanyardClick .56s cubic-bezier(.2,.85,.25,1)}.lanyard.is-active .preview-image{animation:previewClick .52s cubic-bezier(.2,.85,.25,1)}.panel{border:1px solid rgba(148,163,184,.3);background:linear-gradient(180deg,#1e293bd1,#0f172ab8);border-radius:16px;padding:20px;box-shadow:0 16px 36px #0208126b;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.form{display:grid;gap:8px}.form label{color:#e2e8f0;font-size:.9rem;font-weight:600}.row{display:flex;gap:8px}input{width:100%;border:1px solid rgba(148,163,184,.36);background:#0f172adb;color:#f8fafc;padding:11px 12px;border-radius:10px;outline:none;font-size:.95rem}input::placeholder{color:#cbd5e180}input:focus{border-color:#65a30d;box-shadow:0 0 0 3px #65a30d2e}button{border:0;background:linear-gradient(140deg,#84cc16,#65a30d);color:#0f172a;font-weight:700;border-radius:10px;padding:0 14px;min-height:42px;cursor:pointer}button:disabled{opacity:.6;cursor:not-allowed}.button-secondary{background:#0f172a8c;color:#e2e8f0;border:1px solid rgba(148,163,184,.3)}.button-secondary:hover:not(:disabled){background:#1e293be0}.error{margin:10px 0 0;color:#ffb4b6;font-weight:600;font-size:.9rem}.error.in-panel{text-align:left}.code-box{margin-top:14px;border-radius:12px;border:1px solid rgba(148,163,184,.3);background:#0f172ab8;text-align:center;padding:16px 12px}.code-box p{margin:0;color:#94a3b8;font-size:.92rem}.code-box strong{display:block;margin-top:6px;font-size:clamp(1.7rem,5vw,2.3rem);letter-spacing:.08em;color:#bef264}.totp-value:not(.filled):before{content:attr(data-placeholder);color:#bef264;opacity:.8}.code-actions{margin-top:10px;display:inline-flex;align-items:center;gap:10px}.copied{color:#bef264;font-size:.88rem;font-weight:700}@keyframes gridDrift{0%{background-position:0 0,0 0}to{background-position:120px 60px,120px 60px}}@keyframes moveBlob{0%,to{transform:translateZ(0) scale(1)}25%{transform:translate3d(85px,-60px,0) scale(1.08)}50%{transform:translate3d(-60px,45px,0) scale(.94)}75%{transform:translate3d(40px,95px,0) scale(1.06)}}@keyframes previewFloat{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(2deg)}}@keyframes lanyardSwing{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}@keyframes lanyardClick{0%{transform:rotate(0) translateY(0)}35%{transform:rotate(8deg) translateY(-3px)}70%{transform:rotate(-5deg) translateY(2px)}to{transform:rotate(0) translateY(0)}}@keyframes previewClick{0%{transform:translateY(0) scale(1) rotate(0)}40%{transform:translateY(-8px) scale(1.08) rotate(4deg)}75%{transform:translateY(2px) scale(.98) rotate(-2deg)}to{transform:translateY(0) scale(1) rotate(0)}}@media (max-width: 720px){.page,.panel{padding:14px}.blob{width:280px;height:280px}.preview-image{width:144px;height:178px}.lanyard{padding-top:34px}.lanyard-strap{height:28px}.row{flex-direction:column}}