*{margin:0;padding:0;box-sizing:border-box}body{font-family:Microsoft YaHei,PingFang SC,sans-serif;background:#f0f2f5;color:#333;height:100vh;overflow:hidden}.app{display:flex;flex-direction:column;height:100vh}.app__header{background:#fff;padding:12px 28px;border-bottom:1px solid #e8e8e8;display:flex;align-items:center;gap:12px;box-shadow:0 1px 4px #0000000a}.app__title{font-size:20px;font-weight:700;color:#1890ff}.app__main{display:grid;grid-template-columns:1fr 1fr;gap:0;flex:1;overflow:hidden}.app__left,.app__right{min-width:0;overflow-y:auto}.app__left{border-right:1px solid #e8e8e8;background:#fafafa}.app__right{background:#fff}.loading{text-align:center;color:#999;padding:40px}.namecard-wall{padding:16px 20px}.namecard-wall__header{position:sticky;top:0;z-index:10;background:#fafafa;padding-bottom:14px}.namecard-wall__header h2{font-size:15px;font-weight:600;color:#555;margin-bottom:10px}.namecard-wall__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding-bottom:20px}.namecard-thumb{position:relative;aspect-ratio:1 / 1;width:100%;border-radius:4px;overflow:hidden;border:2px solid transparent;cursor:grab;background:#fff;box-shadow:0 1px 3px #00000014;transition:border-color .15s,transform .15s,opacity .15s,box-shadow .15s}.namecard-thumb:hover{border-color:#1890ff;transform:scale(1.06);z-index:2;box-shadow:0 4px 12px #1890ff26}.namecard-thumb--disabled{opacity:.3;filter:grayscale(.85)}.namecard-thumb--disabled:after{content:"禁用";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#00000073;color:#ff4d4f;font-size:12px;font-weight:600;letter-spacing:1px;pointer-events:none}.namecard-thumb img{width:100%;height:100%;object-fit:cover;pointer-events:none}.namecard-thumb__label{position:absolute;bottom:0;left:0;right:0;font-size:10px;padding:3px 4px;background:linear-gradient(transparent,#000000bf);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}.filter-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.filter-bar__count{font-size:12px;color:#777;margin-left:auto}.preview{padding:16px 20px}.preview h2{font-size:15px;font-weight:600;color:#555;margin-bottom:14px}.preview__capture{display:block;background:#fafafa;border-radius:8px;padding:12px;box-shadow:0 2px 8px #0000000f;border:1px solid #e8e8e8}.preview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.preview-slot{position:relative;aspect-ratio:1 / 1;width:100%;border-radius:4px;border:2px dashed #d9d9d9;overflow:hidden;background:#f5f5f5;cursor:grab;transition:border-color .15s,background .15s}.preview-slot:hover{border-color:#1890ff;background:#e6f7ff}.preview-slot--over{border-color:#1890ff;background:#bae7ff}.preview-slot img{width:100%;height:100%;object-fit:cover;pointer-events:none}.preview-slot__index{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:#ccc;pointer-events:none;font-weight:600}.gradient-panel{background:#fafafa;border-radius:8px;padding:12px 16px;margin-bottom:16px;box-shadow:0 1px 4px #0000000a;border:1px solid #e8e8e8;flex-shrink:0}.gradient-panel__row{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}.gradient-panel__row:last-child{margin-bottom:0}.gradient-panel__label{font-size:12px;color:#777;white-space:nowrap}.gradient-panel__color-node{width:28px;height:28px;border:2px solid #d9d9d9;border-radius:4px;cursor:pointer;position:relative}.gradient-panel__color-node:hover{border-color:#1890ff}.gradient-panel__color-node input[type=color]{position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;opacity:0;cursor:pointer;width:calc(100% + 8px);height:calc(100% + 8px)}.gradient-panel__presets{flex-wrap:wrap}.gradient-panel__gradient-swatch{width:20px;height:12px;border-radius:2px;display:inline-block;border:1px solid #d9d9d9}.action-buttons{margin-top:16px;flex-shrink:0}.app__left::-webkit-scrollbar,.app__right::-webkit-scrollbar{width:5px}.app__left::-webkit-scrollbar-track,.app__right::-webkit-scrollbar-track{background:transparent}.app__left::-webkit-scrollbar-thumb,.app__right::-webkit-scrollbar-thumb{background:#d9d9d9;border-radius:3px}.app__left::-webkit-scrollbar-thumb:hover,.app__right::-webkit-scrollbar-thumb:hover{background:#bbb}.modal-detail__img{width:100%;border-radius:6px;margin-bottom:12px}.modal-detail__name{font-size:20px;font-weight:700;color:#1890ff;margin-bottom:8px}.modal-detail__meta{font-size:13px;color:#999;margin-bottom:8px}.modal-detail__desc{font-size:14px;line-height:1.6;color:#555;margin-bottom:8px}.modal-detail__obtain{font-size:13px;color:#888;margin-bottom:12px}