.custom-export-button,.custom-import-button{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin-top:8px;margin-right:6px;padding:0;background:none;border:none;color:#2563eb;cursor:pointer;vertical-align:top;transition:opacity .15s}.custom-export-button{margin-left:18px;margin-right:2px}.custom-export-button:active,.custom-import-button:active{opacity:.6}body.dark-mode .custom-export-button,body.dark-mode .custom-import-button{color:#67e8f9}.custom-save-toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%) translateY(12px);max-width:90vw;padding:10px 18px;border-radius:8px;background:#1e1e1eeb;color:#fff;font-size:14px;line-height:1.5;box-shadow:0 4px 16px #0000004d;opacity:0;pointer-events:none;z-index:100000;transition:opacity .2s ease,transform .2s ease}.custom-save-toast.show{opacity:1;transform:translate(-50%) translateY(0)}.character-page-slot .character-slot{width:90px;max-width:90px;text-align:center;position:relative}.character-page-slot .character-image{width:90px;height:60px;position:relative;overflow:hidden;cursor:pointer;touch-action:pan-x pan-y pinch-zoom;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}.character-page-slot .character-image img{width:90px;height:60px;object-fit:contain;position:relative;z-index:0;-webkit-user-drag:none}.character-page-slot .character-image:hover{border:2px solid #ff00ff}.character-page-slot .type-select{width:100%;margin:1px 0;padding:8px;box-sizing:border-box;cursor:pointer}body.dark-mode .character-page-slot .type-select{background:#2a2a2a;color:#eee;border:1px solid #555}.character-tier-slot-col{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin-left:auto;align-self:flex-end}.character-page-slot-standalone{display:flex;justify-content:center;margin:24px 0 0}.skill-popup-content{background:#fff;border:1px solid #ccc;border-radius:8px;padding:8px;width:450px;max-width:92vw;text-align:left;font-size:13px;max-height:1700px;overflow:hidden;z-index:2000;box-shadow:0 2px 10px #00000047;box-sizing:border-box}body.dark-mode .skill-popup-content{background:#2c2c2c;border-color:#555;color:#ececec}@media (max-width: 600px){.skill-popup-content{width:300px;font-size:11px;padding:6px;max-height:none;overflow:visible}.skill-popup-content .skill-popup-char-image{width:66px;height:44px;margin-bottom:4px}.skill-popup-content .skill-block{padding:4px 6px;margin-bottom:5px}.skill-popup-content .skill-block p{margin:1px 0}}.skill-popup-close{position:absolute;top:4px;right:4px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;cursor:pointer;color:#666;background:#fffc;border-radius:50%;z-index:1}body.dark-mode .skill-popup-close{color:#ddd;background:#2c2c2ccc}.skill-popup-close:hover{color:#000}body.dark-mode .skill-popup-close:hover{color:#fff}.skill-popup-char-image{width:90px;height:60px;object-fit:contain;border-radius:5px;border:1px solid #ccc;margin-bottom:6px}body.dark-mode .skill-popup-char-image{border-color:#555}.skill-popup-char-image:hover{border:2px solid #ff00ff}body.dark-mode .skill-popup-char-image:hover{border-color:#f0f}.skill-block{padding:6px 8px;margin:0 0 8px;border-radius:4px}.skill-block:last-child{margin-bottom:0}.skill-block p{margin:2px 0}.skill-block-0{background:#0064c814}.skill-block-1{background:#c8780014}.skill-block-2{background:#b4003c14}body.dark-mode .skill-block-0{background:#50a0ff1f}body.dark-mode .skill-block-1{background:#ffb4321f}body.dark-mode .skill-block-2{background:#ff46641f}.skill-label{color:#c00;font-weight:700}body.dark-mode .skill-label{color:#fd0}.highlight-percent{color:#f60;padding:1px;border-radius:3px;display:inline}#characterModal .tab-content.character-grid-modal{display:grid;grid-template-columns:repeat(6,1fr);row-gap:10px;column-gap:2px;align-content:start;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;min-height:0}#characterModal .tab-content.character-grid-modal:not(.active){display:none}@media screen and (max-width: 768px){#characterModal .tab-content.character-grid-modal{grid-template-columns:repeat(5,1fr);row-gap:8px;column-gap:1px}#characterModal .modal-content{max-width:360px}#characterModal .modal-character-img-wrap{width:60px;height:40px;margin-bottom:2px}#characterModal .modal-character img{width:60px;height:40px;object-fit:contain}#characterModal .modal-character p{font-size:.6rem;margin-top:-2px}}