.ip-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.55);z-index:10000;display:none;justify-content:center;align-items:center;font-family:inherit}
.ip-overlay *{box-sizing:border-box}
.ip-dialog{background:#fff;border-radius:10px;width:760px;max-width:94%;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.ip-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #eee;background:linear-gradient(90deg,#f8f9fa,#fff)}
.ip-header h3{margin:0;font-size:1.05rem;color:#333;display:flex;align-items:center;gap:8px}
.ip-header h3 .fa{color:var(--primary,#00cbff)}
.ip-close{background:none;border:none;font-size:1.2rem;color:#999;cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .2s}
.ip-close:hover{color:#ff4d4f;background:#fff0f0}
.ip-tabs{display:flex;gap:0;border-bottom:1px solid #eee;background:#fafafa}
.ip-tab{flex:1;padding:12px;border:none;background:none;cursor:pointer;font-size:.95rem;color:#666;border-bottom:3px solid transparent;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px}
.ip-tab:hover{color:var(--primary,#00cbff);background:#fff}
.ip-tab.active{color:var(--primary,#00cbff);border-bottom-color:var(--primary,#00cbff);background:#fff;font-weight:600}
.ip-body{flex:1;overflow-y:auto;padding:16px 20px}
.ip-pane{min-height:300px}
.ip-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:12px}
.ip-search{flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:6px;font-size:.9rem;font-family:inherit}
.ip-search:focus{outline:none;border-color:var(--primary,#00cbff);box-shadow:0 0 0 3px rgba(0,203,255,.12)}
.ip-info{font-size:.82rem;color:#999;white-space:nowrap}
.ip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.ip-thumb{position:relative;cursor:pointer;border:2px solid transparent;border-radius:8px;overflow:hidden;aspect-ratio:1;background:#f5f5f5;transition:all .2s}
.ip-thumb:hover{border-color:var(--primary,#00cbff);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,203,255,.25)}
.ip-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ip-thumb-name{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;font-size:.72rem;padding:14px 6px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ip-loading,.ip-empty{grid-column:1/-1;text-align:center;padding:40px 20px;color:#999}
.ip-empty .fa{font-size:2.5rem;display:block;margin-bottom:8px;opacity:.4}
.ip-empty p{margin:4px 0}
.ip-pager{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:16px}
.ip-page-btn{padding:6px 14px;border:1px solid #ddd;background:#fff;border-radius:6px;cursor:pointer;color:#666;transition:all .2s}
.ip-page-btn:hover{border-color:var(--primary,#00cbff);color:var(--primary,#00cbff)}
.ip-page-info{font-size:.88rem;color:#666}
.ip-dropzone{border:2px dashed #ccc;border-radius:10px;padding:50px 20px;text-align:center;cursor:pointer;transition:all .25s;background:#fafafa}
.ip-dropzone:hover,.ip-dropzone.drag{border-color:var(--primary,#00cbff);background:#f0fbff;color:var(--primary,#00cbff)}
.ip-dropzone.uploading{opacity:.7;pointer-events:none}
.ip-dropzone .fa{font-size:3rem;color:var(--primary,#00cbff);display:block;margin-bottom:12px}
.ip-dropzone p{margin:6px 0;color:#666}
.ip-dropzone .ip-hint{font-size:.8rem;color:#aaa}
.ip-upload-result{margin-top:16px}
.ip-upload-ok{display:flex;gap:16px;align-items:center;padding:16px;background:#f0fff4;border:1px solid #b7eb8f;border-radius:8px}
.ip-upload-ok img{width:100px;height:100px;object-fit:cover;border-radius:8px;flex:0 0 auto;border:1px solid #eee}
.ip-upload-ok div{flex:1}
.ip-upload-ok p{margin:0 0 8px;color:#52c41a;font-weight:600}
.ip-upload-ok code{display:block;background:#fff;padding:8px 10px;border-radius:4px;font-size:.82rem;color:#666;word-break:break-all;margin-bottom:10px;border:1px solid #eee}
.ip-upload-ok .btn{margin:0}
.ip-upload-fail{padding:14px;background:#fff0f0;border:1px solid #ffa39e;border-radius:8px;color:#f5222d}
.ip-upload-fail .fa{margin-right:6px}
@media (max-width:600px){
  .ip-dialog{width:96%;max-height:92vh}
  .ip-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px}
  .ip-body{padding:12px}
  .ip-upload-ok{flex-direction:column;align-items:flex-start}
  .ip-upload-ok img{width:100%;height:auto}
}