:root{--bg: #0f1020;--surface: #1a1b2e;--surface-2: #24263f;--border: #34365a;--text: #e8e8f0;--muted: #9a9ab5;--accent: #ff7eb6;--accent-2: #7c6cff;--danger: #ff6b6b;font-family:system-ui,-apple-system,Segoe UI,Hiragino Sans,Noto Sans JP,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}a{color:inherit;text-decoration:none}h1{font-size:1.5rem}h2{font-size:1.1rem;margin-top:1.8rem;color:var(--muted)}.container{max-width:980px;margin:0 auto;padding:1.5rem 1rem 4rem}.header{display:flex;align-items:center;gap:1rem;padding:.7rem 1rem;background:linear-gradient(90deg,var(--surface),var(--surface-2));border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:.4rem;font-weight:700;font-size:1.2rem}.brand-name{background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}.nav{display:flex;gap:.3rem;flex:1}.nav a{padding:.4rem .7rem;border-radius:8px;color:var(--muted);font-size:.95rem}.nav a:hover{background:var(--surface-2);color:var(--text)}.nav a.active{color:var(--text);background:var(--surface-2)}.header-right{display:flex;align-items:center;gap:.6rem}.user{display:flex;align-items:center;gap:.5rem}.login-box{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem}.login-hint{font-size:.72rem;color:var(--muted);max-width:220px;text-align:right;line-height:1.3}.avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}.user-name{font-size:.9rem;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;border:none;padding:.5rem 1rem;border-radius:8px;font-weight:600;cursor:pointer}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border);padding:.45rem .8rem;border-radius:8px;cursor:pointer}.btn-ghost:hover{background:var(--surface-2)}.btn-ghost.danger{color:var(--danger);border-color:var(--danger)}.lang-toggle{background:var(--surface-2);color:var(--muted);border:1px solid var(--border);padding:.3rem .5rem;border-radius:6px;cursor:pointer;font-size:.8rem}.muted{color:var(--muted)}.title-note{font-size:.75rem;font-weight:400;color:var(--muted);margin-left:.5rem}.loading{display:flex;align-items:center;gap:.6rem;padding:1rem 0;color:var(--muted)}.spinner{width:20px;height:20px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}.spinner.small{width:14px;height:14px;border-width:2px}@keyframes spin{to{transform:rotate(360deg)}}.status{color:var(--accent);margin-left:.6rem}.error-text{color:var(--danger);font-size:.85rem}.page-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}.pack-actions{display:flex;align-items:center;gap:.5rem}.badge{color:#6ee7a8;border:1px solid #6ee7a8;border-radius:999px;padding:.25rem .6rem;font-size:.8rem;white-space:nowrap}.search-bar{display:flex;gap:.5rem;margin:1rem 0 1.5rem}.search-bar input{flex:1}input{background:var(--surface);border:1px solid var(--border);color:var(--text);padding:.5rem .7rem;border-radius:8px;font-size:.95rem}input:focus{outline:2px solid var(--accent-2)}.pack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}.pack-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1rem;transition:border-color .15s,transform .15s}.pack-card:hover{border-color:var(--accent);transform:translateY(-2px)}.pack-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;padding-right:2.2rem}.pack-title{margin:0;font-size:1.05rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pack-count{color:var(--muted);font-size:.8rem;white-space:nowrap}.pack-preview{display:flex;flex-wrap:wrap;gap:4px;margin:.7rem 0;min-height:28px}.pack-by{color:var(--muted);font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pack-footer{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}.pack-card-rel{position:relative}.pack-add{position:absolute;top:.6rem;right:.6rem;width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-size:1.1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}.pack-add:hover:not(:disabled){border-color:var(--accent);background:var(--surface)}.pack-add.in-list{background:#6ee7a8;border-color:#6ee7a8;color:#0f1020}.pack-add:disabled{cursor:default}.pack-card-wrap{display:flex;flex-direction:column;gap:.4rem}.emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:.6rem;margin-top:1rem}.emoji-cell{display:flex;flex-direction:column;align-items:center;gap:.3rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.6rem .3rem}.emoji-img{object-fit:contain;image-rendering:auto}.emoji-broken{display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);border-radius:6px;color:var(--muted);font-size:.9rem}.emoji-code{font-size:.7rem;color:var(--muted);word-break:break-all;text-align:center}.emoji-editor{display:flex;flex-direction:column;gap:.6rem;margin-top:.8rem}.emoji-row{display:flex;align-items:center;gap:.5rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.5rem;flex-wrap:wrap}.emoji-row-preview{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);border-radius:8px;flex-shrink:0}.emoji-placeholder{color:var(--muted)}.shortcode-input{width:140px}.url-input{flex:1;min-width:180px}.field{display:flex;flex-direction:column;gap:.3rem;margin:1rem 0;max-width:480px}.field span{font-size:.9rem;color:var(--muted)}.hint{color:var(--muted);font-size:.78rem}.save-bar{margin-top:2rem;display:flex;align-items:center}section{margin-bottom:1.5rem}.footer{text-align:center;padding:2rem 1rem 3rem;border-top:1px solid var(--border);margin-top:2rem}.footer a{color:var(--muted);font-size:.85rem}.footer a:hover{color:var(--accent)}.footer .version{color:var(--muted);font-size:.85rem}.copy-pack-list{display:flex;flex-direction:column;gap:.7rem;margin-top:.8rem}.copy-pack-card{width:100%;text-align:left;color:inherit;font:inherit;cursor:pointer}.copy-pack-card.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.copy-pack-card.selected:hover{transform:none}.copy-added-badge{color:#0f1020;background:#6ee7a8;border-radius:999px;padding:.1rem .5rem;font-size:.75rem;font-weight:700;white-space:nowrap;flex-shrink:0}.copy-arrow{text-align:center;font-size:3rem;line-height:1;color:var(--accent-2);margin:1.2rem 0}.copy-emoji{position:relative;cursor:pointer;color:inherit;font:inherit;transition:border-color .15s,box-shadow .15s}.copy-emoji:hover:not(:disabled){border-color:var(--accent)}.copy-emoji.staged{border-color:#6ee7a8;box-shadow:0 0 0 1px #6ee7a8}.copy-emoji.done{opacity:.5;cursor:default}.copy-check{position:absolute;top:4px;right:4px;width:16px;height:16px;border-radius:50%;background:#6ee7a8;color:#0f1020;font-size:.7rem;line-height:16px;text-align:center}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#0009;display:flex;align-items:center;justify-content:center;padding:1rem}.modal{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.2rem;width:min(420px,100%);max-height:90vh;overflow:auto}.modal h3{margin:0 0 .8rem}.modal-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.2rem}.transp-preview{display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:10px;padding:.8rem;min-height:120px}.transp-preview canvas{max-width:256px;max-height:256px;width:auto;height:auto;image-rendering:auto}.checker{background-image:linear-gradient(45deg,#2a2c45 25%,transparent 25%),linear-gradient(-45deg,#2a2c45 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2a2c45 75%),linear-gradient(-45deg,transparent 75%,#2a2c45 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.transp-threshold{display:flex;flex-direction:column;gap:.3rem;margin-top:.9rem;font-size:.9rem;color:var(--muted)}.transp-threshold input[type=range]{width:100%;padding:0}.save-btn-wrap{position:relative;display:inline-flex}.sparkle-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5}.sparkle{position:absolute;top:50%;left:50%;width:1em;height:1em;margin:-.5em 0 0 -.5em;font-size:1.15rem;line-height:1;will-change:transform,opacity;animation:save-sparkle 2.4s ease-out forwards}@keyframes save-sparkle{0%{opacity:0;transform:rotate(var(--a)) translate(140px) rotate(calc(-1 * var(--a))) scale(.5)}20%{opacity:1;transform:rotate(var(--a)) translate(54px) rotate(calc(-1 * var(--a))) scale(1)}85%{opacity:1;transform:rotate(calc(var(--a) + 630deg)) translate(54px) rotate(calc(-1 * (var(--a) + 630deg))) scale(1)}to{opacity:0;transform:rotate(calc(var(--a) + 720deg)) translate(54px) rotate(calc(-1 * (var(--a) + 720deg))) scale(.5)}}.btn.save-glow{animation:save-glow .8s ease-in-out infinite alternate}@keyframes save-glow{0%{box-shadow:0 0 #ff7eb600}to{box-shadow:0 0 16px 3px #ff7eb6b3}}.unsaved-hint{color:var(--accent);font-size:.85rem;margin-left:.7rem;white-space:nowrap}@media(prefers-reduced-motion:reduce){.sparkle{animation:none;display:none}.btn.save-glow{animation:none;box-shadow:0 0 14px 3px #ff7eb699}}@media(max-width:640px){.header{gap:.5rem .6rem;padding:.6rem .8rem}.header-right{order:2;margin-left:auto}.user-name{display:none}.nav{order:3;flex:1 0 100%;display:grid;grid-template-columns:1fr 1fr;gap:.4rem}.nav a{text-align:center;white-space:nowrap;background:var(--surface-2);padding:.5rem .4rem;font-size:.9rem}}