:root{--bg: #1a1f2e;--bg-card: #232a3b;--bg-hover: #2a3347;--text: #e8ecf1;--text-sub: #a0aab8;--border: #3d4657;--accent: #58a6ff;--accent-dim: #1f3a5f;--radius: 6px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Noto Sans JP,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}#app{max-width:1200px;margin:0 auto;padding:12px 16px}h1{font-size:.85rem;font-weight:600;margin-bottom:4px;color:var(--text)}.lead-text{font-size:.72rem;color:var(--text-sub);margin-bottom:12px;line-height:1.4}nav{display:flex;gap:2px;margin-bottom:12px;border-bottom:1px solid var(--border)}nav button{background:none;border:none;color:var(--text-sub);font-size:.9rem;font-weight:600;padding:8px 16px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}nav button:hover{color:var(--text)}nav button.active{color:var(--accent);border-bottom-color:var(--accent)}.breadcrumb{font-size:.75rem;color:var(--text-sub);margin-bottom:4px}.breadcrumb a{color:var(--accent);text-decoration:none}.page-nav{display:flex;gap:2px;margin-bottom:12px;border-bottom:1px solid var(--border)}.page-nav a{color:var(--text-sub);text-decoration:none;font-size:.85rem;font-weight:600;padding:6px 14px;border-bottom:2px solid transparent;margin-bottom:-1px}.page-nav a:hover{color:var(--text)}.page-nav a.current{color:var(--accent);border-bottom-color:var(--accent)}.filter-row{display:flex;gap:6px;margin-bottom:6px;flex-wrap:wrap;align-items:center}.filter-row select,.filter-row input{background:var(--bg-card);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:6px 10px;font-size:.85rem}.filter-row input{flex:1;min-width:180px}.filter-row select{min-width:80px}.filter-row select:focus,.filter-row input:focus{outline:none;border-color:var(--accent)}.icon-filter-row{display:flex;flex-wrap:wrap;gap:0;align-items:center;align-content:center;margin-bottom:6px;border:1px solid var(--border);border-radius:6px;padding:6px 10px;background:var(--bg-card)}.icon-btn{background:none;border:none;cursor:pointer;opacity:.4;display:flex;align-items:center;justify-content:center;position:relative;margin:0 2px}.icon-btn.elem-btn,.icon-btn.rarity-btn{width:38px;height:50px}.icon-btn.kind-btn{width:50px;height:32px;margin:2px 1px}.icon-btn:hover{opacity:.7}.icon-btn.active{opacity:1}.icon-btn img{display:block;width:100%;height:100%;object-fit:contain}.icon-sep{width:8px}.icon-grid-weapons{display:grid;grid-template-columns:repeat(5,54px);gap:2px;border:1px solid var(--border);border-radius:6px;padding:6px 8px;margin-bottom:6px;background:var(--bg-card);width:fit-content}@media(min-width:641px){.filter-icons-row{display:flex;gap:6px;align-items:stretch;margin-bottom:8px}.filter-icons-row .icon-filter-row,.filter-icons-row .icon-grid-weapons{margin-bottom:0}}@media(max-width:640px){.icon-filter-row{justify-content:center}.icon-grid-weapons{justify-content:center;margin-left:auto;margin-right:auto}}.source-filter-row{display:flex;margin:12px 0;align-items:flex-start;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:10px 0;gap:0}.source-filter-row:before{display:none}.source-label{font-size:.7rem;font-weight:700;color:var(--accent);flex-shrink:0;padding:4px 8px 4px 0}.source-btns{display:flex;flex-wrap:wrap;gap:0}.src-filter-btn{background:none;color:var(--text-sub);border:none;border-bottom:2px solid transparent;padding:6px 12px;font-size:.75rem;font-weight:600;cursor:pointer}.src-filter-btn:hover{color:var(--text)}.src-filter-btn.active{color:var(--accent);border-bottom-color:var(--accent)}.src-filter-btn.fa-btn{margin-left:4px}.src-filter-btn.fa-btn.active{color:#86efac;border-bottom-color:#22c55e}.tag-groups{display:flex;flex-direction:column;gap:6px;margin:10px 0}.tag-group-card{border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;background:var(--bg-card)}.tag-group-label{font-size:.7rem;font-weight:700;color:var(--text-sub);margin-bottom:6px;background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;gap:4px;width:100%;text-align:left}.tag-group-label:before{content:"▼";font-size:.55rem}.tag-group-label.is-closed:before{content:"▶"}.tag-group-card .tag-row{margin-bottom:0}.tag-group-card .tag-row.collapsed{display:none}.tag-row{display:flex;gap:6px 6px;flex-wrap:wrap;margin-bottom:10px}.tag-section-label{font-size:.7rem;font-weight:700;color:var(--accent);margin:12px 0 6px;padding-top:8px;border-top:1px solid var(--border)}.tag-btn{background:var(--bg-card);color:var(--text-sub);border:1px solid var(--border);border-radius:20px;padding:6px 12px;font-size:.75rem;font-weight:600;cursor:pointer;min-width:36px;text-align:center}.tag-btn:hover{border-color:var(--accent);color:var(--text)}.tag-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.tag-btn.clear{color:#f87171;border-color:#7f1d1d}.tag-btn.clear:hover{background:#7f1d1d;color:#fca5a5}.active-tags-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-height:0;margin-bottom:6px}.active-tags-row:empty{display:none}.active-tag-chip{display:inline-flex;align-items:center;gap:4px;background:var(--accent-dim);border:1px solid var(--accent);color:var(--accent);border-radius:20px;padding:4px 10px;font-size:.75rem;font-weight:600;cursor:pointer}.active-tag-chip:hover{background:var(--accent);color:#fff}.chip-x{font-size:.9rem;line-height:1;opacity:.7}.active-tag-chip:hover .chip-x{opacity:1}#result-count{font-size:.8rem;color:var(--text-sub);margin:4px 0 10px}#content{display:flex;flex-direction:column;gap:10px;contain:layout style}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.card-header{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--bg-hover)}.card-icon{border-radius:4px;flex-shrink:0}.card-title{display:flex;flex-direction:column}.card-name{font-weight:700;font-size:.9rem}.card-meta{font-size:.75rem;color:var(--text-sub)}.cat-tag{font-size:.65rem;font-weight:700;padding:2px 6px;border-radius:3px;margin-left:5px;background:#713f12;color:#fcd34d;vertical-align:middle}.card-tags{padding:4px 12px;display:flex;gap:4px;flex-wrap:wrap}.tag{display:inline-flex;align-items:center;gap:3px;padding:1px 8px;border-radius:3px;font-size:.7rem;font-weight:700;background:var(--accent-dim);color:var(--accent)}.tag-src{font-size:.6rem;font-weight:700;padding:0 3px;border-radius:2px;margin-right:3px}.src-ability{background:#7f1d1d;color:#fca5a5}.src-ougi{background:#713f12;color:#fcd34d}.src-support{background:#3b0764;color:#c084fc}.tag-tgt{font-size:.6rem;font-weight:700;padding:0 3px;border-radius:2px;margin-left:3px;background:#1e3a5f;color:#7dd3fc}.tag-slow{background:#3b1f5e;color:#c084fc}.tag-dispel{background:#1e3a5f;color:#7dd3fc}.tag-dispelGuard{background:#14532d;color:#86efac}.tag-charm{background:#5b2147;color:#f9a8d4}.tag-fear{background:#4a1d1d;color:#fca5a5}.tag-paralyze{background:#4a3b1d;color:#fcd34d}.tag-veil{background:#1e3a5f;color:#93c5fd}.tag-heal{background:#14532d;color:#6ee7b7}.tag-atk{background:#5b2121;color:#fca5a5}.tag-hp{background:#14532d;color:#86efac}.tag-ta,.tag-da{background:#4a3b1d;color:#fcd34d}.tag-critical{background:#3b1f5e;color:#c084fc}.tag-enmity{background:#4a1d1d;color:#f87171}.tag-stamina{background:#1e4d2e;color:#4ade80}.tag-cap{background:#1e3a5f;color:#7dd3fc}.card-body{padding:6px 12px 10px}.skill-block{margin-bottom:6px;padding:4px 0 4px 8px;border-bottom:1px solid #1e2430;border-left:2px solid transparent}.skill-block:last-child{border-bottom:none}.skill-block.skill-highlight{border-left-color:#58a6ff;background:#58a6ff0f}.skill-label{font-size:.7rem;font-weight:700;color:var(--accent);margin-bottom:1px}.skill-block.upgraded .skill-label{color:#f59e0b}.skill-block.support .skill-label{color:#a78bfa}.skill-name{font-weight:700;font-size:.82rem}.skill-comment{font-size:.78rem;color:var(--text);white-space:pre-line}.icon-label{font-size:.65rem;padding:1px 5px;border-radius:3px;font-weight:700;margin-left:4px}.icon-1{background:#7f1d1d;color:#fca5a5}.icon-2{background:#14532d;color:#86efac}.icon-3{background:#713f12;color:#fcd34d}.icon-4{background:#3b0764;color:#c084fc}.icon-5{background:#1e3a5f;color:#93c5fd}.no-fa{font-size:.6rem;color:#f87171;font-weight:700}.auto-trigger{font-size:.6rem;font-weight:700;padding:1px 4px;border-radius:2px;background:#14532d;color:#86efac;margin-left:2px}.effect-list{margin-top:3px;padding-left:8px;border-left:2px solid #2a2a4a}.effect-item{font-size:.72rem;padding:1px 0;display:flex;gap:6px;align-items:baseline}.effect-buff .effect-detail{color:#86efac}.effect-debuff .effect-detail{color:#fca5a5}.effect-dur{font-size:.65rem;color:var(--text-sub);white-space:nowrap}mark{background:#854d0e;color:#fef08a;padding:0 2px;border-radius:2px}.back-to-top{position:fixed;z-index:9000;width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;border:none;cursor:pointer;font-size:1.2rem;display:none;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000004d;opacity:.85}.back-to-top:hover{opacity:1}.back-to-top.visible{display:flex}@media(min-width:641px){.back-to-top{bottom:110px;right:20px}}@media(max-width:640px){.back-to-top{top:12px;right:12px;bottom:auto}}.loading,.more-hint{text-align:center;padding:20px;color:var(--text-sub);font-size:.85rem}.contact-banner{font-size:.75rem;color:var(--text-sub);margin-bottom:6px}.contact-banner a{color:var(--accent);text-decoration:none;font-weight:600}.contact-banner a:hover{text-decoration:underline}.support-banner{display:flex;align-items:center;gap:10px;padding:8px 12px;margin-bottom:12px;border-radius:6px;background:#f59e0b1a;border:1px solid rgba(245,158,11,.2);font-size:.75rem;color:var(--text)}.support-banner a{background:#f59e0b;color:#fff;padding:4px 12px;border-radius:4px;text-decoration:none;font-weight:700;font-size:.7rem;white-space:nowrap;flex-shrink:0}.support-banner a:hover{background:#d97706}.site-footer{margin-top:40px;padding:20px 16px;border-top:1px solid var(--border);text-align:center}.footer-content{font-size:.8rem;color:var(--text-sub)}.footer-content a{color:var(--text-sub);text-decoration:none}.footer-content a:hover{color:var(--text)}.footer-content .sep{margin:0 8px}.footer-content .copyright{margin-top:8px;font-size:.7rem}@media(max-width:600px){.filter-row{flex-direction:column}.filter-row input{min-width:100%}}