finished Skin UGC

nonpacks/static/css/style.css

@@ -3484,3 +3484,73 @@ a.deletelink {
     padding: 0.1rem 0.5rem; font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
 }
 .plugins-size { color: var(--md-sys-color-on-surface-variant, #6b7280); font-size: 0.78rem; }
+
+/* Skins tab */
+.skin-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 1rem;
+}
+.skin-card {
+    background: var(--md-sys-color-surface-variant, #45475a);
+    border: 1px solid var(--md-sys-color-outline-variant, #3a3f4d);
+    border-radius: 10px;
+    padding: 0.75rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+}
+.skin-preview {
+    width: 100%;
+    aspect-ratio: 1;
+    object-fit: contain;
+    image-rendering: pixelated;
+    background: repeating-conic-gradient(#2a2e3a 0 25%, #232732 0 50%) 0 0 / 24px 24px;
+    border-radius: 6px;
+}
+.skin-card-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.4rem;
+    font-size: 0.82rem;
+    color: var(--md-sys-color-on-surface, #cdd6f4);
+}
+.skin-card-head strong {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.skin-size-badge {
+    border-radius: 999px;
+    background: #313244;
+    color: #a6adc8;
+    padding: 0.1rem 0.5rem;
+    font-size: 0.68rem;
+    font-weight: 600;
+    flex: 0 0 auto;
+}
+.skin-card-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-top: auto;
+}
+.skin-model-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.4rem;
+    font-size: 0.72rem;
+    color: var(--md-sys-color-on-surface-variant, #a6adc8);
+}
+.skin-model-select {
+    background: var(--md-sys-color-surface, #1e1e2e);
+    color: var(--md-sys-color-on-surface, #cdd6f4);
+    border: 1px solid var(--md-sys-color-outline-variant, #45475a);
+    border-radius: 6px;
+    padding: 0.15rem 0.3rem;
+    font-size: 0.75rem;
+}
+.skin-render-btn { width: 100%; }
+