@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--bg-dark:#0f111a;--bg-sidebar:#151822;--bg-panel:#ffffff08;--bg-panel-hover:#ffffff0f;--border-color:#ffffff1a;--primary:#9b59b6;--primary-glow:#9b59b666;--text-main:#e2e8f0;--text-muted:#94a3b8;--danger:#ef4444;--sidebar-width:260px}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);color:var(--text-main);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;overflow-x:hidden}#root{min-height:100vh;display:flex}.glass-panel{background:var(--bg-panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-color);border-radius:12px;padding:20px}input[type=text],input[type=number],select{border:1px solid var(--border-color);color:var(--text-main);background:#0000004d;border-radius:6px;outline:none;width:100%;padding:8px 12px;font-family:inherit;font-size:.95rem;transition:all .2s}input:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-glow)}button{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:6px;padding:8px 16px;font-family:inherit;font-weight:500;transition:all .2s}button:hover{filter:brightness(1.2);box-shadow:0 0 12px var(--primary-glow)}button:active{transform:translateY(1px)}.app-container{width:100vw;display:flex}.main-content{margin-left:var(--sidebar-width);flex:1;max-width:1400px;min-height:100vh;padding:30px;transition:margin-left .3s}.sidebar{width:var(--sidebar-width);background-color:var(--bg-sidebar);border-right:1px solid var(--border-color);z-index:100;flex-direction:column;height:100vh;padding:20px 0;transition:transform .3s;display:flex;position:fixed;top:0;left:0;overflow-y:auto}.sidebar-header{border-bottom:1px solid var(--border-color);margin-bottom:20px;padding:0 20px 20px}.sidebar-header h2{background:linear-gradient(90deg,#e2e8f0,#9b59b6);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.2rem;font-weight:600}.nav-item{color:var(--text-muted);align-items:center;gap:12px;padding:12px 20px;text-decoration:none;transition:all .2s;display:flex}.nav-item:hover{background:var(--bg-panel-hover);color:var(--text-main)}.nav-item.active{background:var(--bg-panel);color:var(--primary);border-right:3px solid var(--primary)}.hamburger-btn{z-index:200;background:var(--bg-sidebar);border:1px solid var(--border-color);border-radius:8px;padding:8px;display:none;position:fixed;top:15px;left:15px}.overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:90;background:#00000080;display:none;position:fixed;inset:0}.data-table{border-collapse:collapse;width:100%;margin-top:20px}.data-table th,.data-table td{text-align:left;border-bottom:1px solid var(--border-color);padding:12px 15px}.data-table th{color:var(--text-muted);font-size:.9em;font-weight:500}.data-table tr:hover{background:#ffffff05}.flex{display:flex}.flex-col{flex-direction:column;display:flex}.flex-1{flex:1}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:8px}.gap-4{gap:16px}.mt-0{margin-top:0}.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mb-2{margin-bottom:8px}.mb-4{margin-bottom:16px}.mx-2{margin-left:8px;margin-right:8px}.p-4{padding:16px}.pb-10{padding-bottom:40px}.px-3{padding-left:12px;padding-right:12px}.py-1{padding-top:4px;padding-bottom:4px}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.font-bold{font-weight:700}.font-normal{font-weight:400}.text-muted{color:var(--text-muted)}.text-primary{color:var(--primary)}.text-danger{color:var(--danger)}.bg-transparent{background:0 0}.border{border:1px solid var(--border-color)}.cursor-pointer{cursor:pointer}.sticky{position:sticky}.bottom-4{bottom:16px}.z-50{z-index:50}.shadow-2xl{box-shadow:0 25px 50px -12px #00000080}@media (width<=768px){.sidebar{transform:translate(-100%)}.sidebar.open{transform:translate(0)}.main-content{margin-left:0;padding:70px 16px 30px}.hamburger-btn{justify-content:center;align-items:center;display:flex}.overlay.open{display:block}}.characters-page{max-width:1200px;color:var(--text-color);margin:0 auto;padding:2rem;animation:.4s ease-out fadeIn}.header-controls{border-radius:12px;margin-bottom:2rem;padding:1.5rem}.page-title{color:var(--primary-light);margin:0 0 1.5rem;font-size:1.8rem;font-weight:700}.search-filter-bar{flex-direction:column;gap:1rem;display:flex}.search-input-wrapper{width:100%;position:relative}.search-icon{color:var(--text-muted);position:absolute;top:50%;left:1rem;transform:translateY(-50%)}.search-input{border:1px solid var(--border-color);width:100%;color:var(--text-color);background:#ffffff0d;border-radius:8px;padding:.8rem 1rem .8rem 3rem;font-size:1rem;transition:all .3s}.search-input:focus{border-color:var(--primary-color);background:#ffffff1a;outline:none}.loading-state{height:50vh;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;gap:1rem;display:flex}.spinner{border:3px solid #ffffff1a;border-top-color:var(--primary-color);border-radius:50%;width:40px;height:40px;animation:1s ease-in-out infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.character-grid{grid-template-columns:repeat(5,1fr);gap:1.2rem;display:grid}@media (width<=1024px){.character-grid{grid-template-columns:repeat(4,1fr)}}@media (width<=768px){.character-grid{grid-template-columns:repeat(3,1fr)}}@media (width<=480px){.character-grid{grid-template-columns:repeat(2,1fr)}}.character-card{cursor:pointer;border-radius:12px;flex-direction:column;padding:0;transition:transform .3s,box-shadow .3s,border-color .3s;display:flex;overflow:hidden}.character-card.interactive:hover{border-color:#fff3;transform:translateY(-5px);box-shadow:0 8px 24px #0006}.character-thumbnail-wrapper{aspect-ratio:1;background:#111;width:100%;position:relative;overflow:hidden}.character-thumbnail{object-fit:cover;width:100%;height:100%;transition:transform .5s}.character-card:hover .character-thumbnail{transform:scale(1.05)}.character-role-badge{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;border:1px solid #ffffff1a;border-radius:12px;padding:.2rem .6rem;font-size:.75rem;font-weight:600;position:absolute;top:.5rem;left:.5rem}.character-attr-badge{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;border:1px solid #ffffff1a;border-radius:12px;padding:.2rem .6rem;font-size:.75rem;font-weight:600;position:absolute;top:.5rem;right:.5rem}.attr-火{color:#ff6b6b;border-color:#ff6b6b4d}.attr-氷{color:#4facfe;border-color:#4facfe4d}.attr-雷{color:#f6d365;border-color:#f6d3654d}.attr-風{color:#20c997;border-color:#20c9974d}.attr-斬{color:#a18cd1;border-color:#a18cd14d}.attr-打{color:#eb9;border-color:#eebb994d}.attr-突{color:#ff9a9e;border-color:#ff9a9e4d}.character-card-info{background:linear-gradient(#0000,#000c);padding:1rem;position:absolute;bottom:0;left:0;right:0}.character-subname{color:var(--primary-light);opacity:.9;margin-bottom:.2rem;font-size:.75rem}.character-name{color:#fff;text-shadow:0 2px 4px #000c;font-size:1.1rem;font-weight:700}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background:#000000b3;justify-content:center;align-items:center;padding:2rem;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.character-modal{background:var(--bg-dark);border:1px solid #ffffff1a;border-radius:16px;flex-direction:column;width:100%;max-width:800px;max-height:90vh;display:flex;position:relative;overflow:hidden;box-shadow:0 24px 48px #00000080}.close-modal-btn{color:#fff;cursor:pointer;z-index:10;background:#00000080;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:background .2s;display:flex;position:absolute;top:1rem;right:1rem}.close-modal-btn:hover{background:#fff3}.modal-header{background:linear-gradient(135deg,#ffffff0d,#0003);border-bottom:1px solid #ffffff0d;align-items:center;gap:2rem;padding:2rem;display:flex}.modal-thumbnail{object-fit:cover;border:2px solid #ffffff1a;border-radius:16px;width:140px;height:140px;box-shadow:0 8px 16px #0000004d}.modal-title-group{flex-direction:column;gap:.5rem;display:flex}.modal-subname{color:var(--primary-color);font-size:1.1rem;font-weight:600}.modal-name{color:#fff;margin:0;font-size:2.5rem;font-weight:800;line-height:1.2}.modal-badges{gap:.8rem;margin-top:.5rem;display:flex}.static{position:static}.rarity-badge{color:#000;background:linear-gradient(135deg,gold,#fa0);border:none;border-radius:12px;padding:.2rem .6rem;font-size:.75rem;font-weight:800}.modal-body{flex-direction:column;gap:2rem;padding:2rem;display:flex;overflow-y:auto}.stats-grid{background:#0000004d;border:1px solid #ffffff0d;border-radius:12px;grid-template-columns:repeat(3,1fr);gap:1rem;padding:1.5rem;display:grid}.stat-item{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding-bottom:.5rem;display:flex}.stat-label{color:var(--text-muted);font-size:.9rem}.stat-value{color:#fff;font-size:1.1rem;font-weight:700}.detail-section h3{color:var(--primary-light);align-items:center;gap:.5rem;margin-top:0;margin-bottom:1rem;font-size:1.2rem;display:flex}.detail-section h3:before{content:"";background:var(--primary-color);border-radius:2px;width:4px;height:16px;display:block}.skill-item{background:#ffffff08;border:1px solid #ffffff0d;border-radius:8px;margin-bottom:1rem;padding:1.2rem}.skill-item:last-child{margin-bottom:0}.skill-name{color:#fff;margin-bottom:.5rem;font-size:1.1rem;font-weight:700}.skill-desc{color:var(--text-color);white-space:pre-wrap;font-size:.95rem;line-height:1.6}.gift-tags{flex-wrap:wrap;gap:.5rem;display:flex}.gift-tag{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:20px;padding:.4rem .8rem;font-size:.9rem}.filters-container{border-top:1px solid #ffffff0d;flex-direction:column;gap:1.5rem;margin-top:1.5rem;padding-top:1.5rem;display:flex}.filter-section{flex-direction:column;gap:.8rem;display:flex}.filter-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;display:flex}.chip-group{flex-wrap:wrap;gap:.6rem;display:flex}.ui-chip{color:#fff6;cursor:pointer;background:#ffffff05;border:1px solid #ffffff0d;border-radius:24px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.9rem;font-weight:500;transition:all .2s cubic-bezier(.25,.46,.45,.94);display:inline-flex;box-shadow:0 2px 5px #0003}.ui-chip:hover{color:#ffffffe6;background:#ffffff14;border-color:#fff3;transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.ui-chip.active{background:var(--primary-color,#9b59b680);color:#fff;border-color:#fff;font-weight:700;transform:translateY(-2px);box-shadow:0 0 15px #fff6,inset 0 0 10px #ffffff1a}.ui-chip.role-chip.active.role-アタッカー{color:#fff;background:#ff63474d;border-color:tomato;box-shadow:0 0 20px #ff634780}.ui-chip.role-chip.active.role-ブレイカー{color:#fff;background:#ffd7004d;border-color:gold;box-shadow:0 0 20px #ffd70080}.ui-chip.role-chip.active.role-ディフェンダー{color:#fff;background:#4169e14d;border-color:#4169e1;box-shadow:0 0 20px #4169e180}.ui-chip.role-chip.active.role-サポーター{color:#fff;background:#3cb3714d;border-color:#3cb371;box-shadow:0 0 20px #3cb37180}.ui-chip.attr-chip.active.attr-火{color:#ff6b6b;background:#ff6b6b33;border-color:#ff6b6b;box-shadow:0 0 15px #ff6b6b4d}.ui-chip.attr-chip.active.attr-氷{color:#4facfe;background:#4facfe33;border-color:#4facfe;box-shadow:0 0 15px #4facfe4d}.ui-chip.attr-chip.active.attr-雷{color:#f6d365;background:#f6d36533;border-color:#f6d365;box-shadow:0 0 15px #f6d3654d}.ui-chip.attr-chip.active.attr-風{color:#20c997;background:#20c99733;border-color:#20c997;box-shadow:0 0 15px #20c9974d}.ui-chip.attr-chip.active.attr-斬{color:#a18cd1;background:#a18cd133;border-color:#a18cd1;box-shadow:0 0 15px #a18cd14d}.ui-chip.attr-chip.active.attr-打{color:#eb9;background:#eb93;border-color:#eb9;box-shadow:0 0 15px #eebb994d}.ui-chip.attr-chip.active.attr-突{color:#ff9a9e;background:#ff9a9e33;border-color:#ff9a9e;box-shadow:0 0 15px #ff9a9e4d}.sort-indicator{color:inherit;align-items:center;margin-left:.2rem;display:flex}