: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)}@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}}